vibeasite-templates/template-wedding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: wedding template (15 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:59:20 +00:00
parent 8a98a3e09e
commit 6f6b353b19
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Index.tsx
+6 -6
View File
@@ -85,13 +85,13 @@ export default function IndexPage() {
<div className="relative">
<div className="absolute left-1/2 -translate-x-px top-0 bottom-0 w-px bg-rose-200 dark:bg-stone-700 hidden md:block" />
{storyTimeline.map((item, i) => (
<div key={i} className={`relative flex flex-col md:flex-row items-center gap-6 mb-16 last:mb-0 animate-fade-up \${i % 2 === 1 ? "md:flex-row-reverse" : ""}`} style={{ animationDelay: `\${i * 150}ms` }}>
<div className={`flex-1 backdrop-blur-sm bg-card/80 border border-border/50 rounded-xl p-5 \${i % 2 === 1 ? "md:text-left" : "md:text-right"}`}>
<div key={i} className={`relative flex flex-col md:flex-row items-center gap-6 mb-16 last:mb-0 animate-fade-up ${i % 2 === 1 ? "md:flex-row-reverse" : ""}`} style={{ animationDelay: `${i * 150}ms` }}>
<div className={`flex-1 backdrop-blur-sm bg-card/80 border border-border/50 rounded-xl p-5 ${i % 2 === 1 ? "md:text-left" : "md:text-right"}`}>
<span className="text-sm text-rose-400 font-medium">{item.year}</span>
<h3 className="font-serif text-xl text-stone-800 dark:text-white mt-1 mb-2">{item.title}</h3>
<p className="text-stone-600 dark:text-stone-400 text-sm leading-relaxed">{item.desc}</p>
</div>
<div className={`w-12 h-12 rounded-full bg-gradient-to-br \${item.gradient} flex items-center justify-center shadow-lg z-10 shrink-0`}>
<div className={`w-12 h-12 rounded-full bg-gradient-to-br ${item.gradient} flex items-center justify-center shadow-lg z-10 shrink-0`}>
<Heart className="h-5 w-5 text-white fill-white" />
</div>
<div className="flex-1 hidden md:block" />
@@ -113,7 +113,7 @@ export default function IndexPage() {
{bridesmaids.map((p, i) => (
<Card key={i} className="border-border/50 backdrop-blur-sm bg-card/80 text-center overflow-hidden hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
<CardContent className="pt-6 pb-4">
<div className={`w-16 h-16 rounded-full bg-gradient-to-br \${p.gradient} flex items-center justify-center mx-auto mb-3 text-white font-serif text-lg`}>{p.initials}</div>
<div className={`w-16 h-16 rounded-full bg-gradient-to-br ${p.gradient} flex items-center justify-center mx-auto mb-3 text-white font-serif text-lg`}>{p.initials}</div>
<div className="font-medium text-stone-800 dark:text-white text-sm">{p.name}</div>
<div className="text-xs text-rose-400 mt-1">{p.role}</div>
</CardContent>
@@ -127,7 +127,7 @@ export default function IndexPage() {
{groomsmen.map((p, i) => (
<Card key={i} className="border-border/50 backdrop-blur-sm bg-card/80 text-center overflow-hidden hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
<CardContent className="pt-6 pb-4">
<div className={`w-16 h-16 rounded-full bg-gradient-to-br \${p.gradient} flex items-center justify-center mx-auto mb-3 text-white font-serif text-lg`}>{p.initials}</div>
<div className={`w-16 h-16 rounded-full bg-gradient-to-br ${p.gradient} flex items-center justify-center mx-auto mb-3 text-white font-serif text-lg`}>{p.initials}</div>
<div className="font-medium text-stone-800 dark:text-white text-sm">{p.name}</div>
<div className="text-xs text-stone-400 mt-1">{p.role}</div>
</CardContent>
@@ -153,7 +153,7 @@ export default function IndexPage() {
{ h: "h-64", gradient: "from-pink-300 to-amber-200" },
{ h: "h-80", gradient: "from-rose-300 to-amber-100" },
].map((item, i) => (
<div key={i} className={`\${item.h} rounded-xl bg-gradient-to-br \${item.gradient} overflow-hidden group cursor-pointer relative hover:-translate-y-1 hover:shadow-lg transition-all duration-300`}>
<div key={i} className={`${item.h} rounded-xl bg-gradient-to-br ${item.gradient} overflow-hidden group cursor-pointer relative hover:-translate-y-1 hover:shadow-lg transition-all duration-300`}>
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<Camera className="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
</div>