first commit
@@ -327,13 +327,13 @@ export default function BirthdayBanner({ name = "Linh" }) {
|
||||
<div className="absolute inset-0 bg-black/10"></div>
|
||||
<div className="relative z-10 max-w-4xl mx-auto text-center px-4">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce">
|
||||
🎂 Happy Birthday {name}! 🎉
|
||||
🎂 Happy birthday {name}! 🎉
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl font-medium opacity-90">
|
||||
Chúc mừng sinh nhật! Click để ăn confetti! ✨
|
||||
Chúc mừng sinh nhật!
|
||||
</p>
|
||||
<p className="mt-4 text-lg opacity-75">
|
||||
(Click anywhere for more confetti 🎊)
|
||||
(Click để ăn pháo bông vào mồm 🎊)
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
@@ -375,7 +375,7 @@ function App() {
|
||||
<BirthdayBanner name="Linh" />
|
||||
<RoastGallery />
|
||||
<footer className="text-center py-8 text-gray-500">
|
||||
<p>Made with 💖 for the birthday roast</p>
|
||||
<p>Made with 💩</p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Happy Birthday Linh! 🎂</title>
|
||||
<title>Happy birthday b Linh! 🎂</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
BIN
public/images/1.jpeg
Normal file
|
After Width: | Height: | Size: 192 KiB |
BIN
public/images/460885e2-fedc-4667-9d89-81479e0a037d.jpeg
Normal file
|
After Width: | Height: | Size: 160 KiB |
BIN
public/images/4734bcf9-c588-4a25-8dec-ccf240f884d1.jpeg
Normal file
|
After Width: | Height: | Size: 195 KiB |
BIN
public/images/474e8db1-687e-4ec3-b3c1-50ebf5a2db5a.jpeg
Normal file
|
After Width: | Height: | Size: 181 KiB |
BIN
public/images/74f71867-ee8e-4c53-99ba-753e59b2ab20.jpeg
Normal file
|
After Width: | Height: | Size: 189 KiB |
BIN
public/images/894687fb-a7b7-4f5d-b64d-19fe27357cc8.jpeg
Normal file
|
After Width: | Height: | Size: 137 KiB |
BIN
public/images/8ca58a8d-0c2d-4600-b8ec-ec21c4e1724a.jpeg
Normal file
|
After Width: | Height: | Size: 150 KiB |
BIN
public/images/c21c7258-1eb6-4ebc-bd90-177230493b53.jpeg
Normal file
|
After Width: | Height: | Size: 194 KiB |
BIN
public/images/d1b53da2-f405-47ef-b239-ccf5a7a27bcb.jpeg
Normal file
|
After Width: | Height: | Size: 258 KiB |
BIN
public/images/f1f58a34-7d98-4d4f-affe-f39207044d80.jpeg
Normal file
|
After Width: | Height: | Size: 192 KiB |
@@ -1,4 +1,11 @@
|
||||
[
|
||||
{ "image": "placeholder-1.jpg", "caption": "Thêm ảnh vào thư mục public/images/ nhé! 😄" },
|
||||
{ "image": "placeholder-2.jpg", "caption": "Chỉnh caption trong public/roasts.json" }
|
||||
{ "image": "460885e2-fedc-4667-9d89-81479e0a037d.jpeg" },
|
||||
{ "image": "4734bcf9-c588-4a25-8dec-ccf240f884d1.jpeg" },
|
||||
{ "image": "474e8db1-687e-4ec3-b3c1-50ebf5a2db5a.jpeg" },
|
||||
{ "image": "74f71867-ee8e-4c53-99ba-753e59b2ab20.jpeg" },
|
||||
{ "image": "894687fb-a7b7-4f5d-b64d-19fe27357cc8.jpeg" },
|
||||
{ "image": "8ca58a8d-0c2d-4600-b8ec-ec21c4e1724a.jpeg" },
|
||||
{ "image": "c21c7258-1eb6-4ebc-bd90-177230493b53.jpeg" },
|
||||
{ "image": "d1b53da2-f405-47ef-b239-ccf5a7a27bcb.jpeg" },
|
||||
{ "image": "f1f58a34-7d98-4d4f-affe-f39207044d80.jpeg" }
|
||||
]
|
||||
|
||||
@@ -7,7 +7,7 @@ function App() {
|
||||
<BirthdayBanner name="Linh" />
|
||||
<RoastGallery />
|
||||
<footer className="text-center py-8 text-gray-500">
|
||||
<p>Made with 💖 for the birthday roast</p>
|
||||
<p>Made with 💩</p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -45,19 +45,24 @@ export default function BirthdayBanner({ name = "Linh" }) {
|
||||
|
||||
return (
|
||||
<header
|
||||
className="relative bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white py-16 md:py-24 cursor-pointer overflow-hidden"
|
||||
className="relative text-white py-16 md:py-24 cursor-pointer overflow-hidden"
|
||||
onClick={handleClick}
|
||||
style={{
|
||||
backgroundImage: `url(/images/1.jpeg)`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/10"></div>
|
||||
<div className="absolute inset-0 bg-black/40"></div>
|
||||
<div className="relative z-10 max-w-4xl mx-auto text-center px-4">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce">
|
||||
🎂 Happy Birthday {name}! 🎉
|
||||
🎂 Happy birthday b {name}! 🎉
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl font-medium opacity-90">
|
||||
Chúc mừng sinh nhật! Click để ăn confetti! ✨
|
||||
Chúc mừng sinh nhật!
|
||||
</p>
|
||||
<p className="mt-4 text-lg opacity-75">
|
||||
(Click anywhere for more confetti 🎊)
|
||||
(Click để ăn pháo bông vào mồm ✨)
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -4,15 +4,17 @@ export default function RoastCard({ image, caption }) {
|
||||
<div className="aspect-square overflow-hidden">
|
||||
<img
|
||||
src={`/images/${image}`}
|
||||
alt={caption}
|
||||
alt={caption || 'Roast photo'}
|
||||
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
{caption && (
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
|
||||
<p className="text-white text-sm md:text-base font-medium text-center">
|
||||
{caption}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function RoastGallery() {
|
||||
return (
|
||||
<section className="max-w-7xl mx-auto px-4 py-12">
|
||||
<h2 className="text-3xl font-bold text-center mb-8 text-gray-800">
|
||||
📸 Bộ Sưu Tập "Huyền Thoại"
|
||||
📸 Phd hoá học
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
{roasts.map((roast, index) => (
|
||||
|
||||