Spaces:

GooGooPanda
/

nexus-heritage

Running

App Files Files Community

GooGooPanda commited on Jun 19

Commit

6fd56ab

verified ·

1 Parent(s): 2f110db

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +747 -19

README.md CHANGED Viewed

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

 ---
+title: nexus-heritage
+emoji: 🐳
+colorFrom: blue
+colorTo: gray
 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,747 @@
-<!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>Nexus Heritage | Preserving Family & Cultural Stories</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>
+        .gradient-bg {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        }
+        .heritage-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .heritage-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+        }
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -20px;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background-color: #4f46e5;
+        }
+        .timeline-dot {
+            position: absolute;
+            left: -26px;
+            top: 0;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: #4f46e5;
+        }
+        .story-textarea {
+            min-height: 200px;
+        }
+        .family-tree-node {
+            transition: all 0.3s ease;
+        }
+        .family-tree-node:hover {
+            transform: scale(1.05);
+            z-index: 10;
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen font-sans">
+    <!-- Header/Navigation -->
+    <header class="bg-indigo-900 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-2">
+                    <i class="fas fa-book-open text-2xl"></i>
+                    <h1 class="text-2xl font-bold">Nexus Heritage</h1>
+                </div>
+                <nav class="hidden md:flex space-x-6">
+                    <a href="#" class="hover:text-indigo-200 font-medium">Home</a>
+                    <a href="#" class="hover:text-indigo-200 font-medium">My Heritage</a>
+                    <a href="#" class="hover:text-indigo-200 font-medium">Community</a>
+                    <a href="#" class="hover:text-indigo-200 font-medium">Resources</a>
+                    <a href="#" class="hover:text-indigo-200 font-medium">About</a>
+                </nav>
+                <div class="flex items-center space-x-4">
+                    <button class="bg-indigo-700 hover:bg-indigo-600 px-4 py-2 rounded-lg font-medium">Sign In</button>
+                    <button class="bg-white text-indigo-900 hover:bg-indigo-100 px-4 py-2 rounded-lg font-medium">Sign Up</button>
+                </div>
+                <button class="md:hidden text-2xl">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="py-16 px-4">
+        <div class="container mx-auto 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-5xl font-bold text-gray-800 mb-6">Preserve Your Family's Legacy for Generations</h1>
+                <p class="text-xl text-gray-600 mb-8">Nexus Heritage is a collaborative platform where families and communities can document, share, and celebrate their unique histories and cultural traditions.</p>
+                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium text-lg">Start Your Family Archive</button>
+                    <button class="border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium text-lg">Explore Community Stories</button>
+                </div>
+            </div>
+            <div class="md:w-1/2">
+                <img src="https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Family sharing stories" class="rounded-xl shadow-2xl">
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-16 px-4 bg-white">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">How Nexus Heritage Helps Preserve Your Story</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="heritage-card bg-white p-8 rounded-xl border border-gray-100">
+                    <div class="text-indigo-600 mb-4">
+                        <i class="fas fa-users text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">Family Collaboration</h3>
+                    <p class="text-gray-600">Invite family members to contribute stories, photos, and memories to build a comprehensive family archive together.</p>
+                </div>
+                <div class="heritage-card bg-white p-8 rounded-xl border border-gray-100">
+                    <div class="text-indigo-600 mb-4">
+                        <i class="fas fa-globe-americas text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">Cultural Preservation</h3>
+                    <p class="text-gray-600">Document traditions, recipes, language, and customs to keep your cultural heritage alive for future generations.</p>
+                </div>
+                <div class="heritage-card bg-white p-8 rounded-xl border border-gray-100">
+                    <div class="text-indigo-600 mb-4">
+                        <i class="fas fa-share-alt text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">Community Sharing</h3>
+                    <p class="text-gray-600">Connect with others who share your heritage or are interested in learning about different cultural backgrounds.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Community Stories Section -->
+    <section class="py-16 px-4 bg-gray-50">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Featured Community Stories</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Story Card 1 -->
+                <div class="heritage-card bg-white rounded-xl overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Family reunion" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <div class="flex items-center mb-3">
+                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                                <i class="fas fa-user text-indigo-600"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium">Maria Gonzalez</h4>
+                                <p class="text-sm text-gray-500">Mexican-American Heritage</p>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Our Day of the Dead Traditions</h3>
+                        <p class="text-gray-600 mb-4">How my family has preserved and adapted our Día de los Muertos celebrations across three generations in the United States...</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <span class="text-sm bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Traditions</span>
+                                <span class="text-sm bg-amber-100 text-amber-800 px-2 py-1 rounded">Holidays</span>
+                            </div>
+                            <button class="text-indigo-600 hover:text-indigo-800">
+                                <i class="fas fa-book-open"></i> Read
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Story Card 2 -->
+                <div class="heritage-card bg-white rounded-xl overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Old family photo" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <div class="flex items-center mb-3">
+                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                                <i class="fas fa-user text-indigo-600"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium">James Wilson</h4>
+                                <p class="text-sm text-gray-500">African-American Heritage</p>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Tracing Our Roots: From Slavery to Today</h3>
+                        <p class="text-gray-600 mb-4">The journey of uncovering my family's history through oral traditions, DNA testing, and historical records...</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <span class="text-sm bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Genealogy</span>
+                                <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">History</span>
+                            </div>
+                            <button class="text-indigo-600 hover:text-indigo-800">
+                                <i class="fas fa-book-open"></i> Read
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Story Card 3 -->
+                <div class="heritage-card bg-white rounded-xl overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cultural festival" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <div class="flex items-center mb-3">
+                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                                <i class="fas fa-user text-indigo-600"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium">Linh Nguyen</h4>
+                                <p class="text-sm text-gray-500">Vietnamese Heritage</p>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Preserving Language Through Food</h3>
+                        <p class="text-gray-600 mb-4">How cooking traditional Vietnamese dishes with my grandmother became our way of maintaining language and cultural connections...</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <span class="text-sm bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Food</span>
+                                <span class="text-sm bg-purple-100 text-purple-800 px-2 py-1 rounded">Language</span>
+                            </div>
+                            <button class="text-indigo-600 hover:text-indigo-800">
+                                <i class="fas fa-book-open"></i> Read
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-10">
+                <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium">Browse All Community Stories</button>
+            </div>
+        </div>
+    </section>
+    <!-- Family Timeline Demo -->
+    <section class="py-16 px-4 bg-white">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Create Your Family Timeline</h2>
+            <div class="max-w-4xl mx-auto relative">
+                <!-- Timeline -->
+                <div class="space-y-8 pl-8">
+                    <!-- Timeline Item 1 -->
+                    <div class="relative timeline-item">
+                        <div class="timeline-dot"></div>
+                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                            <div class="flex items-center mb-3">
+                                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
+                                    <i class="fas fa-baby text-indigo-600 text-xl"></i>
+                                </div>
+                                <div>
+                                    <h3 class="font-bold text-lg">Birth of Grandfather</h3>
+                                    <p class="text-gray-500">1925 - Naples, Italy</p>
+                                </div>
+                            </div>
+                            <p class="text-gray-700">Giovanni Rossi was born in a small village outside Naples. He would later immigrate to America in 1948 after serving in World War II.</p>
+                            <div class="mt-4 flex space-x-3">
+                                <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Old photo" class="w-20 h-20 object-cover rounded">
+                                <img src="https://images.unsplash.com/photo-1518455022959-b88e1699f5b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Immigration document" class="w-20 h-20 object-cover rounded">
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Timeline Item 2 -->
+                    <div class="relative timeline-item">
+                        <div class="timeline-dot"></div>
+                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                            <div class="flex items-center mb-3">
+                                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
+                                    <i class="fas fa-ring text-indigo-600 text-xl"></i>
+                                </div>
+                                <div>
+                                    <h3 class="font-bold text-lg">Marriage</h3>
+                                    <p class="text-gray-500">1952 - New York, USA</p>
+                                </div>
+                            </div>
+                            <p class="text-gray-700">Giovanni married Maria Bianchi, another Italian immigrant, at St. Anthony's Church in Brooklyn. They maintained many Italian wedding traditions including the tarantella dance.</p>
+                            <div class="mt-4">
+                                <audio controls class="w-full">
+                                    <source src="#" type="audio/mpeg">
+                                    Your browser does not support the audio element.
+                                </audio>
+                                <p class="text-sm text-gray-500 mt-1">Audio recording of Aunt Rosa describing the wedding</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Timeline Item 3 -->
+                    <div class="relative timeline-item">
+                        <div class="timeline-dot"></div>
+                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                            <div class="flex items-center mb-3">
+                                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
+                                    <i class="fas fa-utensils text-indigo-600 text-xl"></i>
+                                </div>
+                                <div>
+                                    <h3 class="font-bold text-lg">Family Recipe Book</h3>
+                                    <p class="text-gray-500">1978 - Compiled by Nonna Maria</p>
+                                </div>
+                            </div>
+                            <p class="text-gray-700">Maria compiled all the family recipes into a handwritten book to preserve their culinary heritage. This included secret recipes passed down for generations in her hometown of Sicily.</p>
+                            <div class="mt-4">
+                                <div class="flex items-center text-indigo-600">
+                                    <i class="fas fa-file-pdf mr-2"></i>
+                                    <span>Rossi_Family_Recipes.pdf</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="text-center mt-10">
+                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium">Start Your Family Timeline</button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Cultural Heritage Features -->
+    <section class="py-16 px-4 bg-indigo-50">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Preserve Your Cultural Heritage</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4 text-gray-800">Document Traditions & Customs</h3>
+                    <p class="text-gray-600 mb-6">Create detailed records of your cultural practices, from holiday celebrations to daily rituals, ensuring they're preserved accurately for future generations.</p>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
+                            <span class="text-gray-700">Record step-by-step instructions for traditional ceremonies</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
+                            <span class="text-gray-700">Upload photos and videos of cultural events</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
+                            <span class="text-gray-700">Note regional variations in traditions</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
+                            <span class="text-gray-700">Explain the meaning and history behind customs</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-white p-6 rounded-xl shadow-md border border-gray-200">
+                    <div class="flex mb-4 border-b pb-3">
+                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                            <i class="fas fa-user text-indigo-600"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-medium">Documenting Our Lunar New Year</h4>
+                            <p class="text-sm text-gray-500">Chinese-Vietnamese Tradition</p>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <h5 class="font-bold mb-2">Preparations (Days Before)</h5>
+                        <ul class="list-disc pl-5 text-gray-700 space-y-1">
+                            <li>Thorough house cleaning to sweep away bad luck</li>
+                            <li>Decorating with red lanterns and couplets</li>
+                            <li>Preparing traditional foods like bánh chưng (sticky rice cake)</li>
+                        </ul>
+                    </div>
+                    <div class="mb-4">
+                        <h5 class="font-bold mb-2">New Year's Eve</h5>
+                        <ul class="list-disc pl-5 text-gray-700 space-y-1">
+                            <li>Family reunion dinner with 8-10 dishes (must include fish)</li>
+                            <li>Giving red envelopes (lì xì) to children and unmarried adults</li>
+                            <li>Staying up late to welcome the new year</li>
+                        </ul>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <div class="flex space-x-2">
+                            <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">Holiday</span>
+                            <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Family</span>
+                        </div>
+                        <button class="text-indigo-600 hover:text-indigo-800 text-sm">
+                            <i class="fas fa-plus mr-1"></i> Add to My Traditions
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Interactive Family Tree -->
+    <section class="py-16 px-4 bg-white">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Visualize Your Family Connections</h2>
+            <div class="bg-gray-50 p-8 rounded-xl border border-gray-200">
+                <div class="flex justify-center mb-8">
+                    <div class="family-tree-node bg-indigo-100 border-2 border-indigo-300 rounded-full w-16 h-16 flex items-center justify-center mx-4 relative">
+                        <i class="fas fa-user text-indigo-600 text-2xl"></i>
+                        <div class="absolute -bottom-6 text-sm font-medium text-center w-full">Giovanni<br>1925-2001</div>
+                    </div>
+                </div>
+                <div class="flex justify-center mb-8">
+                    <div class="family-tree-node bg-indigo-100 border-2 border-indigo-300 rounded-full w-16 h-16 flex items-center justify-center mx-4 relative">
+                        <i class="fas fa-user text-indigo-600 text-2xl"></i>
+                        <div class="absolute -bottom-6 text-sm font-medium text-center w-full">Maria<br>1928-2005</div>
+                    </div>
+                </div>
+                <div class="flex justify-center">
+                    <div class="family-tree-node bg-amber-100 border-2 border-amber-300 rounded-full w-16 h-16 flex items-center justify-center mx-4 relative">
+                        <i class="fas fa-user text-amber-600 text-2xl"></i>
+                        <div class="absolute -bottom-6 text-sm font-medium text-center w-full">Antonio<br>b. 1953</div>
+                    </div>
+                    <div class="family-tree-node bg-amber-100 border-2 border-amber-300 rounded-full w-16 h-16 flex items-center justify-center mx-4 relative">
+                        <i class="fas fa-user text-amber-600 text-2xl"></i>
+                        <div class="absolute -bottom-6 text-sm font-medium text-center w-full">Sophia<br>b. 1956</div>
+                    </div>
+                    <div class="family-tree-node bg-amber-100 border-2 border-amber-300 rounded-full w-16 h-16 flex items-center justify-center mx-4 relative">
+                        <i class="fas fa-user text-amber-600 text-2xl"></i>
+                        <div class="absolute -bottom-6 text-sm font-medium text-center w-full">Marco<br>b. 1960</div>
+                    </div>
+                </div>
+                <div class="flex justify-center mt-16">
+                    <div class="text-center mx-8">
+                        <div class="family-tree-node bg-green-100 border-2 border-green-300 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-2">
+                            <i class="fas fa-user text-green-600"></i>
+                        </div>
+                        <div class="text-xs">Michael<br>b. 1980</div>
+                    </div>
+                    <div class="text-center mx-8">
+                        <div class="family-tree-node bg-green-100 border-2 border-green-300 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-2">
+                            <i class="fas fa-user text-green-600"></i>
+                        </div>
+                        <div class="text-xs">Lisa<br>b. 1983</div>
+                    </div>
+                    <div class="text-center mx-8">
+                        <div class="family-tree-node bg-green-100 border-2 border-green-300 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-2">
+                            <i class="fas fa-user text-green-600"></i>
+                        </div>
+                        <div class="text-xs">David<br>b. 1985</div>
+                    </div>
+                    <div class="text-center mx-8">
+                        <div class="family-tree-node bg-green-100 border-2 border-green-300 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-2">
+                            <i class="fas fa-user text-green-600"></i>
+                        </div>
+                        <div class="text-xs">Elena<br>b. 1990</div>
+                    </div>
+                </div>
+                <div class="text-center mt-12">
+                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium">Build Your Family Tree</button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Community Collaboration -->
+    <section class="py-16 px-4 bg-gray-50">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Connect With Your Heritage Community</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+                <div class="bg-white p-8 rounded-xl shadow-md border border-gray-200">
+                    <h3 class="text-2xl font-bold mb-4 text-gray-800">Heritage Groups</h3>
+                    <p class="text-gray-600 mb-6">Join communities of people who share your cultural background or are researching similar family histories.</p>
+                    <div class="space-y-4">
+                        <div class="flex items-start p-3 hover:bg-gray-50 rounded-lg">
+                            <div class="bg-purple-100 text-purple-800 w-12 h-12 rounded-lg flex items-center justify-center mr-4">
+                                <i class="fas fa-flag text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Italian-American Heritage</h4>
+                                <p class="text-sm text-gray-500">4,231 members · 128 active discussions</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start p-3 hover:bg-gray-50 rounded-lg">
+                            <div class="bg-blue-100 text-blue-800 w-12 h-12 rounded-lg flex items-center justify-center mr-4">
+                                <i class="fas fa-dna text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">African Diaspora Genealogy</h4>
+                                <p class="text-sm text-gray-500">3,517 members · 89 active discussions</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start p-3 hover:bg-gray-50 rounded-lg">
+                            <div class="bg-green-100 text-green-800 w-12 h-12 rounded-lg flex items-center justify-center mr-4">
+                                <i class="fas fa-language text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Indigenous Language Preservation</h4>
+                                <p class="text-sm text-gray-500">1,842 members · 45 active discussions</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-6">
+                        <button class="text-indigo-600 hover:text-indigo-800 font-medium">
+                            <i class="fas fa-search mr-2"></i> Browse All Heritage Groups
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-2xl font-bold mb-4 text-gray-800">Collaborative Research</h3>
+                    <p class="text-gray-600 mb-6">Work with others to piece together family histories, translate documents, and solve genealogical mysteries.</p>
+                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
+                        <div classflex items-start>
+                            <div class="bg-yellow-100 text-yellow-800 w-10 h-10 rounded-lg flex items-center justify-center mr-4">
+                                <i class="fas fa-question"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-2">Help Identify This Photo Location</h4>
+                                <p class="text-sm text-gray-600 mb-3">Believed to be from my grandfather's village in Poland, circa 1930s. Can anyone recognize the architecture or landscape?</p>
+                                <div class="flex items-center text-sm text-gray-500">
+                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" class="w-6 h-6 rounded-full mr-2">
+                                    Posted by Adam K. · 3 hours ago · 7 comments
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+                        <div classflex items-start>
+                            <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-lg flex items-center justify-center mr-4">
+                                <i class="fas fa-book"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-2">Translation Help Needed - Old German Script</h4>
+                                <p class="text-sm text-gray-600 mb-3">I found this letter in my great-grandmother's things. It's in Kurrentschrift and I'm struggling with some passages about family in Bavaria.</p>
+                                <div class="flex items-center text-sm text-gray-500">
+                                    <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" class="w-6 h-6 rounded-full mr-2">
+                                    Posted by Hannah M. · 1 day ago · 4 comments
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-6">
+                        <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium">Join the Community</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Story Submission -->
+    <section class="py-16 px-4 bg-indigo-900 text-white">
+        <div class="container mx-auto max-w-4xl">
+            <h2 class="text-3xl font-bold text-center mb-8">Share Your Family Story</h2>
+            <p class="text-center text-indigo-200 mb-10">Contribute to our collective cultural memory by documenting your unique family history and traditions.</p>
+            <div class="bg-indigo-800 p-8 rounded-xl">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                    <div>
+                        <label class="block text-indigo-100 mb-2">Story Title</label>
+                        <input type="text" class="w-full px-4 py-2 rounded-lg bg-indigo-700 border border-indigo-600 text-white placeholder-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. 'Our Immigration Journey'">
+                    </div>
+                    <div>
+                        <label class="block text-indigo-100 mb-2">Cultural Heritage</label>
+                        <select class="w-full px-4 py-2 rounded-lg bg-indigo-700 border border-indigo-600 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                            <option>Select your heritage</option>
+                            <option>African</option>
+                            <option>Asian</option>
+                            <option>European</option>
+                            <option>Indigenous</option>
+                            <option>Latin American</option>
+                            <option>Middle Eastern</option>
+                            <option>Mixed Heritage</option>
+                            <option>Other</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-indigo-100 mb-2">Your Story</label>
+                    <textarea class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-600 text-white placeholder-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 story-textarea" placeholder="Tell us about your family's history, traditions, or cultural experiences..."></textarea>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-indigo-100 mb-2">Add Media (Photos, Documents, Audio)</label>
+                    <div class="border-2 border-dashed border-indigo-600 rounded-lg p-6 text-center">
+                        <i class="fas fa-cloud-upload-alt text-3xl text-indigo-400 mb-2"></i>
+                        <p class="text-indigo-300">Drag & drop files here or click to browse</p>
+                        <p class="text-sm text-indigo-400 mt-2">Supports JPG, PNG, PDF, MP3 (max 10MB each)</p>
+                    </div>
+                </div>
+                <div class="flex items-center mb-6">
+                    <input type="checkbox" id="allow-comments" class="mr-2 rounded bg-indigo-700 border-indigo-600 text-indigo-500 focus:ring-indigo-500">
+                    <label for="allow-comments" class="text-indigo-200">Allow community comments and contributions</label>
+                </div>
+                <div class="text-center">
+                    <button class="bg-white text-indigo-900 hover:bg-indigo-100 px-8 py-3 rounded-lg font-medium text-lg">Submit Your Story</button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-16 px-4 bg-white">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Community Says</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="heritage-card bg-gray-50 p-8 rounded-xl border border-gray-200">
+                    <div class="flex items-center mb-4">
+                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="font-bold">Sarah Johnson</h4>
+                            <p class="text-sm text-gray-500">Genealogy Researcher</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 italic mb-4">"Through Nexus Heritage, I connected with distant cousins who had pieces of our family puzzle I never knew existed. Together we've reconstructed three generations of our family tree!"</p>
+                    <div class="flex text-amber-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <div class="heritage-card bg-gray-50 p-8 rounded-xl border border-gray-200">
+                    <div class="flex items-center mb-4">
+                        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" alt="Carlos Mendez" class="w-12 h-12 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="font-bold">Carlos Mendez</h4>
+                            <p class="text-sm text-gray-500">Family Historian</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 italic mb-4">"The timeline feature helped me organize decades of family photos and documents in a way that finally made sense. My grandchildren can now explore our history interactively."</p>
+                    <div class="flex text-amber-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <div class="heritage-card bg-gray-50 p-8 rounded-xl border border-gray-200">
+                    <div class="flex items-center mb-4">
+                        <img src="https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Amina Diallo" class="w-12 h-12 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="font-bold">Amina Diallo</h4>
+                            <p class="text-sm text-gray-500">Cultural Preservationist</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 italic mb-4">"Our oral traditions were at risk of being lost. Nexus Heritage gave us tools to record elders' stories and share them with younger generations in our diaspora community."</p>
+                    <div class="flex text-amber-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Call to Action -->
+    <section class="py-16 px-4 bg-indigo-600 text-white">
+        <div class="container mx-auto text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Preserve Your Heritage?</h2>
+            <p class="text-xl text-indigo-100 max-w-3xl mx-auto mb-10">Join thousands of families documenting their histories and connecting with their cultural roots. Your story matters—don't let it be forgotten.</p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <button class="bg-white text-indigo-800 hover:bg-indigo-100 px-8 py-4 rounded-lg font-bold text-lg">Start Your Free Family Archive</button>
+                <button class="border-2 border-white text-white hover:bg-indigo-700 px-8 py-4 rounded-lg font-bold text-lg">Take a Tour</button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-gray-300 py-12 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+                <div>
+                    <h3 class="text-white font-bold text-lg mb-4">Nexus Heritage</h3>
+                    <p class="mb-4">Preserving family stories and cultural traditions for future generations.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-white font-bold text-lg mb-4">Features</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">Family Timeline</a></li>
+                        <li><a href="#" class="hover:text-white">Cultural Heritage Archive</a></li>
+                        <li><a href="#" class="hover:text-white">Collaborative Family Tree</a></li>
+                        <li><a href="#" class="hover:text-white">Storytelling Tools</a></li>
+                        <li><a href="#" class="hover:text-white">Community Groups</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-white font-bold text-lg mb-4">Resources</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">Genealogy Research Tips</a></li>
+                        <li><a href="#" class="hover:text-white">Oral History Guide</a></li>
+                        <li><a href="#" class="hover:text-white">Cultural Documentation</a></li>
+                        <li><a href="#" class="hover:text-white">Preservation Best Practices</a></li>
+                        <li><a href="#" class="hover:text-white">Educational Resources</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-white font-bold text-lg mb-4">Contact Us</h3>
+                    <ul class="space-y-2">
+                        <li class="flex items-start">
+                            <i class="fas fa-envelope mt-1 mr-2"></i>
+                            <span>[email protected]</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-phone-alt mt-1 mr-2"></i>
+                            <span>+1 (800) 555-0192</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt mt-1 mr-2"></i>
+                            <span>123 Heritage Way, Culture City, CC 10101</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p>&copy; 2023 Nexus Heritage. All rights reserved.</p>
+                <div class="flex space-x-6 mt-4 md:mt-0">
+                    <a href="#" class="hover:text-white">Privacy Policy</a>
+                    <a href="#" class="hover:text-white">Terms of Service</a>
+                    <a href="#" class="hover:text-white">Cookie Policy</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Simple interactive elements
+        document.addEventListener('DOMContentLoaded', function() {
+            // Mobile menu toggle would go here
+            // Family tree node interactions
+            const familyNodes = document.querySelectorAll('.family-tree-node');
+            familyNodes.forEach(node => {
+                node.addEventListener('click', function() {
+                    // In a real app, this would show more info about the family member
+                    console.log('Family member clicked:', this.querySelector('div').textContent.trim());
+                });
+            });
+            // Timeline item interactions
+            const timelineItems = document.querySelectorAll('.timeline-item');
+            timelineItems.forEach(item => {
+                item.addEventListener('click', function() {
+                    // In a real app, this would expand to show more details
+                    console.log('Timeline event clicked');
+                });
+            });
+            // Heritage card interactions
+            const heritageCards = document.querySelectorAll('.heritage-card');
+            heritageCards.forEach(card => {
+                card.addEventListener('click', function() {
+                    // In a real app, this would navigate to the full story/feature
+                    console.log('Card clicked');
+                });
+            });
+        });
+    </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=GooGooPanda/nexus-heritage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>