code multi file với nextjs

README.md

@@ -1,10 +1,14 @@
 ---
-title: Nextjs Coding Wonderland
-emoji: 🌖
-colorFrom: indigo
-colorTo: blue
+title: NextJS Coding Wonderland 🚀
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).
+      

components/footer.js

@@ -0,0 +1,150 @@
+
+import Link from 'next/link'
+import { FaTwitter, FaGithub, FaDiscord } from 'react-icons/fa'
+
+export default function Footer() {
+  return (
+    <footer className="bg-gray-900 text-white py-16 px-4">
+      <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
+        <div>
+          <h3 className="text-xl font-semibold mb-4">Next.js</h3>
+          <p className="text-gray-400 mb-4">The React Framework for Production</p>
+          <div className="flex space-x-4">
+            <a href="https://twitter.com/vercel" target="_blank" className="text-gray-400 hover:text-white transition-colors">
+              <FaTwitter size={20} />
+            </a>
+            <a href="https://github.com/vercel/next.js" target="_blank" className="text-gray-400 hover:text-white transition-colors">
+              <FaGithub size={20} />
+            </a>
+            <a href="https://discord.com/invite/nextjs" target="_blank" className="text-gray-400 hover:text-white transition-colors">
+              <FaDiscord size={20} />
+            </a>
+          </div>
+        </div>
+
+        {/* Other footer sections */}
+      </div>
+      
+      <div className="max-w-6xl mx-auto pt-8 mt-8 border-t border-gray-800 text-center text-gray-400 text-sm">
+        &copy; {new Date().getFullYear()} Next.js Wonderland. All rights reserved.
+      </div>
+    </footer>
+  )
+}
+connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #1f2937;
+          color: white;
+          padding: 4rem 2rem;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+        }
+        .footer-section h3 {
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 1.5rem;
+          color: #e5e7eb;
+        }
+        .footer-section ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .footer-section li {
+          margin-bottom: 0.75rem;
+        }
+        .footer-section a {
+          color: #9ca3af;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-section a:hover {
+          color: white;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1.5rem;
+        }
+        .social-links a {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.1);
+          transition: all 0.2s;
+        }
+        .social-links a:hover {
+          background: rgba(255, 255, 255, 0.2);
+          transform: translateY(-2px);
+        }
+        .footer-bottom {
+          text-align: center;
+          padding-top: 2rem;
+          margin-top: 2rem;
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          color: #9ca3af;
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-section">
+            <h3>Next.js</h3>
+            <p>The React Framework for Production</p>
+            <div class="social-links">
+              <a href="https://twitter.com/vercel" target="_blank" aria-label="Twitter">
+                <i data-feather="twitter"></i>
+              </a>
+              <a href="https://github.com/vercel/next.js" target="_blank" aria-label="GitHub">
+                <i data-feather="github"></i>
+              </a>
+              <a href="https://discord.com/invite/nextjs" target="_blank" aria-label="Discord">
+                <i data-feather="message-circle"></i>
+              </a>
+            </div>
+          </div>
+          <div class="footer-section">
+            <h3>Resources</h3>
+            <ul>
+              <li><a href="https://nextjs.org/docs" target="_blank">Documentation</a></li>
+              <li><a href="https://nextjs.org/learn" target="_blank">Learn</a></li>
+              <li><a href="https://github.com/vercel/next.js" target="_blank">GitHub</a></li>
+              <li><a href="https://nextjs.org/showcase" target="_blank">Showcase</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Company</h3>
+            <ul>
+              <li><a href="https://vercel.com" target="_blank">Vercel</a></li>
+              <li><a href="https://vercel.com/blog" target="_blank">Blog</a></li>
+              <li><a href="https://nextjs.org/contact" target="_blank">Contact</a></li>
+              <li><a href="https://vercel.com/oss" target="_blank">Open Source</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Legal</h3>
+            <ul>
+              <li><a href="https://vercel.com/legal/privacy-policy" target="_blank">Privacy Policy</a></li>
+              <li><a href="https://vercel.com/legal/terms" target="_blank">Terms of Service</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <p>&copy; ${new Date().getFullYear()} Next.js Wonderland. All rights reserved.</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,111 @@
+
+import Link from 'next/link'
+
+export default function Navbar() {
+  return (
+    <nav className="bg-white bg-opacity-90 backdrop-filter backdrop-blur-md py-4 px-6 fixed w-full z-50 shadow-sm">
+      <div className="max-w-6xl mx-auto flex justify-between items-center">
+        <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent">
+          Next.js Wonderland
+        </Link>
+
+        <div className="hidden md:flex items-center space-x-6">
+          <Link href="#features" className="text-gray-600 hover:text-purple-600 transition-colors">
+            Features
+          </Link>
+          <Link href="#get-started" className="text-gray-600 hover:text-purple-600 transition-colors">
+            Get Started
+          </Link>
+          <Link href="https://nextjs.org/docs" target="_blank" className="text-gray-600 hover:text-purple-600 transition-colors">
+            Docs
+          </Link>
+          <Link 
+            href="https://nextjs.org/learn" 
+            target="_blank"
+            className="bg-gradient-to-r from-purple-600 to-pink-500 text-white px-4 py-2 rounded-full hover:shadow-lg transition-all"
+          >
+            Learn
+          </Link>
+        </div>
+      </div>
+    </nav>
+  )
+}
+connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(255, 255, 255, 0.9);
+          backdrop-filter: blur(10px);
+          padding: 1.5rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 50;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        .logo {
+          font-weight: 700;
+          font-size: 1.5rem;
+          background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          align-items: center;
+        }
+        a {
+          text-decoration: none;
+          color: #4b5563;
+          font-weight: 500;
+          transition: color 0.2s;
+        }
+        a:hover {
+          color: #7c3aed;
+        }
+        .cta-button {
+          background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
+          color: white;
+          padding: 0.5rem 1.25rem;
+          border-radius: 9999px;
+          transition: all 0.2s;
+        }
+        .cta-button:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.3);
+          color: white;
+        }
+        @media (max-width: 768px) {
+          ul {
+            display: none;
+          }
+          .mobile-menu-button {
+            display: block;
+          }
+        }
+      </style>
+      <nav>
+        <a href="/" class="logo">Next.js Wonderland</a>
+        <ul>
+          <li><a href="#features">Features</a></li>
+          <li><a href="#get-started">Get Started</a></li>
+          <li><a href="https://nextjs.org/docs" target="_blank">Docs</a></li>
+          <li><a href="https://github.com/vercel/next.js" target="_blank">GitHub</a></li>
+          <li><a href="https://nextjs.org/learn" target="_blank" class="cta-button">Learn</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,92 @@
-<!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>Next.js Wonderland</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+</head>
+<body>
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-12">
+        <div id="vanta-background" class="absolute top-0 left-0 w-full h-full z-0"></div>
+        <div class="relative z-10">
+            <section class="hero min-h-screen flex items-center justify-center">
+                <div class="text-center">
+                    <h1 class="text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
+                        Welcome to Next.js Wonderland
+                    </h1>
+                    <p class="text-xl mb-8 max-w-2xl mx-auto">
+                        A magical place where React meets server-side rendering and static site generation.
+                    </p>
+                    <div class="flex justify-center gap-4">
+                        <a href="#features" class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300">
+                            Explore Features
+                        </a>
+                        <a href="#get-started" class="px-6 py-3 border-2 border-purple-500 text-purple-500 rounded-full font-medium hover:bg-purple-50 transition-all duration-300">
+                            Get Started
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            <section id="features" class="py-20">
+                <h2 class="text-4xl font-bold text-center mb-16">Why Choose Next.js?</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <div class="feature-card p-8 rounded-xl bg-white bg-opacity-90 backdrop-blur-sm border border-gray-200 hover:border-purple-300 transition-all duration-300">
+                        <div class="w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full mb-6">
+                            <i data-feather="zap" class="text-purple-600"></i>
+                        </div>
+                        <h3 class="text-2xl font-semibold mb-3">Blazing Fast</h3>
+                        <p class="text-gray-600">Automatic static optimization and server-side rendering for lightning-fast performance.</p>
+                    </div>
+                    <div class="feature-card p-8 rounded-xl bg-white bg-opacity-90 backdrop-blur-sm border border-gray-200 hover:border-purple-300 transition-all duration-300">
+                        <div class="w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full mb-6">
+                            <i data-feather="code" class="text-purple-600"></i>
+                        </div>
+                        <h3 class="text-2xl font-semibold mb-3">Developer Experience</h3>
+                        <p class="text-gray-600">File-system routing, API routes, and built-in CSS/Sass support make development a breeze.</p>
+                    </div>
+                    <div class="feature-card p-8 rounded-xl bg-white bg-opacity-90 backdrop-blur-sm border border-gray-200 hover:border-purple-300 transition-all duration-300">
+                        <div class="w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full mb-6">
+                            <i data-feather="globe" class="text-purple-600"></i>
+                        </div>
+                        <h3 class="text-2xl font-semibold mb-3">Hybrid Rendering</h3>
+                        <p class="text-gray-600">Mix static generation, server-side rendering, and client-side rendering in a single app.</p>
+                    </div>
+                </div>
+            </section>
+
+            <section id="get-started" class="py-20">
+                <div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl p-10 text-white">
+                    <div class="max-w-4xl mx-auto">
+                        <h2 class="text-3xl font-bold mb-6">Ready to Build Something Amazing?</h2>
+                        <p class="text-xl mb-8">Get started with Next.js in seconds with our interactive tutorial.</p>
+                        <div class="bg-gray-900 rounded-xl p-6 mb-8 overflow-x-auto">
+                            <pre class="text-green-400"><code>npx create-next-app@latest</code></pre>
+                        </div>
+                        <a href="https://nextjs.org/docs" target="_blank" class="inline-block px-8 py-3 bg-white text-purple-600 rounded-full font-bold hover:bg-gray-100 transition-all duration-300">
+                            Explore Documentation
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

