Spaces:
Running
Running
File size: 18,083 Bytes
397f146 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 | <!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webawarewise - Websites That Actually Work</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.gradient-text {
background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-bg {
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e293b 100%);
position: relative;
overflow: hidden;
}
.hero-bg::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: url('http://static.photos/technology/1024x576/42') center/cover;
opacity: 0.3;
mix-blend-mode: luminosity;
}
.gauge-circle {
position: relative;
width: 300px;
height: 300px;
}
.gauge-bg {
fill: none;
stroke: rgba(255,255,255,0.1);
stroke-width: 8;
}
.gauge-progress {
fill: none;
stroke: url(#gaugeGradient);
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 440;
stroke-dashoffset: 220;
transform: rotate(-90deg);
transform-origin: center;
animation: gaugeAnimation 2s ease-out forwards;
}
@keyframes gaugeAnimation {
to {
stroke-dashoffset: 66;
}
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.faq-content.active {
max-height: 500px;
}
.faq-icon {
transition: transform 0.3s ease;
}
.faq-icon.active {
transform: rotate(180deg);
}
.feature-card:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
</style>
</head>
<body class="antialiased text-slate-900 bg-white">
<!-- Navigation -->
<nav class="absolute top-0 left-0 right-0 z-50 py-6 px-6 lg:px-12">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold text-white tracking-tight flex items-center gap-2">
<i data-lucide="box" class="w-6 h-6 text-cyan-400"></i>
Webawarewise
</a>
<a href="#work" class="text-white/90 hover:text-cyan-400 transition-colors font-medium">
My Work
</a>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-bg min-h-screen relative flex items-center pt-20">
<div class="max-w-7xl mx-auto px-6 lg:px-12 w-full relative z-10">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="space-y-8">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight">
A Website That Works—<br>
<span class="text-cyan-400">Not Just One</span><br>
That Looks Good
</h1>
<p class="text-lg text-slate-300 max-w-xl leading-relaxed">
Sick of "pretty" sites that flop? I build websites that actually solve your problem—by listening first, designing second.
</p>
<button class="bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-bold py-4 px-8 rounded-full transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/25 flex items-center gap-2 group">
<span>BOOK A 30 MINUTE CALL</span>
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
</button>
</div>
<div class="hidden lg:flex justify-center items-center relative">
<svg class="gauge-circle" viewBox="0 0 150 150">
<defs>
<linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#38bdf8;stop-opacity:1" />
<stop offset="100%" style="stop-color:#818cf8;stop-opacity:1" />
</linearGradient>
</defs>
<circle class="gauge-bg" cx="75" cy="75" r="70"></circle>
<circle class="gauge-progress" cx="75" cy="75" r="70"></circle>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-6xl font-bold text-white tracking-tighter">0.5</span>
<span class="text-xl text-cyan-400 font-medium">seconds</span>
</div>
<div class="absolute -bottom-4 text-center w-full">
<span class="text-sm text-slate-400 uppercase tracking-widest">Load Time</span>
</div>
</div>
</div>
</div>
</section>
<!-- Tools Section -->
<section class="bg-gradient-to-r from-slate-200 via-slate-100 to-slate-200 py-20 lg:py-32">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-900 leading-tight">
The Right Tools. The Right Fit. The Right Website.
</h2>
<p class="text-lg text-slate-600 leading-relaxed">
At Webawarewise, I start with your actual goal—then choose the tools that match.
</p>
</div>
</div>
</section>
<!-- Features Section -->
<section class="bg-[#0f172a] py-20 lg:py-32">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="grid md:grid-cols-3 gap-8 lg:gap-12">
<!-- Feature 1 -->
<div class="feature-card text-center p-6">
<div class="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
<i data-lucide="settings" class="w-8 h-8 text-cyan-400"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4">
Your Site Will Do the Job, Not Just Look the Part
</h3>
<p class="text-slate-400 leading-relaxed">
I choose the platform based on your goal—not what's easiest for me.
</p>
</div>
<!-- Feature 2 -->
<div class="feature-card text-center p-6">
<div class="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
<i data-lucide="eye" class="w-8 h-8 text-cyan-400"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4">
You'll See It Before You Sign Off
</h3>
<p class="text-slate-400 leading-relaxed">
Mockups let you preview and tweak everything before launch—no surprises.
</p>
</div>
<!-- Feature 3 -->
<div class="feature-card text-center p-6">
<div class="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
<i data-lucide="message-circle" class="w-8 h-8 text-cyan-400"></i>
</div>
<h3 class="text-xl font-bold text-white mb-4">
You'll Get Honest Advice That Actually Helps
</h3>
<p class="text-slate-400 leading-relaxed">
If you don't need something, I'll say so. If it's worth it, I'll explain why—in plain English.
</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="bg-[#0f172a] py-20 lg:py-32 border-t border-slate-800">
<div class="max-w-4xl mx-auto px-6 lg:px-12">
<h2 class="text-4xl font-bold text-white text-center mb-16">FAQ</h2>
<div class="space-y-4">
<!-- FAQ Item 1 (Active by default) -->
<div class="faq-item border-b border-slate-700 pb-4">
<button class="faq-toggle w-full flex justify-between items-center py-4 text-left group">
<h3 class="text-lg font-semibold text-white group-hover:text-cyan-400 transition-colors pr-8">
How long will it take to design and develop my website?
</h3>
<i data-lucide="chevron-down" class="faq-icon active w-5 h-5 text-slate-400 flex-shrink-0"></i>
</button>
<div class="faq-content active">
<p class="text-slate-400 pb-4 leading-relaxed">
The timeline for each project varies based on the complexity and specific requirements of your website. On average, it will take about a week. I prioritize thorough planning and quality execution to ensure your website meets your expectations and business goals.
</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item border-b border-slate-700 pb-4">
<button class="faq-toggle w-full flex justify-between items-center py-4 text-left group">
<h3 class="text-lg font-semibold text-white group-hover:text-cyan-400 transition-colors pr-8">
What Technologies Will My Website Be Built With?
</h3>
<i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-slate-400 flex-shrink-0"></i>
</button>
<div class="faq-content">
<p class="text-slate-400 pb-4 leading-relaxed">
I select the best technologies based on your specific needs—whether that's a custom HTML/CSS/JavaScript solution for maximum performance, or platforms like WordPress or Webflow for easier content management. Every decision is tailored to your goals.
</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item border-b border-slate-700 pb-4">
<button class="faq-toggle w-full flex justify-between items-center py-4 text-left group">
<h3 class="text-lg font-semibold text-white group-hover:text-cyan-400 transition-colors pr-8">
Will my website be mobile-friendly and responsive?
</h3>
<i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-slate-400 flex-shrink-0"></i>
</button>
<div class="faq-content">
<p class="text-slate-400 pb-4 leading-relaxed">
Absolutely. Every website I build is fully responsive and optimized for all devices—desktops, tablets, and smartphones. Mobile-first design is standard practice, ensuring your site looks great and functions perfectly on any screen size.
</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item border-b border-slate-700 pb-4">
<button class="faq-toggle w-full flex justify-between items-center py-4 text-left group">
<h3 class="text-lg font-semibold text-white group-hover:text-cyan-400 transition-colors pr-8">
Do you provide ongoing support and maintenance?
</h3>
<i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-slate-400 flex-shrink-0"></i>
</button>
<div class="faq-content">
<p class="text-slate-400 pb-4 leading-relaxed">
Yes, I offer maintenance packages to keep your website secure, updated, and running smoothly. This includes regular backups, security updates, content updates, and technical support whenever you need it.
</p>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="faq-item border-b border-slate-700 pb-4">
<button class="faq-toggle w-full flex justify-between items-center py-4 text-left group">
<h3 class="text-lg font-semibold text-white group-hover:text-cyan-400 transition-colors pr-8">
How involved do I need to be in the process?
</h3>
<i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-slate-400 flex-shrink-0"></i>
</button>
<div class="faq-content">
<p class="text-slate-400 pb-4 leading-relaxed">
Your involvement is crucial during key phases—initial discovery, design approval, and content review. However, I handle all the technical heavy lifting. We'll have check-ins at major milestones, but I strive to make the process as seamless as possible for you.
</p>
</div>
</div>
<!-- FAQ Item 6 -->
<div class="faq-item border-b border-slate-700 pb-4">
<button class="faq-toggle w-full flex justify-between items-center py-4 text-left group">
<h3 class="text-lg font-semibold text-white group-hover:text-cyan-400 transition-colors pr-8">
What if I need changes or updates to my site after it's launched?
</h3>
<i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-slate-400 flex-shrink-0"></i>
</button>
<div class="faq-content">
<p class="text-slate-400 pb-4 leading-relaxed">
Post-launch updates are handled through maintenance packages or on an as-needed basis. Minor updates are typically turned around quickly. For larger feature additions, we'll discuss scope and timeline to ensure everything meets your evolving needs.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-[#0a0f1c] py-12 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-6 lg:px-12">
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2">
<i data-lucide="box" class="w-6 h-6 text-cyan-400"></i>
<span class="text-2xl font-bold text-white tracking-tight">Webawarewise</span>
</div>
<p class="text-slate-500 text-sm">
© 2025 Lavar Storr. All right reserved.
</p>
<div class="flex items-center gap-6">
<a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">
<i data-lucide="instagram" class="w-6 h-6"></i>
</a>
<a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">
<i data-lucide="twitter" class="w-6 h-6"></i>
</a>
<a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">
<i data-lucide="linkedin" class="w-6 h-6"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
// Initialize Lucide icons
lucide.createIcons();
// FAQ Accordion functionality
document.querySelectorAll('.faq-toggle').forEach(button => {
button.addEventListener('click', () => {
const item = button.parentElement;
const content = item.querySelector('.faq-content');
const icon = item.querySelector('.faq-icon');
// Close all other open FAQs
document.querySelectorAll('.faq-item').forEach(otherItem => {
if (otherItem !== item) {
otherItem.querySelector('.faq-content').classList.remove('active');
otherItem.querySelector('.faq-icon').classList.remove('active');
}
});
// Toggle current item
content.classList.toggle('active');
icon.classList.toggle('active');
});
});
</script>
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
</body>
</html> |