583 lines
26 KiB
TypeScript
583 lines
26 KiB
TypeScript
"use client"
|
||
|
||
import type React from "react"
|
||
|
||
import { Link } from "react-router-dom"
|
||
import {
|
||
Search,
|
||
Mail,
|
||
Phone,
|
||
MapPin,
|
||
Facebook,
|
||
Twitter,
|
||
Instagram,
|
||
Youtube,
|
||
Clock,
|
||
Users,
|
||
Database,
|
||
Award,
|
||
} from "lucide-react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import SearchForm from "./SearchForm"
|
||
import { useEffect, useState } from "react"
|
||
import { useNavigate } from "react-router-dom"
|
||
import ApiService from "@/services/apiService"
|
||
import type { Person } from "@/types/api"
|
||
|
||
export default function Home() {
|
||
const [currentSlide, setCurrentSlide] = useState(0)
|
||
const navigate = useNavigate()
|
||
const [total, setTotal] = useState(0)
|
||
const [migrants, setMigrants] = useState<Person[]>([])
|
||
const API_BASE_URL = "http://localhost:8000"
|
||
|
||
useEffect(() => {
|
||
async function fetchData() {
|
||
const response = await ApiService.getMigrants(1, 10)
|
||
setMigrants(response.data || [])
|
||
setTotal(response.total || 0)
|
||
}
|
||
fetchData()
|
||
}, [])
|
||
|
||
const backgroundImages = [
|
||
{
|
||
src: "/slide1.avif",
|
||
alt: "Italian countryside landscape",
|
||
},
|
||
{
|
||
src: "/slide2.avif",
|
||
alt: "Vintage Italian architecture",
|
||
},
|
||
{
|
||
src: "/slide3.avif",
|
||
alt: "Italian coastal town",
|
||
},
|
||
{
|
||
src: "/slide4.avif",
|
||
alt: "Italian countryside with vineyards",
|
||
},
|
||
]
|
||
|
||
const galleryImages = [
|
||
{
|
||
src: "https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
|
||
alt: "Italian countryside village",
|
||
},
|
||
{
|
||
src: "https://images.unsplash.com/photo-1515542622106-78bda8ba0e5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
|
||
alt: "Italian landscape",
|
||
},
|
||
{
|
||
src: "https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
|
||
alt: "Italian vineyards",
|
||
},
|
||
{
|
||
src: "https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
|
||
alt: "Italian coastal town",
|
||
},
|
||
{
|
||
src: "https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
|
||
alt: "Italian traditional building",
|
||
},
|
||
]
|
||
|
||
useEffect(() => {
|
||
const timer = setInterval(() => {
|
||
setCurrentSlide((prev) => (prev + 1) % backgroundImages.length)
|
||
}, 5000)
|
||
return () => clearInterval(timer)
|
||
}, [backgroundImages.length])
|
||
|
||
// Smooth scroll to contact section
|
||
const scrollToContact = (e: React.MouseEvent) => {
|
||
e.preventDefault()
|
||
const contactSection = document.getElementById("contact")
|
||
if (contactSection) {
|
||
contactSection.scrollIntoView({
|
||
behavior: "smooth",
|
||
block: "start",
|
||
})
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-col min-h-screen">
|
||
<header className="absolute top-0 left-0 right-0 z-50 border-b border-white/20 bg-black/20 backdrop-blur-sm">
|
||
<div className="container flex h-16 items-center justify-between px-4 md:px-6">
|
||
<Link to="/" className="flex items-center gap-2">
|
||
<span className="text-xl font-bold text-white">Italian Migrants NT</span>
|
||
</Link>
|
||
<nav className="hidden md:flex gap-6">
|
||
<Link to="/" className="text-sm font-medium text-white hover:text-white/80 transition-colors">
|
||
Home
|
||
</Link>
|
||
<a href="#about" className="text-sm font-medium text-white hover:text-white/80 transition-colors">
|
||
About
|
||
</a>
|
||
<a href="#stories" className="text-sm font-medium text-white hover:text-white/80 transition-colors">
|
||
Stories
|
||
</a>
|
||
<a
|
||
href="#contact"
|
||
onClick={scrollToContact}
|
||
className="text-sm font-medium text-white hover:text-white/80 transition-colors"
|
||
>
|
||
Contact
|
||
</a>
|
||
</nav>
|
||
<Button variant="outline" size="icon" className="md:hidden border-white/20 text-white hover:bg-white/10">
|
||
<Search className="h-4 w-4" />
|
||
<span className="sr-only">Search</span>
|
||
</Button>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="flex-1">
|
||
{/* Hero Section with Background Carousel and Search */}
|
||
<section className="relative w-full h-screen flex items-center justify-center overflow-hidden">
|
||
{/* Background Carousel */}
|
||
<div className="absolute inset-0">
|
||
{backgroundImages.map((image, index) => (
|
||
<div
|
||
key={index}
|
||
className={`absolute inset-0 transition-opacity duration-1000 ${
|
||
index === currentSlide ? "opacity-100" : "opacity-0"
|
||
}`}
|
||
>
|
||
<img src={image.src || "/placeholder.svg"} alt={image.alt} className="w-full h-full object-cover" />
|
||
<div className="absolute inset-0 bg-black/60" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Centered Content with Search */}
|
||
<div className="relative z-10 text-center text-white px-4 md:px-6 max-w-5xl mx-auto">
|
||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tighter font-serif mb-4">
|
||
Find Your Italian Heritage
|
||
</h1>
|
||
<p className="text-lg md:text-xl lg:text-2xl mb-8 text-white/90 max-w-3xl mx-auto leading-relaxed">
|
||
Search our comprehensive database of Italian migrants to the Northern Territory. Discover family
|
||
histories, personal stories, and cultural contributions spanning over a century.
|
||
</p>
|
||
|
||
{/* Main Search Form */}
|
||
<div className="bg-white/95 backdrop-blur-sm rounded-2xl p-6 md:p-8 shadow-2xl mb-8 max-w-4xl mx-auto">
|
||
<h2 className="text-2xl md:text-3xl font-bold text-[#9B2335] mb-6 font-serif">Search Migrant Database</h2>
|
||
<SearchForm />
|
||
</div>
|
||
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
onClick={() => navigate("/search-results")}
|
||
className="border-white text-black hover:bg-white hover:text-black px-8 py-3 text-lg"
|
||
>
|
||
Browse All Records
|
||
</Button>
|
||
|
||
{/* Quick Stats */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 text-center">
|
||
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
||
<div className="text-3xl font-bold text-white">{total.toLocaleString()}</div>
|
||
<div className="text-white/80">Migrant Records</div>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
||
<div className="text-3xl font-bold text-white">1880-1980</div>
|
||
<div className="text-white/80">Years Covered</div>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
||
<div className="text-3xl font-bold text-white">156</div>
|
||
<div className="text-white/80">Italian Regions</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Carousel Indicators */}
|
||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2">
|
||
{backgroundImages.map((_, index) => (
|
||
<button
|
||
key={index}
|
||
onClick={() => setCurrentSlide(index)}
|
||
className={`w-3 h-3 rounded-full transition-all ${index === currentSlide ? "bg-white" : "bg-white/50"}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Quick Search Tips */}
|
||
<section className="w-full py-12 bg-[#E8DCCA]">
|
||
<div className="container px-4 md:px-6">
|
||
<div className="text-center mb-8">
|
||
<h2 className="text-2xl md:text-3xl font-bold text-[#9B2335] font-serif mb-4">Search Tips</h2>
|
||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||
Get the most out of your search with these helpful tips
|
||
</p>
|
||
</div>
|
||
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||
<div className="text-center p-6 bg-white rounded-lg shadow-sm">
|
||
<div className="w-12 h-12 bg-[#01796F] rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<Search className="h-6 w-6 text-white" />
|
||
</div>
|
||
<h3 className="font-semibold text-[#9B2335] mb-2">Name Variations</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
Try different spellings and shortened versions of names as they may have been anglicized upon arrival.
|
||
</p>
|
||
</div>
|
||
<div className="text-center p-6 bg-white rounded-lg shadow-sm">
|
||
<div className="w-12 h-12 bg-[#01796F] rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-white font-bold">📅</span>
|
||
</div>
|
||
<h3 className="font-semibold text-[#9B2335] mb-2">Date Ranges</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
Use broader date ranges as exact arrival dates may not always be recorded accurately.
|
||
</p>
|
||
</div>
|
||
<div className="text-center p-6 bg-white rounded-lg shadow-sm">
|
||
<div className="w-12 h-12 bg-[#01796F] rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-white font-bold">🗺️</span>
|
||
</div>
|
||
<h3 className="font-semibold text-[#9B2335] mb-2">Regional Search</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
Search by Italian region or province if you know your family's origin to narrow results.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="stories" className="w-full py-12 md:py-24 lg:py-32">
|
||
<div className="container px-4 md:px-6">
|
||
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
||
<div className="space-y-2">
|
||
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl font-serif text-[#1A2A57]">
|
||
Featured Stories
|
||
</h2>
|
||
<p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
|
||
Discover some of the remarkable personal journeys found in our database. Each story represents
|
||
courage, determination, and the pursuit of a better life.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mx-auto max-w-5xl py-12">
|
||
<Carousel className="w-full">
|
||
<CarouselContent>
|
||
{migrants.map((person) => {
|
||
// Find the profile photo
|
||
const profilePhoto = person.photos?.find((photo) => photo.is_profile_photo)
|
||
|
||
return (
|
||
<CarouselItem key={person.person_id} className="md:basis-1/2 lg:basis-1/2">
|
||
<div className="p-2">
|
||
<Card className="h-full">
|
||
<CardContent className="p-6">
|
||
<div className="space-y-4">
|
||
<div className="aspect-video overflow-hidden rounded-lg">
|
||
<img
|
||
src={
|
||
profilePhoto
|
||
? `${API_BASE_URL}${profilePhoto.file_path}`
|
||
: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
|
||
}
|
||
alt={`Portrait of ${person.full_name || person.surname || "Unnamed"}`}
|
||
className="object-cover w-full h-full"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<h3 className="text-xl font-bold font-serif text-[#9B2335]">
|
||
{person.full_name || person.surname || "Unnamed"}
|
||
</h3>
|
||
<p className="text-sm text-[#01796F] font-medium">
|
||
Arrived{" "}
|
||
{person.migration?.date_of_arrival_nt
|
||
? new Date(person.migration.date_of_arrival_nt).getFullYear()
|
||
: "Unknown"}
|
||
</p>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
{person.additional_notes || "No story available."}
|
||
</p>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="mt-3 border-[#9B2335] text-[#9B2335] hover:bg-[#9B2335] hover:text-white"
|
||
onClick={() => navigate(`/migrant-profile/${person.person_id}`)}
|
||
>
|
||
View Full Record
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</CarouselItem>
|
||
)
|
||
})}
|
||
</CarouselContent>
|
||
<CarouselPrevious />
|
||
<CarouselNext />
|
||
</Carousel>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" className="w-full py-12 md:py-24 lg:py-32 bg-gray-50">
|
||
<div className="container px-4 md:px-6">
|
||
<div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
|
||
<div className="space-y-4 text-center lg:text-left">
|
||
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl font-serif text-[#1A2A57]">
|
||
Preserving Our Heritage
|
||
</h2>
|
||
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed mx-auto lg:mx-0">
|
||
This digital archive aims to preserve and celebrate the contributions of Italian migrants to the
|
||
Northern Territory. By documenting their stories, photographs, and historical records, we ensure that
|
||
their legacy continues for generations to come.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
|
||
<Button className="bg-[#01796F] hover:bg-[#015a54] text-white">Contribute a Story</Button>
|
||
<Button
|
||
variant="outline"
|
||
className="border-[#9B2335] text-[#9B2335] hover:bg-[#9B2335] hover:text-white"
|
||
>
|
||
View Gallery
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="w-full max-w-[500px] mx-auto">
|
||
<Carousel className="w-full">
|
||
<CarouselContent>
|
||
{galleryImages.map((image, index) => (
|
||
<CarouselItem key={index} className="md:basis-1/2">
|
||
<div className="p-1">
|
||
<div className="overflow-hidden rounded-xl aspect-square">
|
||
<img
|
||
src={image.src || "/placeholder.svg"}
|
||
alt={image.alt}
|
||
className="object-cover w-full h-full hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</CarouselItem>
|
||
))}
|
||
</CarouselContent>
|
||
<CarouselPrevious />
|
||
<CarouselNext />
|
||
</Carousel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
{/* Enhanced Footer with Contact Information */}
|
||
<footer id="contact" className="bg-[#1A2A57] text-white">
|
||
<div className="container px-4 md:px-6">
|
||
{/* Main Footer Content */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 py-12">
|
||
{/* About Section */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-bold font-serif text-[#E8DCCA]">Italian Migrants NT</h3>
|
||
<p className="text-sm text-gray-300 leading-relaxed">
|
||
Preserving and celebrating the rich heritage of Italian migrants to the Northern Territory through
|
||
digital archives, personal stories, and historical documentation.
|
||
</p>
|
||
<div className="flex items-center gap-2 text-sm text-gray-300">
|
||
<Award className="h-4 w-4 text-[#01796F]" />
|
||
<span>Heritage Australia Recognition</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Information */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-bold font-serif text-[#E8DCCA]">Contact Us</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex items-start gap-3">
|
||
<MapPin className="h-4 w-4 text-[#01796F] mt-0.5 flex-shrink-0" />
|
||
<div className="text-sm text-gray-300">
|
||
<p>Northern Territory Archives Centre</p>
|
||
<p>Kelsey Crescent, Millner NT 0810</p>
|
||
<p>Australia</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Phone className="h-4 w-4 text-[#01796F]" />
|
||
<span className="text-sm text-gray-300">+61 8 8924 7677</span>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Mail className="h-4 w-4 text-[#01796F]" />
|
||
<a
|
||
href="mailto:heritage@italianmigrantsnt.org.au"
|
||
className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
|
||
>
|
||
heritage@italianmigrantsnt.org.au
|
||
</a>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Clock className="h-4 w-4 text-[#01796F]" />
|
||
<div className="text-sm text-gray-300">
|
||
<p>Mon-Fri: 9:00 AM - 5:00 PM</p>
|
||
<p>Sat: 10:00 AM - 2:00 PM</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Links */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-bold font-serif text-[#E8DCCA]">Quick Links</h3>
|
||
<nav className="space-y-2">
|
||
<Link
|
||
to="/search-results"
|
||
className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
|
||
>
|
||
Search Database
|
||
</Link>
|
||
<Link to="/contribute" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
Contribute a Story
|
||
</Link>
|
||
<Link to="/gallery" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
Photo Gallery
|
||
</Link>
|
||
<Link
|
||
to="/research-help"
|
||
className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
|
||
>
|
||
Research Help
|
||
</Link>
|
||
<Link to="/volunteer" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
Volunteer
|
||
</Link>
|
||
<Link to="/donations" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
Support Us
|
||
</Link>
|
||
</nav>
|
||
</div>
|
||
|
||
{/* Resources & Social */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-bold font-serif text-[#E8DCCA]">Resources</h3>
|
||
<nav className="space-y-2">
|
||
<Link to="/faq" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
FAQ
|
||
</Link>
|
||
<Link
|
||
to="/research-guides"
|
||
className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
|
||
>
|
||
Research Guides
|
||
</Link>
|
||
<Link
|
||
to="/historical-timeline"
|
||
className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
|
||
>
|
||
Historical Timeline
|
||
</Link>
|
||
<Link to="/partnerships" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
Partnerships
|
||
</Link>
|
||
</nav>
|
||
|
||
<div className="pt-4">
|
||
<h4 className="text-sm font-semibold text-[#E8DCCA] mb-3">Follow Us</h4>
|
||
<div className="flex gap-3">
|
||
<a
|
||
href="https://facebook.com/italianmigrantsnt"
|
||
className="text-gray-300 hover:text-[#E8DCCA] transition-colors"
|
||
aria-label="Follow us on Facebook"
|
||
>
|
||
<Facebook className="h-5 w-5" />
|
||
</a>
|
||
<a
|
||
href="https://twitter.com/italianmigrantsnt"
|
||
className="text-gray-300 hover:text-[#E8DCCA] transition-colors"
|
||
aria-label="Follow us on Twitter"
|
||
>
|
||
<Twitter className="h-5 w-5" />
|
||
</a>
|
||
<a
|
||
href="https://instagram.com/italianmigrantsnt"
|
||
className="text-gray-300 hover:text-[#E8DCCA] transition-colors"
|
||
aria-label="Follow us on Instagram"
|
||
>
|
||
<Instagram className="h-5 w-5" />
|
||
</a>
|
||
<a
|
||
href="https://youtube.com/italianmigrantsnt"
|
||
className="text-gray-300 hover:text-[#E8DCCA] transition-colors"
|
||
aria-label="Subscribe to our YouTube channel"
|
||
>
|
||
<Youtube className="h-5 w-5" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Database Stats */}
|
||
<div className="border-t border-gray-600 py-8">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
|
||
<div className="space-y-1">
|
||
<div className="flex items-center justify-center gap-2">
|
||
<Database className="h-5 w-5 text-[#01796F]" />
|
||
<span className="text-2xl font-bold text-[#E8DCCA]">{total.toLocaleString()}</span>
|
||
</div>
|
||
<p className="text-sm text-gray-300">Total Records</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="flex items-center justify-center gap-2">
|
||
<Users className="h-5 w-5 text-[#01796F]" />
|
||
<span className="text-2xl font-bold text-[#E8DCCA]">2,847</span>
|
||
</div>
|
||
<p className="text-sm text-gray-300">Families Documented</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="flex items-center justify-center gap-2">
|
||
<MapPin className="h-5 w-5 text-[#01796F]" />
|
||
<span className="text-2xl font-bold text-[#E8DCCA]">156</span>
|
||
</div>
|
||
<p className="text-sm text-gray-300">Italian Regions</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="flex items-center justify-center gap-2">
|
||
<Clock className="h-5 w-5 text-[#01796F]" />
|
||
<span className="text-2xl font-bold text-[#E8DCCA]">100+</span>
|
||
</div>
|
||
<p className="text-sm text-gray-300">Years of History</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Footer */}
|
||
<div className="border-t border-gray-600 py-6">
|
||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||
<div className="flex flex-col md:flex-row items-center gap-4 text-sm text-gray-300">
|
||
<p>© {new Date().getFullYear()} Italian Migrants NT. All rights reserved.</p>
|
||
<div className="flex items-center gap-1">
|
||
<span>Powered by</span>
|
||
<span className="text-[#E8DCCA] font-semibold">Heritage Digital Archives</span>
|
||
</div>
|
||
</div>
|
||
<nav className="flex gap-6">
|
||
<Link to="/terms" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
Terms of Service
|
||
</Link>
|
||
<Link to="/privacy" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
Privacy Policy
|
||
</Link>
|
||
<Link to="/accessibility" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
Accessibility
|
||
</Link>
|
||
<Link to="/admin" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
|
||
Admin
|
||
</Link>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|