| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DeepSite - Next Generation Web Experience</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
| } |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| .card-hover: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); |
| } |
| .wave-shape { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| overflow: hidden; |
| line-height: 0; |
| } |
| .wave-shape svg { |
| position: relative; |
| display: block; |
| width: calc(100% + 1.3px); |
| height: 100px; |
| } |
| .wave-shape .shape-fill { |
| fill: #FFFFFF; |
| } |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| </style> |
| </head> |
| <body class="font-sans antialiased text-gray-800"> |
| |
| <nav class="bg-white shadow-sm fixed w-full z-10"> |
| <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"> |
| <i class="fas fa-code text-purple-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">DeepSite</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#" class="text-purple-600 px-3 py-2 text-sm font-medium">Home</a> |
| <a href="#features" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Features</a> |
| <a href="#technology" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Technology</a> |
| <a href="#pricing" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Pricing</a> |
| <a href="#contact" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Contact</a> |
| </div> |
| <div class="flex items-center md:hidden"> |
| <button class="text-gray-500 hover:text-gray-700 focus:outline-none"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="gradient-bg pt-32 pb-20 relative overflow-hidden"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> |
| <div class="mt-10 mx-auto max-w-md sm:max-w-lg lg:mt-0 lg:mx-0 lg:max-w-none"> |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl sm:leading-tight lg:text-6xl"> |
| <span class="block">DeepSite Technology</span> |
| <span class="block text-purple-200">Beyond the Surface</span> |
| </h1> |
| <p class="mt-3 text-lg text-purple-100 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl"> |
| Experience the next generation of web applications with our deep learning powered platform that adapts to your needs in real-time. |
| </p> |
| <div class="mt-10 sm:flex sm:justify-start"> |
| <div class="rounded-md shadow"> |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
| Get Started |
| </a> |
| </div> |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> |
| Live Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="hidden lg:block relative"> |
| <div class="floating"> |
| <img class="w-full max-w-lg mx-auto" src="https://cdn-icons-png.flaticon.com/512/3271/3271488.png" alt="DeepSite illustration"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="wave-shape"> |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> |
| <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path> |
| </svg> |
| </div> |
| </div> |
|
|
| |
| <div id="features" class="py-16 bg-white"> |
| <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-purple-600 font-semibold tracking-wide uppercase">Features</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| A better way to experience the web |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| DeepSite leverages cutting-edge technologies to deliver unparalleled performance and user experience. |
| </p> |
| </div> |
|
|
| <div class="mt-20"> |
| <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"> |
| |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-brain text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg font-medium text-gray-900">AI-Powered Insights</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Our deep learning algorithms analyze user behavior to provide personalized content recommendations and predictive navigation. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-bolt text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg font-medium text-gray-900">Lightning Fast</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Optimized performance with edge computing and serverless architecture ensures sub-second load times globally. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-shield-alt text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg font-medium text-gray-900">Military-Grade Security</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| End-to-end encryption, biometric authentication, and continuous threat monitoring protect your data 24/7. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-sync-alt text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg font-medium text-gray-900">Real-Time Sync</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Changes propagate instantly across all devices with our proprietary synchronization protocol. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-chart-line text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg font-medium text-gray-900">Advanced Analytics</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Comprehensive dashboards with actionable insights help you understand and optimize your digital presence. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-infinity text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg font-medium text-gray-900">Limitless Scalability</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Our infrastructure automatically scales to handle traffic spikes without compromising performance. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="technology" class="py-16 bg-gray-50"> |
| <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-purple-600 font-semibold tracking-wide uppercase">Technology Stack</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Built with modern technologies |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-6"> |
| <div class="col-span-1 flex justify-center"> |
| <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md"> |
| <i class="fab fa-react text-4xl text-blue-500"></i> |
| </div> |
| </div> |
| <div class="col-span-1 flex justify-center"> |
| <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md"> |
| <i class="fab fa-node-js text-4xl text-green-500"></i> |
| </div> |
| </div> |
| <div class="col-span-1 flex justify-center"> |
| <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md"> |
| <i class="fab fa-python text-4xl text-blue-700"></i> |
| </div> |
| </div> |
| <div class="col-span-1 flex justify-center"> |
| <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md"> |
| <i class="fas fa-database text-4xl text-purple-500"></i> |
| </div> |
| </div> |
| <div class="col-span-1 flex justify-center"> |
| <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md"> |
| <i class="fab fa-aws text-4xl text-orange-500"></i> |
| </div> |
| </div> |
| <div class="col-span-1 flex justify-center"> |
| <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md"> |
| <i class="fas fa-robot text-4xl text-indigo-500"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-16"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8"> |
| <div class="relative lg:pr-8"> |
| <div class="relative overflow-hidden rounded-lg shadow-lg"> |
| <img class="w-full" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI technology"> |
| <div class="absolute inset-0 bg-purple-600 opacity-25"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <h3 class="text-3xl font-bold text-white">Deep Learning Core</h3> |
| </div> |
| </div> |
| </div> |
| <div class="mt-10 lg:mt-0"> |
| <h3 class="text-2xl font-bold text-gray-900">Advanced Neural Networks</h3> |
| <p class="mt-4 text-lg text-gray-500"> |
| Our proprietary neural network architecture processes complex patterns in real-time, enabling adaptive interfaces that learn from user interactions. |
| </p> |
| <div class="mt-8"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-project-diagram"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Graph-Based Processing</h4> |
| <p class="mt-2 text-base text-gray-500"> |
| Data flows through interconnected nodes that dynamically reconfigure based on context and usage patterns. |
| </p> |
| </div> |
| </div> |
| <div class="mt-8"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-cloud"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Distributed Cloud Architecture</h4> |
| <p class="mt-2 text-base text-gray-500"> |
| Computation happens at the edge for minimal latency, with centralized coordination for global consistency. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="pricing" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="sm:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Pricing</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Simple, transparent pricing |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 sm:mx-auto"> |
| Choose the plan that fits your needs. No hidden fees, cancel anytime. |
| </p> |
| </div> |
|
|
| <div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0"> |
| |
| <div class="card-hover border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> |
| <div class="p-6"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Basic</h3> |
| <p class="mt-4 text-sm text-gray-500"> |
| Perfect for individuals and small projects |
| </p> |
| <p class="mt-8"> |
| <span class="text-4xl font-extrabold text-gray-900">$9</span> |
| <span class="text-base font-medium text-gray-500">/month</span> |
| </p> |
| <a href="#" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"> |
| Get started |
| </a> |
| </div> |
| <div class="pt-6 pb-8 px-6"> |
| <h4 class="sr-only">Features</h4> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Up to 10,000 monthly visits |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Basic AI recommendations |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Standard security |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Email support |
| </p> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover border border-purple-500 rounded-lg shadow-sm divide-y divide-gray-200 relative"> |
| <div class="absolute top-0 inset-x-0 h-2 bg-purple-500 rounded-t-lg"></div> |
| <div class="p-6"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Pro</h3> |
| <p class="mt-4 text-sm text-gray-500"> |
| For growing businesses with advanced needs |
| </p> |
| <p class="mt-8"> |
| <span class="text-4xl font-extrabold text-gray-900">$29</span> |
| <span class="text-base font-medium text-gray-500">/month</span> |
| </p> |
| <a href="#" class="mt-8 block w-full bg-purple-600 border border-purple-600 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-purple-700"> |
| Get started |
| </a> |
| </div> |
| <div class="pt-6 pb-8 px-6"> |
| <h4 class="sr-only">Features</h4> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Up to 100,000 monthly visits |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Advanced AI personalization |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Enhanced security |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Priority email support |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Basic analytics dashboard |
| </p> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> |
| <div class="p-6"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Enterprise</h3> |
| <p class="mt-4 text-sm text-gray-500"> |
| For large organizations with custom needs |
| </p> |
| <p class="mt-8"> |
| <span class="text-4xl font-extrabold text-gray-900">$99</span> |
| <span class="text-base font-medium text-gray-500">/month</span> |
| </p> |
| <a href="#" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"> |
| Get started |
| </a> |
| </div> |
| <div class="pt-6 pb-8 px-6"> |
| <h4 class="sr-only">Features</h4> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Unlimited visits |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Custom AI models |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Enterprise-grade security |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| 24/7 dedicated support |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Advanced analytics suite |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-700"> |
| Custom integrations |
| </p> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 bg-gray-50"> |
| <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-purple-600 font-semibold tracking-wide uppercase">Testimonials</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Trusted by industry leaders |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> |
| |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4> |
| <p class="text-purple-600">CEO, TechSolutions</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-500 italic"> |
| "DeepSite transformed our digital presence. The AI-powered recommendations increased our engagement by 300% in just two months." |
| </p> |
| </div> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Michael Chen"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4> |
| <p class="text-purple-600">CTO, Global Innovations</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-500 italic"> |
| "The performance improvements we saw after migrating to DeepSite were beyond our expectations. Page load times dropped by 80%." |
| </p> |
| </div> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Emma Rodriguez</h4> |
| <p class="text-purple-600">Digital Director, RetailCorp</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-500 italic"> |
| "The personalization features have revolutionized our e-commerce platform. Conversion rates are up 45% quarter over quarter." |
| </p> |
| </div> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
| <span class="block">Ready to dive in?</span> |
| <span class="block text-purple-200">Start your free trial today.</span> |
| </h2> |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
| <div class="inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50"> |
| Get started |
| </a> |
| </div> |
| <div class="ml-3 inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-500 bg-opacity-60 hover:bg-opacity-70"> |
| Learn more |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="contact" class="py-16 bg-white"> |
| <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-purple-600 font-semibold tracking-wide uppercase">Contact Us</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Let's talk about your project |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="grid grid-cols-1 gap-8 lg:grid-cols-2"> |
| <div class="bg-gray-50 p-8 rounded-lg"> |
| <h3 class="text-lg font-medium text-gray-900">Get in touch</h3> |
| <p class="mt-2 text-gray-500"> |
| Have questions about DeepSite? Want to see a demo? Fill out the form and our team will get back to you within 24 hours. |
| </p> |
| <div class="mt-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-map-marker-alt text-purple-500"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">Address</p> |
| <p class="text-sm text-gray-500">123 Tech Street, San Francisco, CA 94107</p> |
| </div> |
| </div> |
| <div class="mt-4 flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-phone-alt text-purple-500"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">Phone</p> |
| <p class="text-sm text-gray-500">+1 (555) 123-4567</p> |
| </div> |
| </div> |
| <div class="mt-4 flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-envelope text-purple-500"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">Email</p> |
| <p class="text-sm text-gray-500">hello@deepsite.com</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div> |
| <form class="space-y-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700">Full name</label> |
| <div class="mt-1"> |
| <input type="text" name="name" id="name" autocomplete="name" class="py-3 px-4 block w-full shadow-sm focus:ring-purple-500 focus:border-purple-500 border-gray-300 rounded-md"> |
| </div> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> |
| <div class="mt-1"> |
| <input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-purple-500 focus:border-purple-500 border-gray-300 rounded-md"> |
| </div> |
| </div> |
| <div> |
| <label for="phone" class="block text-sm font-medium text-gray-700">Phone</label> |
| <div class="mt-1"> |
| <input type="text" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-purple-500 focus:border-purple-500 border-gray-300 rounded-md"> |
| </div> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-700">Message</label> |
| <div class="mt-1"> |
| <textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-purple-500 focus:border-purple-500 border-gray-300 rounded-md"></textarea> |
| </div> |
| </div> |
| <div> |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| Submit |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-800"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> |
| <div class="grid grid-cols-2 gap-8 md:grid-cols-4"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Security</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> |
| <div class="mt-4 flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| <div class="mt-6"> |
| <p class="text-gray-300 text-sm"> |
| Subscribe to our newsletter for the latest updates. |
| </p> |
| <form class="mt-2 sm:flex"> |
| <label for="email" class="sr-only">Email</label> |
| <input type="email" name="email" id="email" required class="w-full px-4 py-2 rounded-md border border-gray-700 bg-gray-700 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-purple-500" placeholder="Enter your email"> |
| <button type="submit" class="mt-2 sm:mt-0 sm:ml-2 px-4 py-2 rounded-md bg-purple-600 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"> |
| Subscribe |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 border-t border-gray-700 pt-8"> |
| <p class="text-base text-gray-400 text-center"> |
| © 2023 DeepSite Technologies. All rights reserved. |
| </p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelector('form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| alert('Thank you for your message! We will get back to you soon.'); |
| this.reset(); |
| }); |
| |
| |
| document.querySelector('.md\\:hidden button').addEventListener('click', function() { |
| alert('Mobile menu would open here in a full implementation'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=murali418/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
