| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MyFamilyFotos Features - Family Photo Sharing</title> |
| <link rel="icon" type="image/x-icon" href="http://static.photos/family/200x200/42"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); |
| .font-playfair { font-family: 'Playfair Display', serif; } |
| .font-poppins { font-family: 'Poppins', sans-serif; } |
| .feature-card { |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| } |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| } |
| .timeline-item:not(:last-child):after { |
| content: ''; |
| position: absolute; |
| left: 1.5rem; |
| top: 3rem; |
| height: calc(100% - 3rem); |
| width: 2px; |
| background-color: #e5e7eb; |
| } |
| </style> |
| </head> |
| <body class="font-poppins bg-gray-50"> |
| |
| <nav class="bg-white shadow-sm py-4"> |
| <div class="container mx-auto px-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="camera" class="text-indigo-600"></i> |
| <span class="font-playfair text-xl font-bold text-gray-800">MyFamilyFotos</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="index.html" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a> |
| <a href="features.html" class="text-indigo-600 font-medium">Features</a> |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">About</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="px-4 py-2 rounded-lg border border-indigo-600 text-indigo-600 hover:bg-indigo-50 transition"> |
| Family Login |
| </button> |
| <button class="px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition"> |
| Join Our Family |
| </button> |
| </div> |
| <button class="md:hidden"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-indigo-50 to-purple-50"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="font-playfair text-4xl md:text-5xl font-bold text-gray-800 mb-6"> |
| Our Family's Private Features |
| </h1> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Exclusive tools for our family members to connect and preserve our shared history. |
| </p> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-8 rounded-xl feature-card"> |
| <div class="w-14 h-14 rounded-xl bg-indigo-100 flex items-center justify-center mb-6"> |
| <i data-feather="shield" class="w-6 h-6 text-indigo-600"></i> |
| </div> |
| <h3 class="font-playfair text-xl font-bold text-gray-800 mb-3">Military-Grade Security</h3> |
| <p class="text-gray-600 mb-4"> |
| End-to-end encryption and zero-knowledge architecture means only your family can access your memories. |
| </p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>256-bit AES encryption</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Two-factor authentication</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Private family groups</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-xl feature-card"> |
| <div class="w-14 h-14 rounded-xl bg-indigo-100 flex items-center justify-center mb-6"> |
| <i data-feather="image" class="w-6 h-6 text-indigo-600"></i> |
| </div> |
| <h3 class="font-playfair text-xl font-bold text-gray-800 mb-3">Smart Organization</h3> |
| <p class="text-gray-600 mb-4"> |
| Our AI automatically tags and organizes your photos so they're always easy to find. |
| </p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Facial recognition</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Automatic date sorting</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt=1 mr-2"></i> |
| <span>Custom albums & tags</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-xl feature-card"> |
| <div class="w-14 h-14 rounded-xl bg-indigo-100 flex items-center justify-center mb-6"> |
| <i data-feather="book" class="w-6 h-6 text-indigo-600"></i> |
| </div> |
| <h3 class="font-playfair text-xl font-bold text-gray-800 mb-3">Storytelling</h3> |
| <p class="text-gray-600 mb-4"> |
| Add context to your memories with written stories, audio recordings and annotations. |
| </p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Voice memos for photos</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Collaborative storytelling</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt=1 mr-2"></i> |
| <span>Family timeline</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-xl feature-card"> |
| <div class="w-14 h-14 rounded-xl bg-indigo-100 flex items-center justify-center mb-6"> |
| <i data-feather="share-2" class="w-6 h-6 text-indigo-600"></i> |
| </div> |
| <h3 class="font-playfair text-xl font-bold text-gray-800 mb-3">Easy Sharing</h3> |
| <p class="text-gray-600 mb-4"> |
| Invite family members with different access levels and share curated albums. |
| </p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Granular permissions</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>One-click family invites</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt=1 mr-2"></i> |
| <span>Secure guest links</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-xl feature-card"> |
| <div class="w-14 h-14 rounded-xl bg-indigo-100 flex items-center justify-center mb-6"> |
| <i data-feather="map" class="w-6 h-6 text-indigo-600"></i> |
| </div> |
| <h3 class="font-playfair text-xl font-bold text-gray-800 mb-3">Memory Map</h3> |
| <p class="text-gray-600 mb-4"> |
| See where your family's story unfolded on our beautiful interactive map. |
| </p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Automatic geotagging</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Location-based albums</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt=1 mr-2"></i> |
| <span>Travel timeline</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-xl feature-card"> |
| <div class="w-14 h-14 rounded-xl bg-indigo-100 flex items-center justify-center mb-6"> |
| <i data-feather="smartphone" class="w-6 h-6 text-indigo-600"></i> |
| </div> |
| <h3 class="font-playfair text-xl font-bold text-gray-800 mb-3">Family App</h3> |
| <p class="text-gray-600 mb-4"> |
| Available on all devices so everyone can contribute, no matter their tech skills. |
| </p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>iOS & Android apps</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt-1 mr-2"></i> |
| <span>Simple upload from any device</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="w-4 h-4 text-green-500 mt=1 mr-2"></i> |
| <span>Elder-friendly interface</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="font-playfair text-3xl md:text-4xl font-bold text-gray-800 mb-4"> |
| Our Family Timeline |
| </h2> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> |
| A private chronicle of our family's milestones and everyday moments. |
| </p> |
| </div> |
|
|
| <div class="max-w-3xl mx-auto"> |
| <div class="relative pl-16 space-y-12"> |
| |
| <div class="relative timeline-item"> |
| <div class="absolute left-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i data-feather="star" class="w-4 h-4 text-indigo-600"></i> |
| </div> |
| <div class="pl-6"> |
| <div class="flex items-center space-x-4 mb-2"> |
| <h3 class="font-playfair text-xl font-bold text-gray-800">Family Milestones</h3> |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Automatic</span> |
| </div> |
| <p class="text-gray-600 mb-4"> |
| Birthdays, anniversaries and important events are automatically highlighted in your timeline. |
| </p> |
| <img src="http://static.photos/family/640x360/5" alt="Family timeline" class="rounded-lg shadow-md"> |
| </div> |
| </div> |
|
|
| |
| <div class="relative timeline-item"> |
| <div class="absolute left-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i data-feather="calendar" class="w-4 h-4 text-indigo-600"></i> |
| </div> |
| <div class="pl-6"> |
| <div class="flex items-center space-x-4 mb-2"> |
| <h3 class="font-playfair text-xl font-bold text-gray-800">This Day in History</h3> |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">New</span> |
| </div> |
| <p class="text-gray-600 mb-4"> |
| Receive notifications about memories from this date in previous years, bringing back forgotten moments. |
| </p> |
| <img src="http://static.photos/technology/640x360/6" alt="Memory notification" class="rounded-lg shadow-md"> |
| </div> |
| </div> |
|
|
| |
| <div class="relative timeline-item"> |
| <div class="absolute left-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i data-feather="film" class="w-4 h-4 text-indigo-600"></i> |
| </div> |
| <div class="pl-6"> |
| <h3 class="font-playfair text-xl font-bold text-gray-800 mb-2">Memory Reels</h3> |
| <p class="text-gray-600 mb-4"> |
| Our AI creates beautiful video montages of your photos set to music that you can share with family. |
| </p> |
| <img src="http://static.photos/people/640x360/7" alt="Memory reel" class="rounded-lg shadow-md"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-indigo-600 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="font-playfair text-3xl md:text-4xl font-bold mb-6"> |
| Start Preserving Your Legacy Today |
| </h2> |
| <p class="text-xl text-indigo-100 mb-8 max-w-2xl mx-auto"> |
| Join thousands of families safeguarding their most precious memories. |
| </p> |
| <button class="px-8 py-3 rounded-lg bg-white text-indigo-600 hover:bg-gray-100 transition font-medium shadow-lg"> |
| Try Free for 14 Days |
| </button> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-gray-300 py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i data-feather="box" class="text-indigo-400"></i> |
| <span class="font-playfair text-xl font-bold text-white">MemoryVault</span> |
| </div> |
| <p class="mb-4"> |
| Preserving your family's legacy for generations to come. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#"><i data-feather="facebook" class="hover:text-white"></i></a> |
| <a href="#"><i data-feather="twitter" class="hover:text-white"></i></a> |
| <a href="#"><i data-feather="instagram" class="hover:text-white"></i></a> |
| </div> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-4">Product</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white">Features</a></li> |
| <li><a href="#" class="hover:text-white">Pricing</a></li> |
| <li><a href="#" class="hover:text-white">Security</a></li> |
| <li><a href="#" class="hover:text-white">FAQ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-4">Company</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white">About</a></li> |
| <li><a href="#" class="hover:text-white">Blog</a></li> |
| <li><a href="#" class="hover:text-white">Careers</a></li> |
| <li><a href="#" class="hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-4">Legal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white">Privacy</a></li> |
| <li><a href="#" class="hover:text-white">Terms</a></li> |
| <li><a href="#" class="hover:text-white">GDPR</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-12 pt-8 text-sm text-gray-400"> |
| <p>© 2023 MemoryVault. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| <script> |
| |
| async function loadFamilyPhotos() { |
| try { |
| |
| const response = await fetch('/api/family-photos'); |
| const photos = await response.json(); |
| |
| const slideshowContainer = document.getElementById('feature-slideshow'); |
| if (slideshowContainer && photos.length > 0) { |
| let currentSlide = 0; |
| |
| function showSlide() { |
| const photo = photos[currentSlide]; |
| slideshowContainer.innerHTML = ` |
| <img src="${photo.imageUrl}" alt="${photo.caption}" |
| class="w-full h-full object-cover rounded-lg"> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4"> |
| <p class="text-white font-medium">${photo.caption || "Family Memory"}</p> |
| <p class="text-white text-sm">Shared by ${photo.uploadedBy}</p> |
| </div> |
| `; |
| } |
| |
| |
| setInterval(() => { |
| currentSlide = (currentSlide + 1) % photos.length; |
| showSlide(); |
| }, 5000); |
| |
| |
| showSlide(); |
| } |
| } catch (error) { |
| console.error('Error loading family photos:', error); |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| loadFamilyPhotos(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
