Spaces:
Running
Running
| <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> |