Spaces:

XXXMARK
/

taon

Running

App Files Files Community

XXXMARK commited on May 15

Commit

a4de70b

verified ·

1 Parent(s): 69f4fd1

Add 3 files

Browse files

Files changed (3) hide show

README.md +5 -3
index.html +525 -19
prompts.txt +0 -0

README.md CHANGED Viewed

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

 ---
+title: taon
+emoji: 🐳
 colorFrom: red
 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,525 @@
-<!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>TAONGA - Nga Taonga Tuku Iho</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>
+      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+      :root {
+        --primary: #2c3e50;
+        --secondary: #e74c3c;
+        --accent: #f39c12;
+        --light: #ecf0f1;
+        --dark: #2c3e50;
+      }
+      body {
+        font-family: 'Poppins', sans-serif;
+        background-color: #f8f9fa;
+        color: var(--dark);
+      }
+      .maori-pattern {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjxyZWN0IHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0iI2Y4ZjlmYSIvPjxwYXRoIGQ9Ik0wIDIwQzAgOC45NSA4Ljk1IDAgMjAgMGMxMS4wNSAwIDIwIDguOTUgMjAgMjAgMCAxMS4wNS04Ljk1IDIwLTIwIDIwQzguOTUgNDAgMCAzMS4wNSAwIDIwWiIgZmlsbD0iI2UzZTZlYSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
+      }
+      .project-card {
+        transition: all 0.3s ease;
+        transform-style: preserve-3d;
+        perspective: 1000px;
+      }
+      .project-card:hover {
+        transform: translateY(-5px) scale(1.02);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+      }
+      .koru {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNTAgMEMyMi40IDAgMCAyMi40IDAgNTBjMCAyNy42IDIyLjQgNTAgNTAgNTAgMjcuNiAwIDUwLTIyLjQgNTAtNTBDMTAwIDIyLjQgNzcuNiAwIDUwIDB6TTUwIDkwQzI4LjUgOTAgMTAgNzEuNSAxMCA1MGMwLTIxLjUgMTguNS0zOSA0MC0zOSAyMS41IDAgMzkgMTcuNSAzOSAzOSAwIDIxLjUtMTcuNSAzOS0zOSAzOXoiIGZpbGw9IiNmMzkxMjEiLz48L3N2Zz4=');
+        background-size: contain;
+        background-repeat: no-repeat;
+        opacity: 0.1;
+        z-index: -1;
+      }
+      .wave-divider {
+        height: 150px;
+        overflow: hidden;
+      }
+      .wave-divider svg {
+        height: 100%;
+        width: 100%;
+      }
+      .flip-card {
+        perspective: 1000px;
+      }
+      .flip-card-inner {
+        transition: transform 0.6s;
+        transform-style: preserve-3d;
+      }
+      .flip-card:hover .flip-card-inner {
+        transform: rotateY(180deg);
+      }
+      .flip-card-front,
+      .flip-card-back {
+        backface-visibility: hidden;
+      }
+      .flip-card-back {
+        transform: rotateY(180deg);
+      }
+      @keyframes float {
+        0% {
+          transform: translateY(0px);
+        }
+        50% {
+          transform: translateY(-10px);
+        }
+        100% {
+          transform: translateY(0px);
+        }
+      }
+      .floating {
+        animation: float 3s ease-in-out infinite;
+      }
+    </style>
+  </head>
+  <body class="relative">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-lg sticky top-0 z-50">
+      <div class="max-w-6xl mx-auto px-4">
+        <div class="flex justify-between">
+          <div class="flex space-x-7">
+            <div>
+              <a href="#" class="flex items-center py-4 px-2">
+                <span class="font-bold text-2xl text-indigo-600">TAONGA</span>
+                <span class="ml-2 text-sm text-gray-500">Nga Taonga Tuku Iho</span>
+              </a>
+            </div>
+          </div>
+          <div class="hidden md:flex items-center space-x-1">
+            <a href="#home" class="py-4 px-2 text-gray-500 font-semibold hover:text-indigo-600 transition duration-300">Home</a>
+            <a href="#projects" class="py-4 px-2 text-gray-500 font-semibold hover:text-indigo-600 transition duration-300">Projects</a>
+            <a href="#about" class="py-4 px-2 text-gray-500 font-semibold hover:text-indigo-600 transition duration-300">About</a>
+            <a href="#contact" class="py-4 px-2 text-gray-500 font-semibold hover:text-indigo-600 transition duration-300">Contact</a>
+          </div>
+          <div class="md:hidden flex items-center">
+            <button class="outline-none mobile-menu-button">
+              <svg class="w-6 h-6 text-gray-500 hover:text-indigo-600" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
+                <path d="M4 6h16M4 12h16M4 18h16"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <!-- Hero Section -->
+    <section id="home" class="relative overflow-hidden maori-pattern py-20">
+      <div class="koru top-10 left-10"></div>
+      <div class="koru bottom-10 right-10"></div>
+      <div class="koru top-1/2 left-1/4"></div>
+      <div class="koru top-1/3 right-1/4"></div>
+      <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div class="flex flex-col md:flex-row items-center">
+          <div class="md:w-1/2 mb-10 md:mb-0">
+            <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-4">Kia ora! Welcome to <span class="text-indigo-600">TAONGA</span></h1>
+            <p class="text-xl text-gray-600 mb-8">A collection of digital taonga for our whānau to explore and learn Nga Taonga Tuku Iho - our treasured cultural heritage.</p>
+            <div class="flex space-x-4">
+              <a href="#projects" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Explore Projects</a>
+              <a href="#about" class="bg-white hover:bg-gray-100 text-indigo-600 font-bold py-3 px-6 rounded-lg border border-indigo-600 transition duration-300">Learn More</a>
+            </div>
+          </div>
+          <div class="md:w-1/2 flex justify-center">
+            <div class="relative w-64 h-64 md:w-80 md:h-80">
+              <div class="absolute inset-0 bg-indigo-100 rounded-full opacity-50"></div>
+              <div class="absolute inset-4 bg-indigo-200 rounded-full opacity-50"></div>
+              <div class="absolute inset-8 bg-indigo-300 rounded-full opacity-50"></div>
+              <div class="absolute inset-12 bg-indigo-400 rounded-full opacity-50"></div>
+              <div class="absolute inset-16 bg-indigo-500 rounded-full opacity-50"></div>
+              <div class="absolute inset-20 bg-indigo-600 rounded-full flex items-center justify-center">
+                <i class="fas fa-treasure-chest text-white text-5xl floating"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Wave Divider -->
+    <div class="wave-divider bg-white">
+      <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
+        <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="#4f46e5"></path>
+        <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="#4f46e5"></path>
+        <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="#4f46e5"></path>
+      </svg>
+    </div>
+    <!-- Projects Section -->
+    <section id="projects" class="py-20 bg-gray-50">
+      <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl font-bold text-gray-800 mb-4">My Digital Taonga</h2>
+          <p class="text-xl text-gray-600 max-w-2xl mx-auto">Explore these interactive projects designed for our whānau to connect with our culture and heritage.</p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <!-- Project 1 -->
+          <div class="flip-card h-96">
+            <div class="flip-card-inner h-full">
+              <div class="flip-card-front project-card bg-white rounded-xl shadow-md overflow-hidden h-full">
+                <div class="h-48 bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center">
+                  <i class="fas fa-sitemap text-white text-6xl"></i>
+                </div>
+                <div class="p-6">
+                  <h3 class="text-xl font-bold text-gray-800 mb-2">Interactive Whakapapa</h3>
+                  <p class="text-gray-600">Explore our family genealogy in an interactive digital format.</p>
+                </div>
+              </div>
+              <div class="flip-card-back project-card bg-indigo-600 rounded-xl shadow-md overflow-hidden h-full flex flex-col justify-center p-6">
+                <h3 class="text-xl font-bold text-white mb-4">Interactive Whakapapa</h3>
+                <p class="text-white mb-4">A digital platform to visualize and navigate our family tree, connecting generations through stories and photos.</p>
+                <a href="#" class="mt-4 inline-block bg-white text-indigo-600 font-bold py-2 px-4 rounded-lg transition duration-300">Explore Now</a>
+              </div>
+            </div>
+          </div>
+          <!-- Project 2 -->
+          <div class="flip-card h-96">
+            <div class="flip-card-inner h-full">
+              <div class="flip-card-front project-card bg-white rounded-xl shadow-md overflow-hidden h-full">
+                <div class="h-48 bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center">
+                  <i class="fas fa-language text-white text-6xl"></i>
+                </div>
+                <div class="p-6">
+                  <h3 class="text-xl font-bold text-gray-800 mb-2">Te Reo Māori Learning Games</h3>
+                  <p class="text-gray-600">Fun and interactive games to learn Te Reo Māori.</p>
+                </div>
+              </div>
+              <div class="flip-card-back project-card bg-teal-600 rounded-xl shadow-md overflow-hidden h-full flex flex-col justify-center p-6">
+                <h3 class="text-xl font-bold text-white mb-4">Te Reo Māori Learning Games</h3>
+                <p class="text-white mb-4">Interactive games designed to make learning Te Reo Māori engaging for all ages, with vocabulary, pronunciation, and cultural context.</p>
+                <a href="#" class="mt-4 inline-block bg-white text-teal-600 font-bold py-2 px-4 rounded-lg transition duration-300">Play Now</a>
+              </div>
+            </div>
+          </div>
+          <!-- Project 3 -->
+          <div class="flip-card h-96">
+            <div class="flip-card-inner h-full">
+              <div class="flip-card-front project-card bg-white rounded-xl shadow-md overflow-hidden h-full">
+                <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center">
+                  <i class="fas fa-music text-white text-6xl"></i>
+                </div>
+                <div class="p-6">
+                  <h3 class="text-xl font-bold text-gray-800 mb-2">Waiata Collections</h3>
+                  <p class="text-gray-600">Listen to and learn traditional and contemporary Māori songs.</p>
+                </div>
+              </div>
+              <div class="flip-card-back project-card bg-pink-600 rounded-xl shadow-md overflow-hidden h-full flex flex-col justify-center p-6">
+                <h3 class="text-xl font-bold text-white mb-4">Waiata Collections</h3>
+                <p class="text-white mb-4">A curated collection of waiata with lyrics, translations, and cultural significance to help our whānau connect through music.</p>
+                <a href="#" class="mt-4 inline-block bg-white text-pink-600 font-bold py-2 px-4 rounded-lg transition duration-300">Listen Now</a>
+              </div>
+            </div>
+          </div>
+          <!-- Project 4 -->
+          <div class="flip-card h-96">
+            <div class="flip-card-inner h-full">
+              <div class="flip-card-front project-card bg-white rounded-xl shadow-md overflow-hidden h-full">
+                <div class="h-48 bg-gradient-to-r from-yellow-500 to-orange-600 flex items-center justify-center">
+                  <i class="fas fa-book text-white text-6xl"></i>
+                </div>
+                <div class="p-6">
+                  <h3 class="text-xl font-bold text-gray-800 mb-2">Pūrākau Digital Library</h3>
+                  <p class="text-gray-600">Traditional Māori stories in an interactive digital format.</p>
+                </div>
+              </div>
+              <div class="flip-card-back project-card bg-orange-600 rounded-xl shadow-md overflow-hidden h-full flex flex-col justify-center p-6">
+                <h3 class="text-xl font-bold text-white mb-4">Pūrākau Digital Library</h3>
+                <p class="text-white mb-4">An interactive collection of traditional Māori stories with animations, audio narrations, and cultural explanations.</p>
+                <a href="#" class="mt-4 inline-block bg-white text-orange-600 font-bold py-2 px-4 rounded-lg transition duration-300">Read Now</a>
+              </div>
+            </div>
+          </div>
+          <!-- Project 5 -->
+          <div class="flip-card h-96">
+            <div class="flip-card-inner h-full">
+              <div class="flip-card-front project-card bg-white rounded-xl shadow-md overflow-hidden h-full">
+                <div class="h-48 bg-gradient-to-r from-red-500 to-pink-600 flex items-center justify-center">
+                  <i class="fas fa-utensils text-white text-6xl"></i>
+                </div>
+                <div class="p-6">
+                  <h3 class="text-xl font-bold text-gray-800 mb-2">Kai Māori Recipes</h3>
+                  <p class="text-gray-600">Traditional Māori recipes with modern twists.</p>
+                </div>
+              </div>
+              <div class="flip-card-back project-card bg-red-600 rounded-xl shadow-md overflow-hidden h-full flex flex-col justify-center p-6">
+                <h3 class="text-xl font-bold text-white mb-4">Kai Māori Recipes</h3>
+                <p class="text-white mb-4">A collection of traditional Māori recipes with video tutorials, ingredient substitutions, and cultural context about food in Māori society.</p>
+                <a href="#" class="mt-4 inline-block bg-white text-red-600 font-bold py-2 px-4 rounded-lg transition duration-300">Cook Now</a>
+              </div>
+            </div>
+          </div>
+          <!-- Project 6 -->
+          <div class="flip-card h-96">
+            <div class="flip-card-inner h-full">
+              <div class="flip-card-front project-card bg-white rounded-xl shadow-md overflow-hidden h-full">
+                <div class="h-48 bg-gradient-to-r from-indigo-500 to-blue-600 flex items-center justify-center">
+                  <i class="fas fa-plus text-white text-6xl"></i>
+                </div>
+                <div class="p-6">
+                  <h3 class="text-xl font-bold text-gray-800 mb-2">More Coming Soon</h3>
+                  <p class="text-gray-600">Stay tuned for more interactive cultural projects.</p>
+                </div>
+              </div>
+              <div class="flip-card-back project-card bg-blue-600 rounded-xl shadow-md overflow-hidden h-full flex flex-col justify-center p-6">
+                <h3 class="text-xl font-bold text-white mb-4">More Taonga Coming</h3>
+                <p class="text-white mb-4">I'm constantly creating new digital taonga for our whānau. Check back soon for more interactive cultural experiences!</p>
+                <a href="#contact" class="mt-4 inline-block bg-white text-blue-600 font-bold py-2 px-4 rounded-lg transition duration-300">Suggest Ideas</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-white">
+      <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex flex-col md:flex-row items-center">
+          <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
+            <h2 class="text-3xl font-bold text-gray-800 mb-6">About TAONGA</h2>
+            <p class="text-lg text-gray-600 mb-6">
+              TAONGA is a collection of digital projects created to preserve and share Nga Taonga Tuku Iho (our treasured cultural heritage) with our whānau.
+              Each project is designed to be interactive, engaging, and educational, helping to connect our family with our Māori culture in the digital age.
+            </p>
+            <p class="text-lg text-gray-600 mb-6">
+              The name "TAONGA" reflects the precious nature of these digital treasures. Just as our ancestors valued and protected physical taonga,
+              these digital creations are modern taonga for future generations.
+            </p>
+            <div class="bg-indigo-50 p-6 rounded-lg">
+              <h3 class="text-xl font-bold text-indigo-800 mb-3">Whakataukī (Proverb)</h3>
+              <p class="text-indigo-700 italic">"Ehara taku toa i te toa takitahi, engari he toa takitini"</p>
+              <p class="text-indigo-600 mt-2">"My strength is not as an individual, but as a collective"</p>
+            </div>
+          </div>
+          <div class="md:w-1/2">
+            <div class="bg-gray-100 p-8 rounded-xl relative">
+              <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-200 rounded-full opacity-50"></div>
+              <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-300 rounded-full opacity-50"></div>
+              <div class="relative z-10">
+                <h3 class="text-2xl font-bold text-gray-800 mb-4">Project Features</h3>
+                <ul class="space-y-4">
+                  <li class="flex items-start">
+                    <div class="flex-shrink-0 mt-1">
+                      <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-100 text-indigo-600">
+                        <i class="fas fa-check text-xs"></i>
+                      </div>
+                    </div>
+                    <p class="ml-3 text-gray-600">Interactive experiences for all ages</p>
+                  </li>
+                  <li class="flex items-start">
+                    <div class="flex-shrink-0 mt-1">
+                      <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-100 text-indigo-600">
+                        <i class="fas fa-check text-xs"></i>
+                      </div>
+                    </div>
+                    <p class="ml-3 text-gray-600">Cultural learning through play</p>
+                  </li>
+                  <li class="flex items-start">
+                    <div class="flex-shrink-0 mt-1">
+                      <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-100 text-indigo-600">
+                        <i class="fas fa-check text-xs"></i>
+                      </div>
+                    </div>
+                    <p class="ml-3 text-gray-600">Preservation of family history</p>
+                  </li>
+                  <li class="flex items-start">
+                    <div class="flex-shrink-0 mt-1">
+                      <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-100 text-indigo-600">
+                        <i class="fas fa-check text-xs"></i>
+                      </div>
+                    </div>
+                    <p class="ml-3 text-gray-600">Te Reo Māori language learning</p>
+                  </li>
+                  <li class="flex items-start">
+                    <div class="flex-shrink-0 mt-1">
+                      <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-100 text-indigo-600">
+                        <i class="fas fa-check text-xs"></i>
+                      </div>
+                    </div>
+                    <p class="ml-3 text-gray-600">Accessible from anywhere in the world</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-gray-50">
+      <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl font-bold text-gray-800 mb-4">Contact Me</h2>
+          <p class="text-xl text-gray-600 max-w-2xl mx-auto">Have questions or suggestions for new taonga? Get in touch!</p>
+        </div>
+        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
+          <div class="md:flex">
+            <div class="md:w-1/2 bg-indigo-600 p-10 text-white">
+              <h3 class="text-2xl font-bold mb-6">Let's Connect</h3>
+              <div class="mb-6">
+                <h4 class="font-bold mb-2"><i class="fas fa-envelope mr-2"></i> Email</h4>
+                <p>taonga@example.com</p>
+              </div>
+              <div class="mb-6">
+                <h4 class="font-bold mb-2"><i class="fas fa-phone mr-2"></i> Phone</h4>
+                <p>+64 123 456 789</p>
+              </div>
+              <div class="mb-6">
+                <h4 class="font-bold mb-2"><i class="fas fa-map-marker-alt mr-2"></i> Location</h4>
+                <p>Aotearoa (New Zealand)</p>
+              </div>
+              <div class="flex space-x-4 mt-8">
+                <a href="#" class="bg-white text-indigo-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-100 transition duration-300">
+                  <i class="fab fa-facebook-f"></i>
+                </a>
+                <a href="#" class="bg-white text-indigo-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-100 transition duration-300">
+                  <i class="fab fa-twitter"></i>
+                </a>
+                <a href="#" class="bg-white text-indigo-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-100 transition duration-300">
+                  <i class="fab fa-instagram"></i>
+                </a>
+                <a href="#" class="bg-white text-indigo-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-100 transition duration-300">
+                  <i class="fab fa-linkedin-in"></i>
+                </a>
+              </div>
+            </div>
+            <div class="md:w-1/2 p-10">
+              <form>
+                <div class="mb-6">
+                  <label for="name" class="block text-gray-700 font-bold mb-2">Your Name</label>
+                  <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                </div>
+                <div class="mb-6">
+                  <label for="email" class="block text-gray-700 font-bold mb-2">Email Address</label>
+                  <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                </div>
+                <div class="mb-6">
+                  <label for="message" class="block text-gray-700 font-bold mb-2">Message</label>
+                  <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
+                </div>
+                <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
+                  Send Message
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-12">
+      <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div>
+            <h3 class="text-xl font-bold mb-4">TAONGA</h3>
+            <p class="text-gray-400">Nga Taonga Tuku Iho - Digital treasures for our whānau.</p>
+          </div>
+          <div>
+            <h4 class="font-bold mb-4">Projects</h4>
+            <ul class="space-y-2">
+              <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Whakapapa</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Te Reo Games</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Waiata</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pūrākau</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 class="font-bold mb-4">Resources</h4>
+            <ul class="space-y-2">
+              <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Te Reo Basics</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Whakapapa Guide</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Cultural Protocols</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Learning Materials</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 class="font-bold mb-4">Subscribe</h4>
+            <p class="text-gray-400 mb-4">Stay updated with new taonga releases.</p>
+            <div class="flex">
+              <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
+              <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg transition duration-300">
+                <i class="fas fa-paper-plane"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
+          <p>&copy; 2023 TAONGA - Nga Taonga Tuku Iho. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+    <script>
+      // Mobile menu toggle
+      const mobileMenuButton = document.querySelector('.mobile-menu-button');
+      const mobileMenu = document.querySelector('.mobile-menu');
+      mobileMenuButton.addEventListener('click', () => {
+        // You would typically toggle a mobile menu here
+        alert('Mobile menu would open here in a complete implementation');
+      });
+      // 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'
+          });
+        });
+      });
+      // Animation on scroll
+      const observerOptions = {
+        threshold: 0.1
+      };
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('animate-fadeIn');
+            observer.unobserve(entry.target);
+          }
+        });
+      }, observerOptions);
+      document.querySelectorAll('.project-card, .flip-card').forEach(card => {
+        observer.observe(card);
+      });
+    </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=XXXMARK/taon" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+  </html>

prompts.txt ADDED Viewed

File without changes