|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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>© 2023 TAONGA - Nga Taonga Tuku Iho. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.querySelector('.mobile-menu-button'); |
|
|
const mobileMenu = document.querySelector('.mobile-menu'); |
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
|
|
|
alert('Mobile menu would open here in a complete implementation'); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
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> |
