Spaces:

taleslemonade
/

stitchdesign

Running

App Files Files Community

taleslemonade commited on Aug 6, 2025

Commit

d11ba14

verified ·

1 Parent(s): fbf2c50

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +410 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Stitchdesign
-emoji: 🌍
 colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: stitchdesign
+emoji: 🐳
 colorFrom: yellow
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,410 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>