Update src/app/page.tsx
This commit is contained in:
514
src/app/page.tsx
514
src/app/page.tsx
@@ -17,366 +17,182 @@ import { Award, Globe, Home, Leaf, Shield, Smile, Star, Zap } from "lucide-react
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Misk Real Estate"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Misk Real Estate"
|
||||
button={{ text: "Contact Us", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Misk Real Estate: Shaping the Future of Urban Living"
|
||||
description="Premium real estate developments tailored to your lifestyle. Excellence, reliability, and innovation in every project."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/minimalist-architecture-space_23-2151912551.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-building_23-2150896904.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248438.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/new-york-city-ny-usa-october-20-2020-vessel-hudson-yards-staircase-designed-by-architect-thomas-heatherwick-midtown-manhattan-west_1321-2497.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/square-front-modern-office-buildings_1359-869.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/relaxing-fume-banking-adult-absence_1134-936.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 2,500+ satisfied clients"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Luxury Residences",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Urban Development",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Property Investment",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Architectural Innovation",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable Living",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Misk Real Estate: Shaping the Future of Urban Living"
|
||||
description="Premium real estate developments tailored to your lifestyle. Excellence, reliability, and innovation in every project."
|
||||
buttons={[
|
||||
{ text: "Explore Projects", href: "#projects" },
|
||||
{ text: "Contact Us", href: "#contact" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/minimalist-architecture-space_23-2151912551.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-building_23-2150896904.jpg", alt: "Client profile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248438.jpg", alt: "Client profile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/new-york-city-ny-usa-october-20-2020-vessel-hudson-yards-staircase-designed-by-architect-thomas-heatherwick-midtown-manhattan-west_1321-2497.jpg", alt: "Client profile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/square-front-modern-office-buildings_1359-869.jpg", alt: "Client profile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/relaxing-fume-banking-adult-absence_1134-936.jpg", alt: "Client profile" }
|
||||
]}
|
||||
avatarText="Trusted by 2,500+ satisfied clients"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Luxury Residences" },
|
||||
{ type: "text", text: "Urban Development" },
|
||||
{ type: "text", text: "Property Investment" },
|
||||
{ type: "text", text: "Architectural Innovation" },
|
||||
{ type: "text", text: "Sustainable Living" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Our Vision of ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/group-business-people-walking-glass-walkway_1262-741.jpg",
|
||||
alt: "About Misk",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " Excellence",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{ type: "text", content: "Our Vision of " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/group-business-people-walking-glass-walkway_1262-741.jpg", alt: "About Misk" },
|
||||
{ type: "text", content: " Excellence" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Misk Al-Reem Residence",
|
||||
price: "$250,000+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neo-brutalism-inspired-building_23-2151004753.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Horizon Heights Complex",
|
||||
price: "$450,000+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-building-textures-surface-exterior_74190-7914.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Palm Oasis Villas",
|
||||
price: "$800,000+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-crane-modern-residential-complex-near-water-new-housing-by-lake_169016-69026.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Summit View Tower",
|
||||
price: "$600,000+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-low-angle-shot-stone-metal-building-blue-sky_181624-7605.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Golden Shores Estate",
|
||||
price: "$900,000+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-white-building-blue-sky_181624-5799.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Modern Urban Lofts",
|
||||
price: "$300,000+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-vacation_23-2149204469.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Featured Projects"
|
||||
description="Discover our latest developments designed for comfort and luxury."
|
||||
/>
|
||||
</div>
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Misk Al-Reem Residence", price: "$250,000+", imageSrc: "http://img.b2bpic.net/free-photo/neo-brutalism-inspired-building_23-2151004753.jpg" },
|
||||
{ id: "2", name: "Horizon Heights Complex", price: "$450,000+", imageSrc: "http://img.b2bpic.net/free-photo/abstract-building-textures-surface-exterior_74190-7914.jpg" },
|
||||
{ id: "3", name: "Palm Oasis Villas", price: "$800,000+", imageSrc: "http://img.b2bpic.net/free-photo/construction-crane-modern-residential-complex-near-water-new-housing-by-lake_169016-69026.jpg" },
|
||||
{ id: "4", name: "Summit View Tower", price: "$600,000+", imageSrc: "http://img.b2bpic.net/free-photo/vertical-low-angle-shot-stone-metal-building-blue-sky_181624-7605.jpg" },
|
||||
{ id: "5", name: "Golden Shores Estate", price: "$900,000+", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-white-building-blue-sky_181624-5799.jpg" },
|
||||
{ id: "6", name: "Modern Urban Lofts", price: "$300,000+", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-vacation_23-2149204469.jpg" }
|
||||
]}
|
||||
title="Our Featured Projects"
|
||||
description="Discover our latest developments designed for comfort and luxury."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Commitment",
|
||||
description: "We ensure reliability in every phase.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Innovation",
|
||||
description: "Cutting-edge design meets modern comfort.",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Quality",
|
||||
description: "Standards that define luxury living.",
|
||||
},
|
||||
{
|
||||
icon: Leaf,
|
||||
title: "Sustainability",
|
||||
description: "Eco-friendly materials for long-term health.",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Global Reach",
|
||||
description: "World-class standards available locally.",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Misk?"
|
||||
description="Defining quality in modern development."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ icon: Shield, title: "Commitment", description: "We ensure reliability in every phase." },
|
||||
{ icon: Zap, title: "Innovation", description: "Cutting-edge design meets modern comfort." },
|
||||
{ icon: Award, title: "Quality", description: "Standards that define luxury living." },
|
||||
{ icon: Leaf, title: "Sustainability", description: "Eco-friendly materials for long-term health." },
|
||||
{ icon: Globe, title: "Global Reach", description: "World-class standards available locally." }
|
||||
]}
|
||||
title="Why Choose Misk?"
|
||||
description="Defining quality in modern development."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Star,
|
||||
title: "Projects Completed",
|
||||
value: "150+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Smile,
|
||||
title: "Happy Clients",
|
||||
value: "2,500+",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Home,
|
||||
title: "Units Sold",
|
||||
value: "10,000+",
|
||||
},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Figures that reflect our success."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Star, title: "Projects Completed", value: "150+" },
|
||||
{ id: "m2", icon: Smile, title: "Happy Clients", value: "2,500+" },
|
||||
{ id: "m3", icon: Home, title: "Units Sold", value: "10,000+" }
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Figures that reflect our success."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Ahmed Salem",
|
||||
role: "Investor",
|
||||
testimonial: "Exceptional transparency and property value.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/relaxing-fume-banking-adult-absence_1134-936.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sara Khalid",
|
||||
role: "Resident",
|
||||
testimonial: "Misk made buying my first home simple.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-father-posing-with-arms-crossed_23-2148414862.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Omar Fakhri",
|
||||
role: "Partner",
|
||||
testimonial: "High quality finish and timely delivery.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-holding-document_23-2149445754.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Layla Nour",
|
||||
role: "Homeowner",
|
||||
testimonial: "I love the architecture of my villa.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3863.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Youssef Amin",
|
||||
role: "Investor",
|
||||
testimonial: "Misk is our top choice for investment.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/family-moving-new-home_23-2149162257.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Testimonials"
|
||||
description="Words of trust from our community."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Ahmed Salem", role: "Investor", testimonial: "Exceptional transparency and property value.", imageSrc: "http://img.b2bpic.net/free-photo/relaxing-fume-banking-adult-absence_1134-936.jpg" },
|
||||
{ id: "2", name: "Sara Khalid", role: "Resident", testimonial: "Misk made buying my first home simple.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-father-posing-with-arms-crossed_23-2148414862.jpg" },
|
||||
{ id: "3", name: "Omar Fakhri", role: "Partner", testimonial: "High quality finish and timely delivery.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-holding-document_23-2149445754.jpg" },
|
||||
{ id: "4", name: "Layla Nour", role: "Homeowner", testimonial: "I love the architecture of my villa.", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3863.jpg" },
|
||||
{ id: "5", name: "Youssef Amin", role: "Investor", testimonial: "Misk is our top choice for investment.", imageSrc: "http://img.b2bpic.net/free-photo/family-moving-new-home_23-2149162257.jpg" }
|
||||
]}
|
||||
title="Client Testimonials"
|
||||
description="Words of trust from our community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"ConstructCo",
|
||||
"Architects Inc",
|
||||
"Property Group",
|
||||
"Investment Hub",
|
||||
"Urban Developers",
|
||||
"Future Home Co",
|
||||
"Community Partners",
|
||||
]}
|
||||
title="Partners & Clients"
|
||||
description="Trusted by leading industry entities."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["ConstructCo", "Architects Inc", "Property Group", "Investment Hub", "Urban Developers", "Future Home Co", "Community Partners"]}
|
||||
title="Partners & Clients"
|
||||
description="Trusted by leading industry entities."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Contact Misk Real Estate"
|
||||
description="Reach out to discuss your property needs today."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-real-estate-agent_23-2151065041.jpg"
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your requirements",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Contact Misk Real Estate"
|
||||
description="Reach out to discuss your property needs today."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-real-estate-agent_23-2151065041.jpg"
|
||||
textarea={{ name: "message", placeholder: "Tell us about your requirements", rows: 4, required: true }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Misk"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Projects", href: "#projects" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="Misk"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user