Compare commits
5 Commits
version_11
...
version_12
| Author | SHA1 | Date | |
|---|---|---|---|
| fe82627870 | |||
| 80a742ed82 | |||
| 1fcebf8494 | |||
| 776702551e | |||
| a0eab5e329 |
207
src/app/page.tsx
207
src/app/page.tsx
@@ -10,9 +10,92 @@ import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
||||
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
|
||||
import { Star, Heart, Users, Camera, Sparkles, Crown, Phone, MessageCircle, User, Play } from "lucide-react";
|
||||
import { Star, Heart, Users, Camera, Sparkles, Crown, Phone, MessageCircle, User, Play, ChevronRight, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const allDresses = [
|
||||
{
|
||||
id: "dress-1", name: "Classic Elegance", price: "Starting at $1,200", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=1", imageAlt: "Elegant white wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-2", name: "Blush Romance", price: "Starting at $1,400", variant: "Blush Pink", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=1", imageAlt: "Beautiful blush pink wedding gown"
|
||||
},
|
||||
{
|
||||
id: "dress-3", name: "Modern Sophistication", price: "Starting at $1,300", variant: "Off-White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=1", imageAlt: "Modern off-shoulder wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-4", name: "Intricate Lace", price: "Starting at $1,500", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=1", imageAlt: "Detailed lace wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-5", name: "Minimalist Chic", price: "Starting at $1,100", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=1", imageAlt: "Sleek minimalist wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-6", name: "Royal Drama", price: "Starting at $1,600", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=1", imageAlt: "Dramatic train wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-7", name: "Ethereal Layers", price: "Starting at $1,350", variant: "Ivory", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=2", imageAlt: "Layered tulle ethereal wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-8", name: "Vintage Inspired", price: "Starting at $1,450", variant: "Champagne", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=2", imageAlt: "Vintage champagne wedding gown"
|
||||
},
|
||||
{
|
||||
id: "dress-9", name: "Modern Asymmetric", price: "Starting at $1,550", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=2", imageAlt: "Asymmetric modern wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-10", name: "Beaded Elegance", price: "Starting at $1,700", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=2", imageAlt: "Beaded white wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-11", name: "Sleek Minimalist", price: "Starting at $1,150", variant: "Off-White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=2", imageAlt: "Sleek off-white minimalist dress"
|
||||
},
|
||||
{
|
||||
id: "dress-12", name: "Princess Ball Gown", price: "Starting at $1,800", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=2", imageAlt: "Princess ball gown wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-13", name: "Romantic Lace", price: "Starting at $1,400", variant: "Ivory", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=3", imageAlt: "Romantic lace wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-14", name: "Blush Elegance", price: "Starting at $1,480", variant: "Blush", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=3", imageAlt: "Blush elegance wedding gown"
|
||||
},
|
||||
{
|
||||
id: "dress-15", name: "Modern Drape", price: "Starting at $1,320", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=3", imageAlt: "Modern drape wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-16", name: "Lace Detail", price: "Starting at $1,520", variant: "Ivory", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=3", imageAlt: "Lace detail wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-17", name: "Minimal Chic", price: "Starting at $1,120", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=3", imageAlt: "Minimal chic wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-18", name: "Dramatic Train", price: "Starting at $1,650", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=3", imageAlt: "Dramatic train dress"
|
||||
},
|
||||
{
|
||||
id: "dress-19", name: "Sophisticated Ivory", price: "Starting at $1,380", variant: "Ivory", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=4", imageAlt: "Sophisticated ivory wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-20", name: "Blush Romance Premium", price: "Starting at $1,550", variant: "Blush Pink", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=4", imageAlt: "Premium blush pink wedding gown"
|
||||
},
|
||||
{
|
||||
id: "dress-21", name: "Contemporary Cut", price: "Starting at $1,420", variant: "Off-White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=4", imageAlt: "Contemporary cut wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-22", name: "Intricate Beading", price: "Starting at $1,720", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=4", imageAlt: "Intricate beading wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-23", name: "Elegant Minimalist", price: "Starting at $1,180", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=4", imageAlt: "Elegant minimalist wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-24", name: "Royal Gown", price: "Starting at $1,850", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=4", imageAlt: "Royal wedding gown"
|
||||
},
|
||||
{
|
||||
id: "dress-25", name: "Timeless Beauty", price: "Starting at $1,440", variant: "Ivory", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=5", imageAlt: "Timeless beauty wedding dress"
|
||||
}
|
||||
];
|
||||
|
||||
const initialDresses = allDresses.slice(0, 6);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -155,37 +238,97 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardFour
|
||||
title="Our Dress Collection"
|
||||
description="Handpicked dresses for every bride, every style, every story. From classic elegance to modern minimalism. Some of these dresses are exquisitely and elegantly sewed and crafted by MARAL."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Gallery"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "dress-1", name: "Classic Elegance", price: "Starting at $1,200", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg", imageAlt: "Elegant white wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-2", name: "Blush Romance", price: "Starting at $1,400", variant: "Blush Pink", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg", imageAlt: "Beautiful blush pink wedding gown"
|
||||
},
|
||||
{
|
||||
id: "dress-3", name: "Modern Sophistication", price: "Starting at $1,300", variant: "Off-White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg", imageAlt: "Modern off-shoulder wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-4", name: "Intricate Lace", price: "Starting at $1,500", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg", imageAlt: "Detailed lace wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-5", name: "Minimalist Chic", price: "Starting at $1,100", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg", imageAlt: "Sleek minimalist wedding dress"
|
||||
},
|
||||
{
|
||||
id: "dress-6", name: "Royal Drama", price: "Starting at $1,600", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg", imageAlt: "Dramatic train wedding dress"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<div className="relative">
|
||||
<ProductCardFour
|
||||
title="Our Dress Collection"
|
||||
description="Handpicked dresses for every bride, every style, every story. From classic elegance to modern minimalism. Some of these dresses are exquisitely and elegantly sewed and crafted by MARAL."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Gallery"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
products={initialDresses}
|
||||
/>
|
||||
|
||||
{/* View More Button Positioned on Right */}
|
||||
<div className="flex justify-end px-4 md:px-8 lg:px-16 py-6 md:py-10">
|
||||
<button
|
||||
onClick={() => setShowModal(true)}
|
||||
className="group relative inline-flex items-center gap-2 px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-[var(--primary-cta)] to-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-lg font-semibold hover:shadow-lg transition-all duration-300 ease-out"
|
||||
aria-label="View More Dresses"
|
||||
>
|
||||
<span className="text-sm md:text-base">View More Dresses</span>
|
||||
<ChevronRight className="w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal Gallery */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
|
||||
<div className="relative w-full max-w-6xl max-h-[90vh] bg-[var(--background)] rounded-2xl shadow-2xl overflow-hidden flex flex-col">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between p-4 md:p-6 border-b border-[var(--accent)]/20">
|
||||
<h2 className="text-xl md:text-2xl font-semibold text-[var(--foreground)]">Complete Dress Gallery</h2>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
className="p-2 hover:bg-[var(--accent)]/10 rounded-lg transition-colors"
|
||||
aria-label="Close gallery"
|
||||
>
|
||||
<X className="w-6 h-6 text-[var(--foreground)]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Gallery Grid */}
|
||||
<div className="overflow-y-auto flex-1 p-4 md:p-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
|
||||
{allDresses.map((dress) => (
|
||||
<div
|
||||
key={dress.id}
|
||||
className="group relative overflow-hidden rounded-lg bg-[var(--card)] shadow-md hover:shadow-xl transition-all duration-500 ease-out"
|
||||
>
|
||||
{/* Image Container */}
|
||||
<div className="relative h-64 md:h-72 overflow-hidden bg-[var(--accent)]/5">
|
||||
<img
|
||||
src={dress.imageSrc}
|
||||
alt={dress.imageAlt}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
|
||||
/>
|
||||
{/* Hover Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-3 md:p-4">
|
||||
<h3 className="text-sm md:text-base font-semibold text-[var(--foreground)] line-clamp-2">
|
||||
{dress.name}
|
||||
</h3>
|
||||
<p className="text-xs md:text-sm text-[var(--foreground)]/70 mt-1">
|
||||
{dress.variant}
|
||||
</p>
|
||||
<p className="text-sm md:text-base font-bold text-[var(--primary-cta)] mt-2">
|
||||
{dress.price}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="flex items-center justify-end gap-3 p-4 md:p-6 border-t border-[var(--accent)]/20 bg-[var(--card)]/50">
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
className="px-4 md:px-6 py-2 md:py-3 rounded-lg border border-[var(--accent)] text-[var(--foreground)] hover:bg-[var(--accent)]/10 transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div id="reels" data-section="reels">
|
||||
|
||||
Reference in New Issue
Block a user