Spaces:
Running
Running
| <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>© 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> |