Update src/app/page.tsx
This commit is contained in:
136
src/app/page.tsx
136
src/app/page.tsx
@@ -7,9 +7,64 @@ import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSp
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { Gift, Sparkles, Image, BookOpen, Heart } from "lucide-react";
|
||||
import { Gift, Sparkles, Image, BookOpen, Heart, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
|
||||
const bookPages = [
|
||||
{
|
||||
title: "Papa's 47th Birthday", subtitle: "A Celebration of Love and Family", images: [
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-people-celebrating-birthday_52683-88947.jpg", "http://img.b2bpic.net/free-photo/family-generations-looking-camera_23-2148314901.jpg?_wi=1"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Cherished Moments", subtitle: "Family Through the Years", images: [
|
||||
"http://img.b2bpic.net/free-photo/lifestyle-queer-couples-celebrating-birthday_23-2149668049.jpg?_wi=1", "http://img.b2bpic.net/free-photo/smiling-family-lying-autumn-park_23-2147888337.jpg"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Forever Together", subtitle: "Memories That Last a Lifetime", images: [
|
||||
"http://img.b2bpic.net/free-photo/happy-family-spending-time-together-green-nature_1098-1063.jpg", "http://img.b2bpic.net/free-photo/family-generations-looking-camera_23-2148314901.jpg?_wi=1"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "A Father's Heart", subtitle: "The Greatest Gift of All", fullPageImage: "http://img.b2bpic.net/free-photo/family-generations-looking-camera_23-2148314901.jpg?_wi=1", content: "With endless gratitude and heartfelt love, we celebrate you today."
|
||||
},
|
||||
{
|
||||
title: "Thank You, Papa", subtitle: "For All the Love You've Given", isClosing: true,
|
||||
poem: `Your hands have guided us through every season,
|
||||
Your heart has been our reason.
|
||||
Your wisdom, our compass true,
|
||||
Our strength found always in you.
|
||||
|
||||
Seventy-seven rings around the sun,
|
||||
Each one a battle valiantly won.
|
||||
But greater than years is the love you give,
|
||||
The way you teach us all to live.
|
||||
|
||||
Happy 47th, dear Papa dear,
|
||||
We celebrate you, year after year.
|
||||
With the Patel family, strong and true,
|
||||
We honor and cherish all that is you."`
|
||||
}
|
||||
];
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (currentPage < bookPages.length - 1) {
|
||||
setCurrentPage(currentPage + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreviousPage = () => {
|
||||
if (currentPage > 0) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const currentBookPage = bookPages[currentPage];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
@@ -102,6 +157,85 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="book" data-section="book" className="min-h-screen flex flex-col items-center justify-center p-8 bg-amber-50" style={{ backgroundColor: "#f6f0e9" }}>
|
||||
<div className="max-w-4xl w-full">
|
||||
{/* Book Cover Design */}
|
||||
<div className="bg-gradient-to-br from-amber-900 to-amber-700 rounded-lg shadow-2xl p-12 text-center text-white mb-8 relative overflow-hidden" style={{
|
||||
backgroundImage: "url('data:image/svg+xml,%3Csvg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Ctext x=\"10\" y=\"50\" font-size=\"40\" opacity=\"0.1\" font-family=\"serif\"%3E✦%3C/text%3E%3C/svg%3E')", backgroundBlendMode: "overlay"
|
||||
}}>
|
||||
{/* Stickers decoration */}
|
||||
<div className="absolute top-4 right-4 text-4xl">🎉</div>
|
||||
<div className="absolute bottom-4 left-4 text-4xl">💝</div>
|
||||
<div className="absolute top-8 left-6 text-3xl">⭐</div>
|
||||
|
||||
{currentBookPage.isClosing ? (
|
||||
<div>
|
||||
<h1 className="text-5xl font-bold mb-4">Thank You, Papa</h1>
|
||||
<p className="text-xl opacity-90 mb-8">{currentBookPage.subtitle}</p>
|
||||
<div className="whitespace-pre-line text-base leading-relaxed font-serif italic">
|
||||
{currentBookPage.poem}
|
||||
</div>
|
||||
</div>
|
||||
) : currentBookPage.fullPageImage ? (
|
||||
<div className="flex flex-col items-center justify-center h-96">
|
||||
<img src={currentBookPage.fullPageImage} alt="Full page" className="w-full h-full object-cover rounded-lg mb-4" />
|
||||
<p className="text-lg italic mt-4">{currentBookPage.content}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<h1 className="text-5xl font-bold mb-2">{currentBookPage.title}</h1>
|
||||
<p className="text-2xl opacity-90 mb-8">{currentBookPage.subtitle}</p>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{currentBookPage.images?.map((img, idx) => (
|
||||
<img key={idx} src={img} alt={`Page ${idx + 1}`} className="w-full h-48 object-cover rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Page Navigation */}
|
||||
<div className="flex items-center justify-between mt-8">
|
||||
<button
|
||||
onClick={handlePreviousPage}
|
||||
disabled={currentPage === 0}
|
||||
className="flex items-center justify-center w-12 h-12 rounded-full bg-amber-200 hover:bg-amber-300 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||||
aria-label="Previous page"
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6 text-amber-900" />
|
||||
</button>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-amber-900 font-semibold">Patel Family</p>
|
||||
<p className="text-sm text-amber-700">Page {currentPage + 1} of {bookPages.length}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleNextPage}
|
||||
disabled={currentPage === bookPages.length - 1}
|
||||
className="flex items-center justify-center w-12 h-12 rounded-full bg-amber-200 hover:bg-amber-300 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||||
aria-label="Next page"
|
||||
>
|
||||
<ChevronRight className="w-6 h-6 text-amber-900" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Page Indicators */}
|
||||
<div className="flex justify-center gap-2 mt-6">
|
||||
{bookPages.map((_, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setCurrentPage(idx)}
|
||||
className={`w-2 h-2 rounded-full transition-all ${
|
||||
idx === currentPage ? "bg-amber-900 w-6" : "bg-amber-300"
|
||||
}`}
|
||||
aria-label={`Go to page ${idx + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="Wishes from Heart"
|
||||
|
||||
Reference in New Issue
Block a user