Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Stitch Design - Modern Website Builder</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3d99f5', | |
| dark: '#101a23', | |
| secondary: '#182634', | |
| accent: '#90adcb', | |
| }, | |
| fontFamily: { | |
| sans: ['Spline Sans', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'float-reverse': 'float-reverse 7s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| 'float-reverse': { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .glass-card { | |
| background: rgba(24, 38, 52, 0.7); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3d99f5, #6bd1ff); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(61, 153, 245, 0.2); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| .blob { | |
| filter: blur(40px); | |
| opacity: 0.2; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-white font-sans min-h-screen flex flex-col"> | |
| <!-- Floating background elements --> | |
| <div class="fixed inset-0 overflow-hidden pointer-events-none"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary blob animation-float"></div> | |
| <div class="absolute top-1/3 right-1/4 w-80 h-80 rounded-full bg-accent blob animation-float-reverse"></div> | |
| <div class="absolute bottom-1/4 left-1/3 w-72 h-72 rounded-full bg-primary blob animation-pulse-slow"></div> | |
| </div> | |
| <!-- Header --> | |
| <header class="relative z-10 py-6 px-4 sm:px-6 lg:px-8"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> | |
| </svg> | |
| <span class="ml-2 text-xl font-bold">Stitch<span class="gradient-text">Design</span></span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-accent hover:text-white transition-all">Features</a> | |
| <a href="#" class="text-accent hover:text-white transition-all">Templates</a> | |
| <a href="#" class="text-accent hover:text-white transition-all">Pricing</a> | |
| <a href="#" class="text-accent hover:text-white transition-all">Resources</a> | |
| </nav> | |
| <button class="hidden md:block bg-primary hover:bg-opacity-90 text-white px-6 py-2 rounded-lg font-medium transition-all"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden text-accent"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <main class="flex-grow relative z-10"> | |
| <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> | |
| Build <span class="gradient-text">Stunning</span> Websites <br class="hidden md:block">With Ease | |
| </h1> | |
| <p class="text-lg md:text-xl text-accent max-w-2xl mx-auto mb-10"> | |
| Create functional and responsive websites with our intuitive builder, featuring glassmorphism UI and Shadcn MVP blocks. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-primary hover:bg-opacity-90 text-white px-8 py-4 rounded-xl font-bold text-lg transition-all transform hover:scale-105"> | |
| Start Building - It's Free | |
| </button> | |
| <button class="glass-card hover:bg-opacity-50 border border-accent border-opacity-20 text-white px-8 py-4 rounded-xl font-medium text-lg transition-all"> | |
| Explore Templates | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Image --> | |
| <section class="container mx-auto px-4 sm:px-6 lg:px-8 mb-20"> | |
| <div class="glass-card rounded-3xl overflow-hidden shadow-2xl transition-all transform hover:scale-[1.01]"> | |
| <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Website builder interface" | |
| class="w-full h-auto object-cover"> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Why Choose StitchDesign?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="glass-card p-8 rounded-2xl transition-all card-hover"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-xl flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Drag & Drop Builder</h3> | |
| <p class="text-accent">Intuitive interface that lets you create beautiful websites without writing a single line of code.</p> | |
| </div> | |
| <div class="glass-card p-8 rounded-2xl transition-all card-hover"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-xl flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Modern Templates</h3> | |
| <p class="text-accent">Professionally designed templates for every industry, fully customizable to match your brand.</p> | |
| </div> | |
| <div class="glass-card p-8 rounded-2xl transition-all card-hover"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-20 rounded-xl flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Built-in Security</h3> | |
| <p class="text-accent">Enterprise-grade security with automatic updates and backups to keep your site safe.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Templates Section --> | |
| <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Popular Templates</h2> | |
| <a href="#" class="text-primary hover:underline flex items-center"> | |
| View all templates | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Portfolio Template --> | |
| <div class="glass-card rounded-2xl overflow-hidden transition-all card-hover"> | |
| <div class="relative overflow-hidden aspect-[4/3]"> | |
| <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" | |
| alt="Portfolio template" | |
| class="w-full h-full object-cover transition-all duration-500 hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <span class="bg-primary bg-opacity-20 text-primary text-xs font-medium px-3 py-1 rounded-full">New</span> | |
| <h3 class="text-xl font-bold mt-2">Portfolio Pro</h3> | |
| <p class="text-accent text-sm">Showcase your work with style</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <span class="ml-1 text-sm">4.9 (128)</span> | |
| </div> | |
| <button class="text-primary text-sm font-medium">Preview</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- E-commerce Template --> | |
| <div class="glass-card rounded-2xl overflow-hidden transition-all card-hover"> | |
| <div class="relative overflow-hidden aspect-[4/3]"> | |
| <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="E-commerce template" | |
| class="w-full h-full object-cover transition-all duration-500 hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <span class="bg-purple-500 bg-opacity-20 text-purple-400 text-xs font-medium px-3 py-1 rounded-full">Popular</span> | |
| <h3 class="text-xl font-bold mt-2">ShopFront</h3> | |
| <p class="text-accent text-sm">Complete e-commerce solution</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <span class="ml-1 text-sm">4.8 (256)</span> | |
| </div> | |
| <button class="text-primary text-sm font-medium">Preview</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Blog Template --> | |
| <div class="glass-card rounded-2xl overflow-hidden transition-all card-hover"> | |
| <div class="relative overflow-hidden aspect-[4/3]"> | |
| <img src="https://images.unsplash.com/photo-1546074177-ffdda98d214f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Blog template" | |
| class="w-full h-full object-cover transition-all duration-500 hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <span class="bg-green-500 bg-opacity-20 text-green-400 text-xs font-medium px-3 py-1 rounded-full">Updated</span> | |
| <h3 class="text-xl font-bold mt-2">Writer's Block</h3> | |
| <p class="text-accent text-sm">Elegant blogging platform</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> | |
| </svg> | |
| <span class="ml-1 text-sm">4.7 (184)</span> | |
| </div> | |
| <button class="text-primary text-sm font-medium">Preview</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24"> | |
| <div class="glass-card rounded-3xl p-12 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build Your Dream Website?</h2> | |
| <p class="text-lg text-accent max-w-2xl mx-auto mb-10">Join thousands of creators who are building beautiful websites with StitchDesign.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-primary hover:bg-opacity-90 text-white px-8 py-4 rounded-xl font-bold text-lg transition-all transform hover:scale-105"> | |
| Get Started - Free Forever | |
| </button> | |
| <button class="border border-accent border-opacity-20 hover:border-opacity-40 text-white px-8 py-4 rounded-xl font-medium text-lg transition-all"> | |
| Schedule a Demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-secondary relative z-10"> | |
| <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Features</a></li> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Templates</a></li> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Pricing</a></li> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Documentation</a></li> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Tutorials</a></li> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Blog</a></li> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">About</a></li> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Careers</a></li> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Press</a></li> | |
| <li><a href="#" class="text-accent hover:text-white transition-all">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-accent hover:text-white transition-all"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-accent hover:text-white transition-all"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-accent hover:text-white transition-all"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-accent hover:text-white transition-all"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/> | |
| </svg> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-sm text-accent">Subscribe to our newsletter</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="bg-dark border border-accent border-opacity-20 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-primary w-full"> | |
| <button class="bg-primary hover:bg-opacity-90 text-white px-4 py-2 rounded-r-lg"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-accent border-opacity-20 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> | |
| </svg> | |
| <span class="ml-2 text-lg font-bold">Stitch<span class="gradient-text">Design</span></span> | |
| </div> | |
| <p class="text-sm text-accent mt-4 md:mt-0">© 2023 StitchDesign. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Navigation --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-secondary border-t border-accent border-opacity-20 z-20 md:hidden"> | |
| <div class="flex justify-around py-3"> | |
| <a href="#" class="flex flex-col items-center text-white"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256"> | |
| <path d="M224,115.55V208a16,16,0,0,1-16,16H168a16,16,0,0,1-16-16V168a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v40a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V115.55a16,16,0,0,1,5.17-11.78l80-75.48.11-.11a16,16,0,0,1,21.53,0,1.14,1.14,0,0,0,.11.11l80,75.48A16,16,0,0,1,224,115.55Z"></path> | |
| </svg> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-accent"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256"> | |
| <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path> | |
| </svg> | |
| <span class="text-xs mt-1">Explore</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-accent"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256"> | |
| <path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path> | |
| </svg> | |
| <span class="text-xs mt-1">Create</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-accent"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256"> | |
| <path d="M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,16V161.57l-51.77-32.35a8,8,0,0,0-8.48,0L72,161.56V48ZM132.23,177.22a8,8,0,0,0-8.48,0L72,209.57V180.43l56-35,56,35v29.14Z"></path> | |
| </svg> | |
| <span class="text-xs mt-1">Saved</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-accent"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256"> | |
| <path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"></path> | |
| </svg> | |
| <span class="text-xs mt-1">Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple animation for buttons on hover | |
| document.querySelectorAll('button').forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| button.classList.add('transform', 'hover:scale-105'); | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.classList.remove('transform', 'hover:scale-105'); | |
| }); | |
| }); | |
| // Mobile menu toggle (placeholder functionality) | |
| document.querySelector('.md\\:hidden').addEventListener('click', () => { | |
| alert('Mobile menu would open here'); | |
| }); | |
| </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=taleslemonade/stitchdesign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |