Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Our Work | Cosmic Canvas</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| overflow-x: hidden; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| color: #f8fafc; | |
| } | |
| .hero-gradient { | |
| background: radial-gradient(circle at 50% 0%, rgba(56, 182, 255, 0.15) 0%, transparent 70%); | |
| } | |
| .card-gradient { | |
| background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%); | |
| } | |
| .text-gradient { | |
| background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 50%, #0ea5e9 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .glow { | |
| filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.5)); | |
| } | |
| .animated-border { | |
| position: relative; | |
| } | |
| .animated-border::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 50%, #0ea5e9 100%); | |
| transform: scaleX(0); | |
| transform-origin: right; | |
| transition: transform 0.3s ease; | |
| } | |
| .animated-border:hover::after { | |
| transform: scaleX(1); | |
| transform-origin: left; | |
| } | |
| .project-card { | |
| transition: all 0.3s ease; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .filter-active { | |
| color: #38bdf8; | |
| border-color: #38bdf8; | |
| } | |
| .masonry-grid { | |
| column-count: 1; | |
| column-gap: 1.5rem; | |
| } | |
| @media (min-width: 640px) { | |
| .masonry-grid { | |
| column-count: 2; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .masonry-grid { | |
| column-count: 3; | |
| } | |
| } | |
| .masonry-item { | |
| break-inside: avoid; | |
| margin-bottom: 1.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body id="vanta-bg" class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-opacity-90 backdrop-blur-md bg-slate-900/80 border-b border-slate-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <a href="index.html" class="text-2xl font-bold text-gradient">CosmicCanvas</a> | |
| </div> | |
| <div class="hidden md:ml-10 md:flex md:space-x-8"> | |
| <a href="index.html" class="animated-border inline-flex items-center px-1 pt-1 text-sm font-medium text-slate-400 hover:text-sky-400">Home</a> | |
| <a href="services.html" class="animated-border inline-flex items-center px-1 pt-1 text-sm font-medium text-slate-400 hover:text-sky-400">Services</a> | |
| <a href="work.html" class="animated-border inline-flex items-center px-1 pt-1 text-sm font-medium text-slate-100 hover:text-sky-400">Work</a> | |
| <a href="about.html" class="animated-border inline-flex items-center px-1 pt-1 text-sm font-medium text-slate-400 hover:text-sky-400">About</a> | |
| <a href="blog.html" class="animated-border inline-flex items-center px-1 pt-1 text-sm font-medium text-slate-400 hover:text-sky-400">Blog</a> | |
| <a href="contact.html" class="animated-border inline-flex items-center px-1 pt-1 text-sm font-medium text-slate-400 hover:text-sky-400">Contact</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <a href="contact.html" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700 shadow-lg transform transition-all hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-slate-400 hover:text-white hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="index.html" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-slate-300 hover:bg-slate-800 hover:border-slate-600">Home</a> | |
| <a href="services.html" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-slate-300 hover:bg-slate-800 hover:border-slate-600">Services</a> | |
| <a href="work.html" class="block pl-3 pr-4 py-2 border-l-4 border-sky-500 text-base font-medium text-white bg-slate-800">Work</a> | |
| <a href="about.html" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-slate-300 hover:bg-slate-800 hover:border-slate-600">About</a> | |
| <a href="blog.html" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-slate-300 hover:bg-slate-800 hover:border-slate-600">Blog</a> | |
| <a href="contact.html" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-slate-300 hover:bg-slate-800 hover:border-slate-600">Contact</a> | |
| <div class="pt-4 pb-3 border-t border-slate-700"> | |
| <div class="mt-3 space-y-1"> | |
| <a href="contact.html" class="block w-full text-center px-4 py-2 text-base font-medium rounded-md text-white bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="hero-gradient pt-32 pb-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> | |
| <span class="block">Our Portfolio of</span> | |
| <span class="block text-gradient">Digital Excellence</span> | |
| </h1> | |
| <p class="mt-3 max-w-md mx-auto text-base text-slate-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"> | |
| Explore our selected projects that showcase innovation, creativity, and technical expertise across various industries. | |
| </p> | |
| <div class="mt-8 flex justify-center"> | |
| <a href="#portfolio" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-sky-100 bg-slate-800 hover:bg-slate-700 shadow-lg transform transition-all hover:scale-105"> | |
| View Portfolio | |
| <i data-feather="arrow-down" class="ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Portfolio Filter --> | |
| <div class="py-12 bg-slate-900/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-base text-sky-400 font-semibold tracking-wide uppercase" id="portfolio">Our Projects</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Work that speaks volumes | |
| </p> | |
| </div> | |
| <div class="mt-12"> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button class="filter-active px-4 py-2 text-sm font-medium rounded-full border border-sky-500 text-sky-400 bg-slate-800/50"> | |
| All Work | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium rounded-full border border-slate-700 text-slate-400 hover:text-sky-400 hover:border-sky-400"> | |
| Web Development | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium rounded-full border border-slate-700 text-slate-400 hover:text-sky-400 hover:border-sky-400"> | |
| Mobile Apps | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium rounded-full border border-slate-700 text-slate-400 hover:text-sky-400 hover:border-sky-400"> | |
| E-commerce | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium rounded-full border border-slate-700 text-slate-400 hover:text-sky-400 hover:border-sky-400"> | |
| Branding | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Portfolio Grid --> | |
| <div class="py-12 bg-slate-900/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="masonry-grid"> | |
| <!-- Project 1 --> | |
| <div class="masonry-item"> | |
| <div class="card-gradient rounded-xl border border-slate-800 overflow-hidden project-card"> | |
| <div class="relative"> | |
| <img class="w-full h-64 object-cover" src="http://static.photos/technology/640x360/301" alt="Nexus Dashboard"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-slate-900/20 to-transparent flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Nexus Dashboard</h3> | |
| <p class="text-slate-300 text-sm">Enterprise analytics platform</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-slate-400 text-sm mb-4"> | |
| A comprehensive data visualization dashboard for enterprise analytics with real-time reporting and predictive insights. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">React</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">D3.js</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Node.js</span> | |
| </div> | |
| <a href="#" class="text-sm font-medium text-sky-400 hover:text-sky-300 inline-flex items-center"> | |
| View Case Study | |
| <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="masonry-item"> | |
| <div class="card-gradient rounded-xl border border-slate-800 overflow-hidden project-card"> | |
| <div class="relative"> | |
| <img class="w-full h-64 object-cover" src="http://static.photos/office/640x360/302" alt="Vertex E-Commerce"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-slate-900/20 to-transparent flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Vertex E-Commerce</h3> | |
| <p class="text-slate-300 text-sm">Luxury fashion platform</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-slate-400 text-sm mb-4"> | |
| A premium e-commerce platform for luxury fashion brands with AI-powered recommendations and AR try-on features. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Shopify Plus</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">React</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">AI</span> | |
| </div> | |
| <a href="#" class="text-sm font-medium text-sky-400 hover:text-sky-300 inline-flex items-center"> | |
| View Case Study | |
| <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="masonry-item"> | |
| <div class="card-gradient rounded-xl border border-slate-800 overflow-hidden project-card"> | |
| <div class="relative"> | |
| <img class="w-full h-64 object-cover" src="http://static.photos/people/640x360/303" alt="Aether Mobile App"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-slate-900/20 to-transparent flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Aether Mobile App</h3> | |
| <p class="text-slate-300 text-sm">Health & wellness tracker</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-slate-400 text-sm mb-4"> | |
| A health and wellness tracking application with personalized insights, habit formation, and community features. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Flutter</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Firebase</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Dart</span> | |
| </div> | |
| <a href="#" class="text-sm font-medium text-sky-400 hover:text-sky-300 inline-flex items-center"> | |
| View Case Study | |
| <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="masonry-item"> | |
| <div class="card-gradient rounded-xl border border-slate-800 overflow-hidden project-card"> | |
| <div class="relative"> | |
| <img class="w-full h-64 object-cover" src="http://static.photos/abstract/640x360/304" alt="OmniCore Branding"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-slate-900/20 to-transparent flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">OmniCore Branding</h3> | |
| <p class="text-slate-300 text-sm">Tech startup identity</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-slate-400 text-sm mb-4"> | |
| Complete brand identity for a cutting-edge tech startup including logo, visual system, and brand guidelines. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Branding</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Illustration</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Typography</span> | |
| </div> | |
| <a href="#" class="text-sm font-medium text-sky-400 hover:text-sky-300 inline-flex items-center"> | |
| View Case Study | |
| <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="masonry-item"> | |
| <div class="card-gradient rounded-xl border border-slate-800 overflow-hidden project-card"> | |
| <div class="relative"> | |
| <img class="w-full h-64 object-cover" src="http://static.photos/finance/640x360/305" alt="Quantum Finance"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-slate-900/20 to-transparent flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Quantum Finance</h3> | |
| <p class="text-slate-300 text-sm">Investment platform</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-slate-400 text-sm mb-4"> | |
| A sophisticated investment platform with AI-driven portfolio management and real-time market analytics. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Vue.js</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Python</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Blockchain</span> | |
| </div> | |
| <a href="#" class="text-sm font-medium text-sky-400 hover:text-sky-300 inline-flex items-center"> | |
| View Case Study | |
| <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="masonry-item"> | |
| <div class="card-gradient rounded-xl border border-slate-800 overflow-hidden project-card"> | |
| <div class="relative"> | |
| <img class="w-full h-64 object-cover" src="http://static.photos/education/640x360/306" alt="EduVerse LMS"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-slate-900/20 to-transparent flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">EduVerse LMS</h3> | |
| <p class="text-slate-300 text-sm">Learning management system</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-slate-400 text-sm mb-4"> | |
| A modern learning management system with interactive courses, progress tracking, and certification features. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">React</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">Node.js</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-sky-300">MongoDB</span> | |
| </div> | |
| <a href="#" class="text-sm font-medium text-sky-400 hover:text-sky-300 inline-flex items-center"> | |
| View Case Study | |
| <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700 shadow-lg transform transition-all hover:scale-105"> | |
| Load More Projects | |
| <i data-feather="rotate-cw" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials Section --> | |
| <div class="py-20 bg-slate-900/70 border-y border-slate-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-sky-400 font-semibold tracking-wide uppercase">Client Success Stories</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Transformative results we've delivered | |
| </p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="card-gradient p-8 rounded-xl border border-slate-800"> | |
| <div class="flex items-center mb-6"> | |
| <img class="w-12 h-12 rounded-full object-cover" src="http://static.photos/people/200x200/401" alt="Sarah Johnson"> | |
| <div class="ml-4"> | |
| <div class="text-lg font-bold text-white">Sarah Johnson</div> | |
| <div class="text-sm text-slate-400">CEO, TechSphere</div> | |
| </div> | |
| </div> | |
| <p class="text-slate-400 italic"> | |
| "Cosmic Canvas transformed our digital presence completely. Our new platform has increased customer engagement by 240% and reduced operational costs significantly." | |
| </p> | |
| <div class="mt-6 flex items-center"> | |
| <div class="flex"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| <div class="ml-4 text-sm text-slate-400"> | |
| <span class="font-bold text-white">240%</span> increase in engagement | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="card-gradient p-8 rounded-xl border border-slate-800"> | |
| <div class="flex items-center mb-6"> | |
| <img class="w-12 h-12 rounded-full object-cover" src="http://static.photos/people/200x200/402" alt="Michael Chen"> | |
| <div class="ml-4"> | |
| <div class="text-lg font-bold text-white">Michael Chen</div> | |
| <div class="text-sm text-slate-400">CTO, NovaCore</div> | |
| </div> | |
| </div> | |
| <p class="text-slate-400 italic"> | |
| "The mobile app developed by Cosmic Canvas exceeded all our expectations. User retention rates are 3x industry average and customer satisfaction is at an all-time high." | |
| </p> | |
| <div class="mt-6 flex items-center"> | |
| <div class="flex"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| <div class="ml-4 text-sm text-slate-400"> | |
| <span class="font-bold text-white">3x</span> industry retention | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="card-gradient p-8 rounded-xl border border-slate-800"> | |
| <div class="flex items-center mb-6"> | |
| <img class="w-12 h-12 rounded-full object-cover" src="http://static.photos/people/200x200/403" alt="Emma Rodriguez"> | |
| <div class="ml-4"> | |
| <div class="text-lg font-bold text-white">Emma Rodriguez</div> | |
| <div class="text-sm text-slate-400">Marketing Director, Aether</div> | |
| </div> | |
| </div> | |
| <p class="text-slate-400 italic"> | |
| "Our e-commerce platform developed by Cosmic Canvas has increased conversion rates by 178% and reduced bounce rates by 60%. Their strategic thinking is as impressive as their technical skills." | |
| </p> | |
| <div class="mt-6 flex items-center"> | |
| <div class="flex"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| <div class="ml-4 text-sm text-slate-400"> | |
| <span class="font-bold text-white">178%</span> conversion increase | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="hero-gradient"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Ready to create something amazing?</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-slate-300 mx-auto"> | |
| Let's discuss how we can help bring your vision to life with our expertise and creativity. | |
| </p> | |
| <div class="mt-8"> | |
| <a href="contact.html" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700 shadow-lg transform transition-all hover:scale-105"> | |
| Start Your Project | |
| <i data-feather="arrow-right" class="ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900/80 border-t border-slate-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="xl:grid xl:grid-cols-3 xl:gap-8"> | |
| <div class="space-y-8 xl:col-span-1"> | |
| <a href="index.html" class="text-2xl font-bold text-gradient">CosmicCanvas</a> | |
| <p class="text-slate-400 text-sm"> | |
| We create digital experiences that captivate, engage, and convert. Our innovative solutions help businesses thrive in the digital landscape. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-slate-400 hover:text-sky-400"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-sky-400"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-sky-400"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-sky-400"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-sky-400"> | |
| <i data-feather="github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> | |
| <div class="md:grid md:grid-cols-2 md:gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-slate-200 tracking-wider uppercase">Solutions</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="services.html" class="text-base text-slate-400 hover:text-sky-400">Web Development</a> | |
| </li> | |
| <li> | |
| <a href="services.html" class="text-base text-slate-400 hover:text-sky-400">Mobile Apps</a> | |
| </li> | |
| <li> | |
| <a href="services.html" class="text-base text-slate-400 hover:text-sky-400">UI/UX Design</a> | |
| </li> | |
| <li> | |
| <a href="services.html" class="text-base text-slate-400 hover:text-sky-400">E-commerce</a> | |
| </li> | |
| <li> | |
| <a href="services.html" class="text-base text-slate-400 hover:text-sky-400">Digital Marketing</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mt-12 md:mt-0"> | |
| <h3 class="text-sm font-semibold text-slate-200 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="about.html" class="text-base text-slate-400 hover:text-sky-400">About Us</a> | |
| </li> | |
| <li> | |
| <a href="about.html" class="text-base text-slate-400 hover:text-sky-400">Our Team</a> | |
| </li> | |
| <li> | |
| <a href="careers.html" class="text-base text-slate-400 hover:text-sky-400">Careers</a> | |
| </li> | |
| <li> | |
| <a href="blog.html" class="text-base text-slate-400 hover:text-sky-400">Blog</a> | |
| </li> | |
| <li> | |
| <a href="contact.html" class="text-base text-slate-400 hover:text-sky-400">Contact</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="md:grid md:grid-cols-2 md:gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-slate-200 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-slate-400 hover:text-sky-400">Case Studies</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-slate-400 hover:text-sky-400">Whitepapers</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-slate-400 hover:text-sky-400">Webinars</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-slate-400 hover:text-sky-400">FAQ</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-slate-400 hover:text-sky-400">Support</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mt-12 md:mt-0"> | |
| <h3 class="text-sm font-semibold text-slate-200 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-slate-400 hover:text-sky-400">Privacy Policy</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-slate-400 hover:text-sky-400">Terms of Service</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-slate-400 hover:text-sky-400">Cookie Policy</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-slate-400 hover:text-sky-400">GDPR</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-slate-800 pt-8"> | |
| <p class="text-base text-slate-400 text-center"> | |
| © 2023 Cosmic Canvas. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.FOG({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| highlightColor: 0x3b82f6, | |
| midtoneColor: 0x1e40af, | |
| lowlightColor: 0x0f172a, | |
| baseColor: 0x0f172a, | |
| blurFactor: 0.6, | |
| speed: 1.5 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Mobile menu toggle | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| const expanded = this.getAttribute('aria-expanded') === 'true' || false; | |
| this.setAttribute('aria-expanded', !expanded); | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| }); | |
| // Filter functionality | |
| document.querySelectorAll('.flex-wrap button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| document.querySelectorAll('.flex-wrap button').forEach(btn => { | |
| btn.classList.remove('filter-active', 'text-sky-400', 'border-sky-500'); | |
| btn.classList.add('text-slate-400', 'border-slate-700'); | |
| }); | |
| // Add active class to clicked button | |
| this.classList.add('filter-active', 'text-sky-400', 'border-sky-500'); | |
| this.classList.remove('text-slate-400', 'border-slate-700'); | |
| }); | |
| }); | |
| // Animation on scroll | |
| const animateOnScroll = function() { | |
| const elements = document.querySelectorAll('.project-card, .card-gradient, .animated-border'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.3; | |
| if(elementPosition < screenPosition) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| // Set initial state for animations | |
| window.addEventListener('load', function() { | |
| const animatedElements = document.querySelectorAll('.project-card, .card-gradient, .animated-border'); | |
| animatedElements.forEach(el => { | |
| el.style.opacity = '0'; | |
| el.style.transform = 'translateY(20px)'; | |
| el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; | |
| }); | |
| setTimeout(() => { | |
| animateOnScroll(); | |
| }, 300); | |
| }); | |
| // Run animation check on scroll | |
| window.addEventListener('scroll', animateOnScroll); | |
| </script> | |
| </body> | |
| </html> | |