next.config.js

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+  images: {
+    domains: ['static.photos'],
+  },
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,25 @@
+```json
+{
+  "name": "nextjs-wonderland",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^13.4.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
+    "vanta": "^0.5.24"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.3.2"
+  }
+}
+```

pages/_app.js

@@ -0,0 +1,11 @@
+import '../style.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <custom-navbar></custom-navbar>
+      <Component {...pageProps} />
+      <custom-footer></custom-footer>
+    </>
+  )
+}

pages/index.js

@@ -0,0 +1,43 @@
+import Head from 'next/head'
+import { useEffect } from 'react'
+
+export default function Home() {
+  useEffect(() => {
+    // Initialize Vanta.js after component mounts
+    if (typeof window !== 'undefined') {
+      const VANTA = require('vanta/dist/vanta.net.min')
+      VANTA.NET({
+        el: "#vanta-background",
+        mouseControls: true,
+        touchControls: true,
+        gyroControls: false,
+        minHeight: 200.00,
+        minWidth: 200.00,
+        scale: 1.00,
+        scaleMobile: 1.00,
+        color: 0x7c3aed,
+        backgroundColor: 0xf9fafb,
+        points: 12.00,
+        maxDistance: 22.00,
+        spacing: 18.00
+      })
+    }
+  }, [])
+
+  return (
+    <>
+      <Head>
+        <title>Next.js Wonderland</title>
+        <meta name="description" content="A magical place where React meets server-side rendering" />
+      </Head>
+      
+      <div id="vanta-background" className="fixed top-0 left-0 w-full h-full z-0"></div>
+      
+      <main className="container mx-auto px-4 py-12 relative z-10">
+        <section className="hero min-h-screen flex items-center justify-center">
+          {/* Rest of your home page content */}
+        </section>
+      </main>
+    </>
+  )
+}

script.js

@@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Vanta.js background
+    VANTA.NET({
+        el: "#vanta-background",
+        mouseControls: true,
+        touchControls: true,
+        gyroControls: false,
+        minHeight: 200.00,
+        minWidth: 200.00,
+        scale: 1.00,
+        scaleMobile: 1.00,
+        color: 0x7c3aed,
+        backgroundColor: 0xf9fafb,
+        points: 12.00,
+        maxDistance: 22.00,
+        spacing: 18.00
+    });
+
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+});

style.css

@@ -1,28 +1,37 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply font-inter bg-gray-50 text-gray-900 overflow-x-hidden;
+  }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.feature-card {
+  @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
+}
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.1);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+#vanta-background {
+    position: fixed;
+    z-index: 0;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.hero {
+    min-height: calc(100vh - 80px);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+code {
+    font-family: 'Fira Code', monospace;
 }
+
+@media (max-width: 768px) {
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+}