Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BrightFix Electronics | Premium Sales & Repair Services</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['DM Sans', 'system-ui', 'sans-serif'], | |
| display: ['Space Grotesk', 'sans-serif'], | |
| }, | |
| colors: { | |
| ink: { 50: '#f4f6f8', 100: '#e8ecf1', 200: '#d0dae5', 300: '#a8b8cb', 400: '#7a90a8', 500: '#5b738c', 600: '#465b72', 700: '#3a4b5f', 800: '#33404f', 900: '#1e2733', 950: '#0f141b' }, | |
| accent: { 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb' }, | |
| electric: { 400: '#22d3ee', 500: '#06b6d4' }, | |
| amber: { 400: '#fbbf24', 500: '#f59e0b' } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); | |
| --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #33404f #0f141b; } | |
| body { | |
| font-family: 'DM Sans', system-ui, sans-serif; | |
| background-color: #0f141b; | |
| color: #e8ecf1; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: #0f141b; } | |
| ::-webkit-scrollbar-thumb { background: #33404f; border-radius: 3px; } | |
| /* ── Backdrop mesh ── */ | |
| #meshCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35; } | |
| /* ── Glass ── */ | |
| .glass { | |
| background: rgba(15, 20, 27, 0.55); | |
| backdrop-filter: blur(20px) saturate(1.4); | |
| -webkit-backdrop-filter: blur(20px) saturate(1.4); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .glass-strong { | |
| background: rgba(15, 20, 27, 0.82); | |
| backdrop-filter: blur(28px) saturate(1.6); | |
| -webkit-backdrop-filter: blur(28px) saturate(1.6); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| /* ── Text shimmer ── */ | |
| .text-shimmer { | |
| background: linear-gradient(90deg, #e8ecf1 0%, #60a5fa 50%, #e8ecf1 100%); | |
| background-size: 200% auto; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: shimmer 4s linear infinite; | |
| } | |
| @keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } | |
| /* ── Animations ── */ | |
| @keyframes fadeUp { | |
| from { opacity: 0; transform: translateY(40px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } | |
| @keyframes scaleIn { | |
| from { opacity: 0; transform: scale(0.92) translateY(20px); } | |
| to { opacity: 1; transform: scale(1) translateY(0); } | |
| } | |
| @keyframes slideRight { | |
| from { opacity: 0; transform: translateX(-30px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes slideLeft { | |
| from { opacity: 0; transform: translateX(30px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(100%); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes heroFloat { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-12px) rotate(0.5deg); } | |
| } | |
| @keyframes orbit { | |
| from { transform: rotate(0deg) translateX(6px) rotate(0deg); } | |
| to { transform: rotate(360deg) translateX(6px) rotate(-360deg); } | |
| } | |
| @keyframes drawLine { | |
| from { width: 0; } | |
| to { width: var(--line-width, 100%); } | |
| } | |
| @keyframes checkReveal { | |
| from { clip-path: inset(0 100% 0 0); } | |
| to { clip-path: inset(0 0% 0 0); } | |
| } | |
| @keyframes toastSlide { | |
| from { opacity: 0; transform: translateX(50px) scale(0.9); } | |
| to { opacity: 1; transform: translateX(0) scale(1); } | |
| } | |
| @keyframes toastSlideOut { | |
| from { opacity: 1; transform: translateX(0) scale(1); } | |
| to { opacity: 0; transform: translateX(50px) scale(0.9); } | |
| } | |
| @keyframes ripple { | |
| 0% { transform: scale(0); opacity: 0.5; } | |
| 100% { transform: scale(4); opacity: 0; } | |
| } | |
| @keyframes floatBadge { | |
| 0%, 100% { transform: translateY(0) rotate(-2deg); } | |
| 50% { transform: translateY(-6px) rotate(2deg); } | |
| } | |
| @keyframes spinSlow { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes breathe { | |
| 0%, 100% { opacity: 0.3; } | |
| 50% { opacity: 0.6; } | |
| } | |
| .anim-fadeUp { animation: fadeUp 0.8s var(--ease-expo) forwards; } | |
| .anim-fadeIn { animation: fadeIn 0.6s var(--ease-smooth) forwards; } | |
| .anim-scaleIn { animation: scaleIn 0.7s var(--ease-spring) forwards; } | |
| .anim-slideR { animation: slideRight 0.7s var(--ease-expo) forwards; } | |
| .anim-slideL { animation: slideLeft 0.7s var(--ease-expo) forwards; } | |
| .anim-check { animation: checkReveal 0.5s var(--ease-expo) forwards; } | |
| .stagger-1 { animation-delay: 0.1s; } | |
| .stagger-2 { animation-delay: 0.2s; } | |
| .stagger-3 { animation-delay: 0.3s; } | |
| .stagger-4 { animation-delay: 0.4s; } | |
| .stagger-5 { animation-delay: 0.5s; } | |
| .stagger-6 { animation-delay: 0.6s; } | |
| .stagger-7 { animation-delay: 0.7s; } | |
| .stagger-8 { animation-delay: 0.8s; } | |
| .stagger-9 { animation-delay: 0.9s; } | |
| .stagger-10 { animation-delay: 1.0s; } | |
| .pre-anim { opacity: 0; } | |
| /* ── Scroll-reveal system ── */ | |
| .sr { | |
| opacity: 0; | |
| transform: translateY(48px); | |
| transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo); | |
| } | |
| .sr.in { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .sr-left { transform: translateX(-40px); } | |
| .sr-right { transform: translateX(40px); } | |
| .sr-scale { transform: scale(0.92) translateY(30px); } | |
| /* ── Interactives ── */ | |
| .btn-primary { | |
| position: relative; | |
| overflow: hidden; | |
| background: linear-gradient(135deg, #2563eb, #1d4ed8); | |
| color: #fff; | |
| padding: 14px 32px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| letter-spacing: 0.01em; | |
| border: none; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| transition: transform 0.25s var(--ease-spring), box-shadow 0.3s; | |
| box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25), 0 0 0 0 rgba(37, 99, 235, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px) scale(1.01); | |
| box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35), 0 0 0 4px rgba(37, 99, 235, 0.1); | |
| } | |
| .btn-primary:active { transform: translateY(0) scale(0.98); } | |
| .btn-primary .btn-ripple { | |
| position: absolute; inset: 0; pointer-events: none; | |
| } | |
| .btn-primary .btn-ripple::after { | |
| content: ''; | |
| position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; | |
| background: rgba(255,255,255,0.3); border-radius: 50%; | |
| transform: translate(-50%,-50%) scale(0); | |
| transition: transform 0.6s; | |
| } | |
| .btn-primary:hover .btn-ripple::after { transform: translate(-50%,-50%) scale(8); opacity: 0; } | |
| .btn-outline { | |
| position: relative; | |
| overflow: hidden; | |
| background: transparent; | |
| color: #d0dae5; | |
| padding: 14px 32px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| border: 1px solid rgba(168, 184, 203, 0.15); | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| transition: all 0.35s var(--ease-smooth); | |
| } | |
| .btn-outline:hover { | |
| border-color: rgba(96, 165, 250, 0.4); | |
| color: #60a5fa; | |
| background: rgba(96, 165, 250, 0.06); | |
| transform: translateY(-2px); | |
| } | |
| .card-hover { | |
| position: relative; | |
| background: rgba(30, 39, 51, 0.5); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-expo); | |
| } | |
| .card-hover::before { | |
| content: ''; | |
| position: absolute; inset: 0; border-radius: 20px; z-index: 1; | |
| padding: 1.2px; | |
| background: linear-gradient(135deg, rgba(96,165,250,0), rgba(96,165,250,0)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| transition: background 0.5s; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px) scale(1.01); | |
| box-shadow: 0 24px 64px -12px rgba(0,0,0,0.4), 0 0 40px -10px rgba(37,99,235,0.08); | |
| border-color: rgba(96, 165, 250, 0.15); | |
| } | |
| .card-hover:hover::before { | |
| background: linear-gradient(135deg, rgba(96,165,250,0.35), rgba(96,165,250,0)); | |
| } | |
| .card-hover .card-glow { | |
| position: absolute; inset: -100px; border-radius: 50%; | |
| background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(96,165,250,0.06), transparent 60%); | |
| pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.4s; | |
| } | |
| .card-hover:hover .card-glow { opacity: 1; } | |
| .nav-link { | |
| position: relative; | |
| font-weight: 500; | |
| color: #7a90a8; | |
| transition: color 0.3s; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px; | |
| background: #60a5fa; border-radius: 1px; | |
| transition: width 0.35s var(--ease-expo), left 0.35s var(--ease-expo); | |
| } | |
| .nav-link:hover { color: #e8ecf1; } | |
| .nav-link:hover::after { width: 100%; left: 0; } | |
| /* ── Section divider ── */ | |
| .section-divider { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent 0%, rgba(168,184,203,0.08) 20%, rgba(168,184,203,0.15) 50%, rgba(168,184,203,0.08) 80%, transparent 100%); | |
| } | |
| /* ── Marquee ── */ | |
| .marquee-track { display: flex; animation: marquee 30s linear infinite; } | |
| @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } | |
| /* ── Decorative glows ── */ | |
| .glow-orb { | |
| position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; | |
| filter: blur(100px); | |
| } | |
| /* ── Footer signature ── */ | |
| .built-with-link { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| color: #7a90a8; font-size: 0.75rem; font-weight: 500; | |
| text-decoration: none; transition: color 0.3s, gap 0.3s; | |
| padding: 6px 14px; border-radius: 20px; | |
| background: rgba(255,255,255,0.03); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .built-with-link:hover { color: #60a5fa; gap: 10px; background: rgba(96,165,250,0.06); } | |
| /* ── Hero float cluster ── */ | |
| .float-device { | |
| animation: heroFloat 6s ease-in-out infinite; | |
| } | |
| .float-device:nth-child(2) { animation-delay: -2s; animation-duration: 7s; } | |
| .float-device:nth-child(3) { animation-delay: -4s; animation-duration: 8s; } | |
| .float-device:nth-child(4) { animation-delay: -1s; animation-duration: 5.5s; } | |
| /* ── Orbit decoration ── */ | |
| .orbit-dot { | |
| position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(96,165,250,0.5); | |
| animation: orbit 8s linear infinite; | |
| } | |
| /* ── Step connector line ── */ | |
| .step-connector { | |
| position: absolute; top: 32px; left: calc(50% + 28px); width: calc(100% - 56px); height: 2px; | |
| background: linear-gradient(90deg, rgba(96,165,250,0.3), rgba(96,165,250,0.05)); | |
| } | |
| /* ── Tooltip ── */ | |
| .tip { | |
| position: relative; | |
| } | |
| .tip::after { | |
| content: attr(data-tip); | |
| position: absolute; bottom: calc(100% + 8px); left: 50%; | |
| transform: translateX(-50%) translateY(4px); | |
| background: #1e2733; color: #d0dae5; | |
| padding: 6px 12px; border-radius: 8px; | |
| font-size: 0.7rem; font-weight: 500; | |
| border: 1px solid rgba(255,255,255,0.08); | |
| white-space: nowrap; opacity: 0; pointer-events: none; | |
| transition: opacity 0.3s, transform 0.3s var(--ease-expo); | |
| } | |
| .tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } | |
| /* ── Mobile nav ── */ | |
| .mobile-nav { | |
| position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); | |
| z-index: 100; display: flex; gap: 4px; padding: 6px; border-radius: 24px; | |
| background: rgba(15, 20, 27, 0.9); backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255,255,255,0.06); | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.4); | |
| transition: transform 0.5s var(--ease-expo); | |
| } | |
| .mobile-nav.show { transform: translateX(-50%) translateY(0); } | |
| .mobile-nav a { | |
| padding: 10px 14px; border-radius: 16px; color: #7a90a8; | |
| font-size: 0.75rem; font-weight: 600; text-decoration: none; | |
| display: flex; flex-direction: column; align-items: center; gap: 2px; | |
| transition: all 0.3s; | |
| } | |
| .mobile-nav a i { font-size: 1rem; } | |
| .mobile-nav a.active { color: #60a5fa; background: rgba(96,165,250,0.1); } | |
| .mobile-nav a:hover:not(.active) { color: #d0dae5; } | |
| /* ── Cart badge ── */ | |
| .cart-badge { | |
| animation: floatBadge 3s ease-in-out infinite; | |
| } | |
| /* ── Product image zoom ── */ | |
| .product-img-zoom { | |
| overflow: hidden; border-radius: 16px; | |
| } | |
| .product-img-zoom img { | |
| transition: transform 0.7s var(--ease-expo); | |
| } | |
| .card-hover:hover .product-img-zoom img { | |
| transform: scale(1.08); | |
| } | |
| /* ── Loading skeleton ── */ | |
| .skeleton { | |
| background: linear-gradient(90deg, #1e2733 25%, #2a3545 50%, #1e2733 75%); | |
| background-size: 200% 100%; | |
| animation: skeleton 1.5s infinite; | |
| border-radius: 8px; | |
| } | |
| @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } | |
| /* ── Filter pills ── */ | |
| .filter-pill { | |
| padding: 8px 20px; border-radius: 10px; font-size: 0.8125rem; font-weight: 500; | |
| background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); | |
| color: #7a90a8; cursor: pointer; transition: all 0.3s var(--ease-smooth); | |
| white-space: nowrap; | |
| } | |
| .filter-pill:hover { | |
| background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); color: #a8b8cb; | |
| } | |
| .filter-pill.active { | |
| background: linear-gradient(135deg, #2563eb, #1d4ed8); | |
| color: #fff; border-color: transparent; | |
| box-shadow: 0 4px 16px rgba(37,99,235,0.25); | |
| } | |
| /* ── Testimonial card ── */ | |
| .testimonial-card { | |
| transition: transform 0.5s var(--ease-expo); | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-6px) rotate(0.5deg); | |
| } | |
| /* ── Blog card image ── */ | |
| .blog-img-wrap { | |
| overflow: hidden; border-radius: 16px 16px 0 0; | |
| } | |
| .blog-img-wrap img { | |
| transition: transform 0.8s var(--ease-expo); | |
| } | |
| .blog-card:hover .blog-img-wrap img { | |
| transform: scale(1.06); | |
| } | |
| /* ── Social icon ── */ | |
| .social-icon { | |
| width: 40px; height: 40px; border-radius: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); | |
| color: #7a90a8; transition: all 0.3s var(--ease-spring); | |
| } | |
| .social-icon:hover { | |
| background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.3); | |
| color: #60a5fa; transform: translateY(-3px); | |
| } | |
| /* ── Scroll progress ── */ | |
| #scrollProgress { | |
| position: fixed; top: 0; left: 0; height: 2px; z-index: 200; | |
| background: linear-gradient(90deg, #3b82f6, #22d3ee); | |
| transition: width 0.1s linear; width: 0%; | |
| } | |
| /* ── Quote calculation glow ── */ | |
| .quote-result-glow { | |
| background: linear-gradient(135deg, rgba(96,165,250,0.08), rgba(34,211,238,0.04)); | |
| border: 1px solid rgba(96,165,250,0.12); | |
| } | |
| /* ── Particle burst on CTA ── */ | |
| .particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; } | |
| @media (max-width: 768px) { | |
| .mobile-nav { display: flex; } | |
| } | |
| @media (min-width: 769px) { | |
| .mobile-nav { display: none ; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Scroll Progress --> | |
| <div id="scrollProgress"></div> | |
| <!-- Mesh Canvas --> | |
| <canvas id="meshCanvas"></canvas> | |
| <!-- ═══════════════════════════════════════ | |
| HEADER | |
| ═══════════════════════════════════════ --> | |
| <header class="fixed top-0 left-0 right-0 z-50 glass" id="siteHeader"> | |
| <div class="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <!-- Logo --> | |
| <a href="#home" class="flex items-center gap-3 group"> | |
| <div class="relative w-10 h-10 rounded-xl flex items-center justify-center" | |
| style="background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 4px 16px rgba(37,99,235,0.3);"> | |
| <i class="fa-solid fa-bolt text-white text-sm relative z-10"></i> | |
| <div class="absolute inset-0 rounded-xl" style="background: linear-gradient(135deg, #60a5fa, #22d3ee); opacity: 0; transition: opacity 0.4s;" id="logoGlow"></div> | |
| </div> | |
| <span class="font-display font-bold text-lg tracking-tight text-white">Bright<span class="text-blue-400">Fix</span></span> | |
| </a> | |
| <!-- Desktop Nav --> | |
| <nav class="hidden md:flex items-center gap-1"> | |
| <a href="#home" class="nav-link px-4 py-2 text-sm rounded-lg">Home</a> | |
| <a href="#products" class="nav-link px-4 py-2 text-sm rounded-lg">Products</a> | |
| <a href="#repair" class="nav-link px-4 py-2 text-sm rounded-lg">Repair</a> | |
| <a href="#about" class="nav-link px-4 py-2 text-sm rounded-lg">About</a> | |
| <a href="#blog" class="nav-link px-4 py-2 text-sm rounded-lg">Blog</a> | |
| <a href="#contact" class="nav-link px-4 py-2 text-sm rounded-lg">Contact</a> | |
| </nav> | |
| <!-- Actions --> | |
| <div class="flex items-center gap-2"> | |
| <button onclick="toggleCart()" class="relative tip p-2.5 rounded-xl text-ink-400 hover:text-white hover:bg-white/5 transition-all" data-tip="Cart"> | |
| <i class="fa-solid fa-cart-shopping text-base"></i> | |
| <span id="cartBadge" class="cart-badge absolute -top-1 -right-1 w-5 h-5 bg-gradient-to-br from-amber-400 to-amber-500 text-ink-950 text-[10px] font-bold rounded-full flex items-center justify-center shadow-lg">0</span> | |
| </button> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with-link hidden sm:inline-flex ml-2"> | |
| <i class="fa-solid fa-code text-xs"></i> | |
| <span>Built with anycoder</span> | |
| <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i> | |
| </a> | |
| <button class="md:hidden p-2.5 rounded-xl text-ink-400 hover:text-white hover:bg-white/5 transition-all" onclick="toggleMobileMenu()" id="menuBtn"> | |
| <i class="fa-solid fa-bars text-lg"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobileMenu" class="md:hidden hidden glass-strong border-t border-white/5"> | |
| <div class="px-5 py-4 space-y-1"> | |
| <a href="#home" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Home</a> | |
| <a href="#products" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Products</a> | |
| <a href="#repair" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Repair</a> | |
| <a href="#about" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">About</a> | |
| <a href="#blog" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Blog</a> | |
| <a href="#contact" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Contact</a> | |
| <div class="pt-3 border-t border-white/5"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with-link inline-flex"> | |
| <i class="fa-solid fa-code text-xs"></i> | |
| <span>Built with anycoder</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ═══════════════════════════════════════ | |
| HERO | |
| ═══════════════════════════════════════ --> | |
| <section id="home" class="relative min-h-screen flex items-center justify-center pt-16 overflow-hidden"> | |
| <div class="glow-orb" style="width:600px;height:600px;background:rgba(37,99,235,0.06);top:-200px;right:-100px;"></div> | |
| <div class="glow-orb" style="width:400px;height:400px;background:rgba(34,211,238,0.04);bottom:-100px;left:-100px;"></div> | |
| <div class="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 relative z-10 w-full"> | |
| <div class="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center min-h-[calc(100vh-64px)] py-16"> | |
| <!-- Left --> | |
| <div class="text-center lg:text-left"> | |
| <div class="pre-anim anim-fadeUp"> | |
| <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold tracking-wide uppercase" | |
| style="background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.15); color: #60a5fa;"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span> | |
| Trusted by 12,500+ customers | |
| </span> | |
| </div> | |
| <h1 class="mt-6 pre-anim anim-fadeUp stagger-2 font-display font-bold text-4xl sm:text-5xl lg:text-[3.6rem] leading-[1.1] tracking-tight text-white"> | |
| Premium Electronics,<br> | |
| <span class="text-shimmer">Expert Repairs</span> | |
| </h1> | |
| <p class="mt-6 pre-anim anim-fadeUp stagger-3 text-base sm:text-lg text-ink-400 max-w-xl mx-auto lg:mx-0 leading-relaxed"> | |
| Discover top-tier gadgets and professional repair services under one roof. | |
| From the latest smartphones to custom PC builds, BrightFix has you covered. | |
| </p> | |
| <div class="mt-8 flex flex-wrap gap-4 justify-center lg:justify-start pre-anim anim-fadeUp stagger-4"> | |
| <a href="#products" class="btn-primary group"> | |
| <span class="btn-ripple"></span> | |
| <i class="fa-solid fa-bag-shopping"></i> | |
| Shop Now | |
| <i class="fa-solid fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i> | |
| </a> | |
| <a href="#repair" class="btn-outline group"> | |
| <i class="fa-solid fa-screwdriver-wrench"></i> | |
| Repair Services | |
| <i class="fa-solid fa-arrow-right text-xs transition-transform group-hover:translate-x-1 opacity-0 group-hover:opacity-100"></i> | |
| </a> | |
| </div> | |
| <div class="mt-10 flex items-center gap-6 justify-center lg:justify-start pre-anim anim-fadeUp stagger-5"> | |
| <div class="flex -space-x-3"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face" alt="" class="w-10 h-10 rounded-full border-2 border-ink-950 object-cover"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face" alt="" class="w-10 h-10 rounded-full border-2 border-ink-950 object-cover"> | |
| <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face" alt="" class="w-10 h-10 rounded-full border-2 border-ink-950 object-cover"> | |
| <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face" alt="" class="w-10 h-10 rounded-full border-2 border-ink-950 object-cover"> | |
| </div> | |
| <div> | |
| <div class="flex items-center gap-1 mb-0.5"> | |
| <i class="fa-solid fa-star text-amber-400 text-xs"></i> | |
| <i class="fa-solid fa-star text-amber-400 text-xs"></i> | |
| <i class="fa-solid fa-star text-amber-400 text-xs"></i> | |
| <i class="fa-solid fa-star text-amber-400 text-xs"></i> | |
| <i class="fa-solid fa-star-half-stroke text-amber-400 text-xs"></i> | |
| <span class="text-xs font-semibold text-white ml-1">4.9</span> | |
| </div> | |
| <p class="text-xs text-ink-400">Based on 2,847 reviews</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: Floating device cluster --> | |
| <div class="relative hidden lg:block h-[500px] pre-anim anim-fadeUp stagger-6"> | |
| <div class="absolute top-8 left-12 float-device"> | |
| <div class="relative group"> | |
| <div class="w-56 h-72 rounded-3xl overflow-hidden border border-white/10 shadow-2xl" style="box-shadow: 0 25px 80px rgba(37,99,235,0.15);"> | |
| <img src="https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=400&h=500&fit=crop" alt="Laptop" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-semibold text-white" style="background: linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow: 0 4px 16px rgba(37,99,235,0.3);">Laptops</div> | |
| </div> | |
| </div> | |
| <div class="absolute top-0 right-8 float-device"> | |
| <div class="relative group"> | |
| <div class="w-40 h-52 rounded-3xl overflow-hidden border border-white/10 shadow-2xl" style="box-shadow: 0 25px 80px rgba(34,211,238,0.1);"> | |
| <img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=300&h=400&fit=crop" alt="Phone" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-r from-cyan-500 to-blue-500" style="box-shadow: 0 4px 16px rgba(34,211,238,0.3);">Smartphones</div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-24 float-device"> | |
| <div class="relative group"> | |
| <div class="w-44 h-56 rounded-3xl overflow-hidden border border-white/10 shadow-2xl" style="box-shadow: 0 25px 80px rgba(245,158,11,0.1);"> | |
| <img src="https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=340&h=430&fit=crop" alt="iPad" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-semibold text-ink-950 bg-gradient-to-r from-amber-400 to-amber-500" style="box-shadow: 0 4px 16px rgba(245,158,11,0.3);">Tablets</div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-20 right-20 float-device"> | |
| <div class="relative group"> | |
| <div class="w-48 h-36 rounded-2xl overflow-hidden border border-white/10 shadow-2xl" style="box-shadow: 0 25px 80px rgba(139,92,246,0.1);"> | |
| <img src="https://images.unsplash.com/photo-1527814050087-3793815479db?w=380&h=280&fit=crop" alt="Headphones" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-r from-violet-500 to-purple-600" style="box-shadow: 0 4px 16px rgba(139,92,246,0.3);">Audio</div> | |
| </div> | |
| </div> | |
| <!-- Decorative orbits --> | |
| <div class="orbit-dot" style="top: 50%; left: 50%; animation-duration: 12s; width: 8px; height: 8px; background: rgba(96,165,250,0.3);"></div> | |
| <div class="orbit-dot" style="top: 50%; left: 50%; animation-duration: 15s; animation-direction: reverse; width: 5px; height: 5px; background: rgba(34,211,238,0.25);"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scroll indicator --> | |
| <div class="absolute bottom-8 left-1/2 -translate-x-1/2 hidden md:flex flex-col items-center gap-2"> | |
| <span class="text-[10px] font-semibold tracking-widest uppercase text-ink-500">Scroll</span> | |
| <div class="w-px h-8 bg-gradient-to-b from-ink-500 to-transparent"></div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════════════════════ | |
| MARQUEE TRUST BAR | |
| ═══════════════════════════════════════ --> | |
| <div class="relative py-5 overflow-hidden border-y border-white/[0.04]"> | |
| <div class="marquee-track"> | |
| <div class="flex items-center gap-16 px-8 shrink-0"> | |
| <span class="text-ink-500 font-display font-semibold text-sm tracking-wide flex items-center gap-2"><i class="fa-brands fa-apple text-lg"></i>Apple Authorized</span> | |
| <span class="text-ink-500 font-display font-semibold text-sm tracking-wide flex items-center gap-2"><i class="fa-brands fa-windows text-lg"></i>Microsoft Partner</span> | |
| <span class="text-ink-500 font-display font-semibold text-sm tracking |