Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WebCraft - Premium Website Templates</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%); | |
| } | |
| .template-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); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 12px; | |
| margin-bottom: 1rem; | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .pricing-card:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #6e8efb; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <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-cubes text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">WebCraft</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#templates" class="nav-link border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Templates</a> | |
| <a href="#features" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a> | |
| <a href="#pricing" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a> | |
| <a href="#testimonials" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Testimonials</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Get Started</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg pt-24 pb-20"> | |
| <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="mb-12 lg:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-6">Launch Your Website in Minutes</h1> | |
| <p class="text-xl text-indigo-100 mb-8">Beautiful, responsive templates that convert. No coding required.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg text-lg font-semibold shadow-lg transition duration-150 ease-in-out">Browse Templates</button> | |
| <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-600 px-6 py-3 rounded-lg text-lg font-semibold transition duration-150 ease-in-out">Live Demo</button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -top-8 -left-8 w-64 h-64 bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div> | |
| <div class="absolute -bottom-12 -right-8 w-64 h-64 bg-pink-400 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="Dashboard" class="rounded-lg shadow-2xl border-8 border-white"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Templates Section --> | |
| <section id="templates" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Premium Website Templates</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Choose from our collection of professionally designed templates for any industry.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Template 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out"> | |
| <div class="relative pb-2/3 h-48"> | |
| <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/agency.jpg" alt="Agency Template"> | |
| <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Popular</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Creative Agency</h3> | |
| <p class="text-gray-600 mb-4">Perfect for design studios, marketing agencies, and creative professionals.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-gray-900">$49</span> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out"> | |
| <div class="relative pb-2/3 h-48"> | |
| <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/ecommerce.jpg" alt="Ecommerce Template"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">E-Commerce Pro</h3> | |
| <p class="text-gray-600 mb-4">Complete online store solution with product pages, cart, and checkout flow.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-gray-900">$79</span> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out"> | |
| <div class="relative pb-2/3 h-48"> | |
| <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/portfolio.jpg" alt="Portfolio Template"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Artist Portfolio</h3> | |
| <p class="text-gray-600 mb-4">Showcase your creative work with this elegant portfolio template.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-gray-900">$39</span> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 4 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out"> | |
| <div class="relative pb-2/3 h-48"> | |
| <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/restaurant.jpg" alt="Restaurant Template"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Gourmet Restaurant</h3> | |
| <p class="text-gray-600 mb-4">Beautiful template for restaurants, cafes, and food businesses.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-gray-900">$59</span> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 5 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out"> | |
| <div class="relative pb-2/3 h-48"> | |
| <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/saas.jpg" alt="SaaS Template"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">SaaS Startup</h3> | |
| <p class="text-gray-600 mb-4">Modern landing page for software as a service businesses.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-gray-900">$69</span> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template 6 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out"> | |
| <div class="relative pb-2/3 h-48"> | |
| <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/blog.jpg" alt="Blog Template"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Minimal Blog</h3> | |
| <p class="text-gray-600 mb-4">Clean and content-focused template for writers and bloggers.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-gray-900">$29</span> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg text-lg font-semibold shadow-lg transition duration-150 ease-in-out">View All Templates (24+)</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Why Choose WebCraft</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Everything you need to launch a professional website quickly.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="text-center px-4"> | |
| <div class="feature-icon bg-indigo-100 text-indigo-600 mx-auto"> | |
| <i class="fas fa-bolt text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Lightning Fast Setup</h3> | |
| <p class="text-gray-600">Get your website up and running in minutes with our one-click deployment.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="text-center px-4"> | |
| <div class="feature-icon bg-pink-100 text-pink-600 mx-auto"> | |
| <i class="fas fa-mobile-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Fully Responsive</h3> | |
| <p class="text-gray-600">All templates look perfect on any device, from desktop to mobile.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="text-center px-4"> | |
| <div class="feature-icon bg-blue-100 text-blue-600 mx-auto"> | |
| <i class="fas fa-paint-brush text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Easy Customization</h3> | |
| <p class="text-gray-600">Change colors, fonts, and content with our intuitive editor.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="text-center px-4"> | |
| <div class="feature-icon bg-green-100 text-green-600 mx-auto"> | |
| <i class="fas fa-headset text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">24/7 Support</h3> | |
| <p class="text-gray-600">Our team is always ready to help you with any questions.</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Advanced Customization Options</h3> | |
| <p class="text-gray-600 mb-6">Our templates come with extensive customization options that let you tailor every aspect of your website without touching a single line of code.</p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Change colors with our color picker tool</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Upload your own fonts or choose from our library</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Drag-and-drop section rearrangement</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">One-click demo content import</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -top-8 -left-8 w-64 h-64 bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Customization dashboard" class="rounded-lg shadow-2xl border-8 border-white"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">What Our Customers Say</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Join thousands of satisfied customers who launched their websites with WebCraft.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-indigo-600">Creative Director</div> | |
| </div> | |
| </div> | |
| <div class="text-gray-600"> | |
| <p>"I was able to launch our agency website in just one afternoon. The template was exactly what we needed and the customization options let us make it truly ours."</p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Michael Chen"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="font-medium text-gray-900">Michael Chen</div> | |
| <div class="text-indigo-600">E-commerce Entrepreneur</div> | |
| </div> | |
| </div> | |
| <div class="text-gray-600"> | |
| <p>"The e-commerce template saved me weeks of development time. It had all the features I needed and the support team helped me integrate my payment gateway."</p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="font-medium text-gray-900">Emma Rodriguez</div> | |
| <div class="text-indigo-600">Photographer</div> | |
| </div> | |
| </div> | |
| <div class="text-gray-600"> | |
| <p>"As a photographer, my portfolio is everything. The portfolio template showcases my work beautifully and I get compliments on it all the time."</p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <div class="inline-flex space-x-4"> | |
| <button class="w-3 h-3 rounded-full bg-indigo-600"></button> | |
| <button class="w-3 h-3 rounded-full bg-gray-300"></button> | |
| <button class="w-3 h-3 rounded-full bg-gray-300"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Simple, Transparent Pricing</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Choose the plan that works best for your business.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Basic Plan --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden pricing-card transition duration-300 ease-in-out"> | |
| <div class="px-6 py-8"> | |
| <h3 class="text-lg font-medium text-gray-900">Basic</h3> | |
| <div class="mt-4 flex items-baseline"> | |
| <span class="text-4xl font-extrabold text-gray-900">$29</span> | |
| <span class="ml-1 text-lg font-medium text-gray-500">/template</span> | |
| </div> | |
| <p class="mt-4 text-gray-500">Perfect for personal projects and small businesses.</p> | |
| </div> | |
| <div class="border-t border-gray-200 px-6 pt-6 pb-8"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">1 Website License</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Basic Customization</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Email Support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-times text-gray-400 mt-1 mr-3"></i> | |
| <span class="text-gray-500">Premium Support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-times text-gray-400 mt-1 mr-3"></i> | |
| <span class="text-gray-500">Future Updates</span> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="bg-white rounded-xl shadow-2xl overflow-hidden border-2 border-indigo-500 transform scale-105 pricing-card transition duration-300 ease-in-out"> | |
| <div class="px-6 py-8 bg-indigo-50"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-gray-900">Pro</h3> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Popular</span> | |
| </div> | |
| <div class="mt-4 flex items-baseline"> | |
| <span class="text-4xl font-extrabold text-gray-900">$79</span> | |
| <span class="ml-1 text-lg font-medium text-gray-500">/template</span> | |
| </div> | |
| <p class="mt-4 text-gray-500">Ideal for growing businesses and professionals.</p> | |
| </div> | |
| <div class="border-t border-gray-200 px-6 pt-6 pb-8"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">3 Website Licenses</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Advanced Customization</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Priority Email Support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">1 Year of Updates</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-times text-gray-400 mt-1 mr-3"></i> | |
| <span class="text-gray-500">Dedicated Account Manager</span> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden pricing-card transition duration-300 ease-in-out"> | |
| <div class="px-6 py-8"> | |
| <h3 class="text-lg font-medium text-gray-900">Enterprise</h3> | |
| <div class="mt-4 flex items-baseline"> | |
| <span class="text-4xl font-extrabold text-gray-900">$199</span> | |
| <span class="ml-1 text-lg font-medium text-gray-500">/template</span> | |
| </div> | |
| <p class="mt-4 text-gray-500">For agencies and large organizations.</p> | |
| </div> | |
| <div class="border-t border-gray-200 px-6 pt-6 pb-8"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Unlimited Licenses</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">White-label Options</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">24/7 Priority Support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Lifetime Updates</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Dedicated Account Manager</span> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-indigo-50 rounded-xl p-8 max-w-4xl mx-auto"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-2/3"> | |
| <h3 class="text-xl font-bold text-gray-900">Need a custom solution?</h3> | |
| <p class="mt-2 text-gray-600">We offer custom template development and white-label solutions for agencies.</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg text-lg font-semibold shadow-lg transition duration-150 ease-in-out">Contact Sales</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl">Ready to Launch Your Website?</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-indigo-100 mx-auto">Join thousands of businesses who launched their online presence with WebCraft.</p> | |
| <div class="mt-8 flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-lg text-lg font-semibold shadow-lg transition duration-150 ease-in-out">Browse All Templates</button> | |
| <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-600 px-8 py-4 rounded-lg text-lg font-semibold transition duration-150 ease-in-out">Schedule a Demo</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">WebCraft</h3> | |
| <p class="text-gray-400">Premium website templates for businesses and professionals.</p> | |
| <div class="mt-4 flex space-x-4"> | |
| <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-facebook-f"></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> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Products</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">All Templates</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Popular Templates</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">New Releases</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Support Center</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Legal</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400">© 2023 WebCraft. All rights reserved.</p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple JavaScript for mobile menu toggle | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]'); | |
| const mobileMenu = document.createElement('div'); | |
| mobileMenu.id = 'mobile-menu'; | |
| mobileMenu.className = 'hidden sm:hidden bg-white shadow-lg absolute top-16 left-0 right-0 z-20'; | |
| mobileMenu.innerHTML = ` | |
| <div class="px-2 pt-2 pb-3 space-y-1"> | |
| <a href="#templates" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-50">Templates</a> | |
| <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Features</a> | |
| <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Pricing</a> | |
| <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Testimonials</a> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <button class="block w-full text-center bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-base font-medium">Get Started</button> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(mobileMenu); | |
| mobileMenuButton.addEventListener('click', function() { | |
| const isExpanded = this.getAttribute('aria-expanded') === 'true'; | |
| this.setAttribute('aria-expanded', !isExpanded); | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenuButton.setAttribute('aria-expanded', 'false'); | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| }); | |
| </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=chatkenneth/webcraft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |