Merge version_2_1781562698951 into main #1
@@ -1,5 +1,5 @@
|
||||
import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
|
||||
import NavbarDropdown from '@/components/ui/NavbarDropdown';
|
||||
import NavbarFloating from '@/components/ui/NavbarFloating';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
|
||||
import { Outlet } from 'react-router-dom';
|
||||
@@ -8,32 +8,28 @@ import { StyleProvider } from "@/components/ui/StyleProvider";
|
||||
export default function Layout() {
|
||||
const navItems = [
|
||||
{
|
||||
"name": "Properties",
|
||||
"href": "#properties"
|
||||
"name": "Home",
|
||||
"href": "#hero"
|
||||
},
|
||||
{
|
||||
"name": "About",
|
||||
"name": "About Musa",
|
||||
"href": "#about"
|
||||
},
|
||||
{
|
||||
"name": "Results",
|
||||
"href": "#results"
|
||||
"name": "Luxury Listings",
|
||||
"href": "#properties"
|
||||
},
|
||||
{
|
||||
"name": "Success Stories",
|
||||
"href": "#testimonials"
|
||||
},
|
||||
{
|
||||
"name": "Community",
|
||||
"href": "#social-proof"
|
||||
},
|
||||
{
|
||||
"name": "Contact",
|
||||
"href": "#contact"
|
||||
},
|
||||
{
|
||||
"name": "Hero",
|
||||
"href": "#hero"
|
||||
},
|
||||
{
|
||||
"name": "Featured Carousel",
|
||||
"href": "#featured-carousel"
|
||||
},
|
||||
{
|
||||
"name": "Metrics",
|
||||
"href": "#metrics"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -41,11 +37,11 @@ export default function Layout() {
|
||||
<StyleProvider buttonVariant="bounce" siteBackground="gridDots" heroBackground="lightRaysCenter">
|
||||
<SiteBackgroundSlot />
|
||||
<SectionErrorBoundary name="navbar">
|
||||
<NavbarDropdown
|
||||
<NavbarFloating
|
||||
logo="MUSA"
|
||||
ctaButton={{
|
||||
text: "WhatsApp",
|
||||
href: "https://wa.me/yournumber",
|
||||
text: "Schedule Consultation",
|
||||
href: "#contact",
|
||||
}}
|
||||
navItems={navItems} />
|
||||
</SectionErrorBoundary>
|
||||
|
||||
@@ -5,15 +5,15 @@
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||
--background: #000000;
|
||||
--card: #0c1a15;
|
||||
--background: #0a0a0a;
|
||||
--card: #111111;
|
||||
--foreground: #f8fafc;
|
||||
--primary-cta: #10b981;
|
||||
--primary-cta: #c8a96b;
|
||||
--primary-cta-text: #000000;
|
||||
--secondary-cta: #1f4035;
|
||||
--secondary-cta: #222222;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #0d5238;
|
||||
--background-accent: #064e3b;
|
||||
--accent: #c8a96b;
|
||||
--background-accent: #1a1a1a;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 0.5rem;
|
||||
|
||||
@@ -1,320 +1,42 @@
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
|
||||
import HeroBrand from '@/components/sections/hero/HeroBrand';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import FeaturedCarouselSection from './HomePage/sections/FeaturedCarousel';
|
||||
import PropertiesSection from './HomePage/sections/Properties';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TeamSection from './HomePage/sections/Team';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import SocialProofSection from './HomePage/sections/SocialProof';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBrand
|
||||
brand="MUSA REAL ESTATE"
|
||||
description="Redefining luxury living across the United States. Your bridge to the world's most exclusive properties."
|
||||
primaryButton={{
|
||||
text: "Book Consultation",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Portfolio",
|
||||
href: "#properties",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vertical-picture-spiral-staircase-building-sunlight-huatulco-mexico_181624-26945.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="About Musa"
|
||||
quote="In the world of real estate, luxury is not just a price point; it is a lifestyle. I curate experiences that transcend expectations."
|
||||
author="Musa"
|
||||
role="Luxury Real Estate Influencer"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="featured-carousel" data-section="featured-carousel">
|
||||
<SectionErrorBoundary name="featured-carousel">
|
||||
<FeaturesMediaCarousel
|
||||
tag="Featured Lifestyle"
|
||||
title="Exclusive Property Highlights"
|
||||
description="Explore the finest collection of luxury estates I've curated this year."
|
||||
items={[
|
||||
{
|
||||
title: "Beachfront Elegance",
|
||||
description: "Coastal living at its peak.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-beautiful-building-moroccan-morocco_1203-5629.jpg",
|
||||
},
|
||||
{
|
||||
title: "Skyline Penthouse",
|
||||
description: "Panoramic city views.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-messy-bun-hair-style_23-2149459254.jpg",
|
||||
},
|
||||
{
|
||||
title: "Gourmet Haven",
|
||||
description: "Designed for culinary art.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/whole-fresh-orange-fruits-with-leaves-placed-board_114579-46680.jpg",
|
||||
},
|
||||
{
|
||||
title: "Private Cinema",
|
||||
description: "Ultimate home entertainment.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girls-playing-couch-with-tv_23-2147768102.jpg",
|
||||
},
|
||||
{
|
||||
title: "Spa Retreat",
|
||||
description: "Relaxation in your home.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-design-marble-tile-toilet-bathroom-wardrobe-with-walk-closet_105762-2073.jpg",
|
||||
},
|
||||
{
|
||||
title: "Garden Terrace",
|
||||
description: "Indoor-outdoor seamless flow.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rustic-patio-furniture-house-deck-with-vegetation_23-2150698304.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturedCarouselSection />
|
||||
|
||||
<div id="properties" data-section="properties">
|
||||
<SectionErrorBoundary name="properties">
|
||||
<FeaturesImageBento
|
||||
tag="Collection"
|
||||
title="Luxury Real Estate Portfolio"
|
||||
description="Selected residences that define excellence."
|
||||
items={[
|
||||
{
|
||||
title: "The Mansion",
|
||||
description: "Ultimate privacy.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-modern-villa-with-pool-lush-greenery_23-2152008230.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Loft",
|
||||
description: "Industrial luxury.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-white-couch-coffee-table_188544-18668.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Villa",
|
||||
description: "Modern classic.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-kitchen-interior-design_23-2151008651.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Estate",
|
||||
description: "Opulence defined.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500595.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Suite",
|
||||
description: "Refined urban.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-vintage-bathtub_23-2148291600.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Retreat",
|
||||
description: "Quiet luxury.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-architecture-with-swimming-pool_23-2151993728.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Reserve",
|
||||
description: "Secured living.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/layered-glasses-with-shampagne_8353-9952.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<PropertiesSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsMediaCards
|
||||
tag="Proven Results"
|
||||
title="Market Impact"
|
||||
description="Numbers that build trust and long-term client success."
|
||||
metrics={[
|
||||
{
|
||||
value: "$500M+",
|
||||
title: "Portfolio Value",
|
||||
description: "Managed luxury assets.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/miami-luxury-house_649448-2926.jpg",
|
||||
},
|
||||
{
|
||||
value: "150+",
|
||||
title: "Happy Clients",
|
||||
description: "Exclusive successful deals.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cafe-living-room-loft-style_1150-10726.jpg",
|
||||
},
|
||||
{
|
||||
value: "20%",
|
||||
title: "Average Gain",
|
||||
description: "ROI for our investors.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-white-minimal-kitchen-with-wood-decoration_105762-2211.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamOverlayCards
|
||||
tag="Advisory Team"
|
||||
title="Meet The Experts"
|
||||
description="Professional support to guarantee your property journey is seamless."
|
||||
members={[
|
||||
{
|
||||
name: "Alex Rivier",
|
||||
role: "Head of Acquisitions",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/latin-amateurs-dancing-salsa_23-2151245222.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Chen",
|
||||
role: "Property Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-with-digital-tablet_1098-651.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Vark",
|
||||
role: "Luxury Legal Advisor",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/real-estate-satisfied-man-rejoicing-founding-perfect-home-apartment-holding-paper-house-model-sta_1258-113657.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TeamSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Social Proof"
|
||||
title="Client Success Stories"
|
||||
description="See why top investors and homeowners trust my guidance."
|
||||
testimonials={[
|
||||
{
|
||||
name: "James L.",
|
||||
role: "Investor",
|
||||
quote: "Musa changed the way I view high-end property investment.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-home-with-book_23-2147611420.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elise M.",
|
||||
role: "Homeowner",
|
||||
quote: "The most seamless purchase experience I've ever had.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus R.",
|
||||
role: "CEO",
|
||||
quote: "Unmatched professionalism and expertise in the market.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena S.",
|
||||
role: "Expat Investor",
|
||||
quote: "A truly global standard of service and luxury.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",
|
||||
},
|
||||
{
|
||||
name: "Oliver K.",
|
||||
role: "Developer",
|
||||
quote: "Strategic vision and market understanding beyond compare.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-men-looking-away_23-2148269308.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Networks"
|
||||
title="Trusted Partners"
|
||||
description="Collaborating with industry leaders worldwide."
|
||||
names={[
|
||||
"Forbes Real Estate",
|
||||
"Luxury Daily",
|
||||
"Architectural Digest",
|
||||
"Bloomberg Estate",
|
||||
"Wall Street Journal",
|
||||
"Luxury Living Intl",
|
||||
"Million Dollar Listings",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<SocialProofSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Support"
|
||||
title="Your Property Questions"
|
||||
description="Clear answers to your investment and purchase queries."
|
||||
categories={[
|
||||
{
|
||||
name: "Buying",
|
||||
items: [
|
||||
{
|
||||
question: "How do we start?",
|
||||
answer: "Consultation first.",
|
||||
},
|
||||
{
|
||||
question: "Market trends?",
|
||||
answer: "High demand luxury.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Investment",
|
||||
items: [
|
||||
{
|
||||
question: "ROI potential?",
|
||||
answer: "Sustainable appreciation.",
|
||||
},
|
||||
{
|
||||
question: "Hidden costs?",
|
||||
answer: "Full transparency.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to Start?"
|
||||
text="Join the @musa_realestate_community. Let's find your legacy property today."
|
||||
primaryButton={{
|
||||
text: "Contact on WhatsApp",
|
||||
href: "https://wa.me/yournumber",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Visit Instagram",
|
||||
href: "https://instagram.com/musa_realestate_community",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
22
src/pages/HomePage/sections/About.tsx
Normal file
22
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="About Musa"
|
||||
quote="In the world of real estate, luxury is not just a price point; it is a lifestyle. I curate experiences that transcend expectations."
|
||||
author="Musa"
|
||||
role="Luxury Real Estate Influencer"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to Start?"
|
||||
text="Join the @musa_realestate_community. Let's find your legacy property today."
|
||||
primaryButton={{
|
||||
text: "Contact on WhatsApp",
|
||||
href: "https://wa.me/yournumber",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Visit Instagram",
|
||||
href: "https://instagram.com/musa_realestate_community",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
src/pages/HomePage/sections/Faq.tsx
Normal file
48
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Support"
|
||||
title="Your Property Questions"
|
||||
description="Clear answers to your investment and purchase queries."
|
||||
categories={[
|
||||
{
|
||||
name: "Buying",
|
||||
items: [
|
||||
{
|
||||
question: "How do we start?",
|
||||
answer: "Consultation first.",
|
||||
},
|
||||
{
|
||||
question: "Market trends?",
|
||||
answer: "High demand luxury.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Investment",
|
||||
items: [
|
||||
{
|
||||
question: "ROI potential?",
|
||||
answer: "Sustainable appreciation.",
|
||||
},
|
||||
{
|
||||
question: "Hidden costs?",
|
||||
answer: "Full transparency.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
src/pages/HomePage/sections/FeaturedCarousel.tsx
Normal file
58
src/pages/HomePage/sections/FeaturedCarousel.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "featured-carousel" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FeaturedCarouselSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="featured-carousel" data-section="featured-carousel">
|
||||
<SectionErrorBoundary name="featured-carousel">
|
||||
<FeaturesMediaCarousel
|
||||
tag="Featured Lifestyle"
|
||||
title="Exclusive Property Highlights"
|
||||
description="Explore the finest collection of luxury estates I've curated this year."
|
||||
items={[
|
||||
{
|
||||
title: "Beachfront Elegance",
|
||||
description: "Coastal living at its peak.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-beautiful-building-moroccan-morocco_1203-5629.jpg",
|
||||
},
|
||||
{
|
||||
title: "Skyline Penthouse",
|
||||
description: "Panoramic city views.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-messy-bun-hair-style_23-2149459254.jpg",
|
||||
},
|
||||
{
|
||||
title: "Gourmet Haven",
|
||||
description: "Designed for culinary art.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/whole-fresh-orange-fruits-with-leaves-placed-board_114579-46680.jpg",
|
||||
},
|
||||
{
|
||||
title: "Private Cinema",
|
||||
description: "Ultimate home entertainment.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girls-playing-couch-with-tv_23-2147768102.jpg",
|
||||
},
|
||||
{
|
||||
title: "Spa Retreat",
|
||||
description: "Relaxation in your home.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-design-marble-tile-toilet-bathroom-wardrobe-with-walk-closet_105762-2073.jpg",
|
||||
},
|
||||
{
|
||||
title: "Garden Terrace",
|
||||
description: "Indoor-outdoor seamless flow.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rustic-patio-furniture-house-deck-with-vegetation_23-2150698304.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
106
src/pages/HomePage/sections/Hero.tsx
Normal file
106
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import AvatarGroup from "@/components/ui/AvatarGroup";
|
||||
|
||||
const primaryButton = {
|
||||
href: "#contact",
|
||||
text: "Schedule Consultation"
|
||||
};
|
||||
const secondaryButton = {
|
||||
href: "#properties",
|
||||
text: "View Luxury Listings"
|
||||
};
|
||||
|
||||
type HeroOverlayProps = {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton: { text: string; href: string };
|
||||
secondaryButton: { text: string; href: string };
|
||||
avatarsSrc?: string[];
|
||||
avatarsLabel?: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const HeroInline = () => {
|
||||
return (
|
||||
<section
|
||||
aria-label="Hero section"
|
||||
className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"
|
||||
>
|
||||
<HeroBackgroundSlot />
|
||||
<ImageOrVideo
|
||||
imageSrc={"https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80"}
|
||||
className="absolute inset-0 w-full h-full object-cover rounded-none"
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute z-10 w-[150vw] h-[150vw] left-0 bottom-0 -translate-x-1/2 translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25">
|
||||
<div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
|
||||
<div className="w-fit px-3 py-1 mb-1 text-sm card rounded border border-primary-cta/30 bg-primary-cta/10 backdrop-blur-sm">
|
||||
<p className="text-primary-cta font-medium tracking-wider uppercase">Musa Real Estate Community</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Transforming Dreams Into Luxury Living"}
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h1"
|
||||
className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-white text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"Helping families, investors and homeowners discover exceptional properties across the United States."}
|
||||
variant="fade"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="text-lg md:text-xl text-white leading-snug text-balance"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap gap-3 mt-2 md:mt-3">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
|
||||
</div>
|
||||
|
||||
<div className="pt-8 mt-8 border-t border-white/20 flex flex-col sm:flex-row items-start sm:items-center gap-6 sm:gap-12">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-primary-cta mb-1">$500M+</div>
|
||||
<div className="text-xs text-white/80 uppercase tracking-wider">Property Sold</div>
|
||||
</div>
|
||||
<div className="hidden sm:block w-px h-10 bg-white/20"></div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-primary-cta mb-1">1,200+</div>
|
||||
<div className="text-xs text-white/80 uppercase tracking-wider">Clients Served</div>
|
||||
</div>
|
||||
<div className="hidden sm:block w-px h-10 bg-white/20"></div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-primary-cta mb-1">15+</div>
|
||||
<div className="text-xs text-white/80 uppercase tracking-wider">Years Experience</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{undefined && undefined.length > 0 && (
|
||||
<div className="mt-3 md:mt-4">
|
||||
<AvatarGroup size="lg" labelClassName="text-primary-cta-text" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<div data-webild-section="hero" id="hero">
|
||||
<HeroInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
src/pages/HomePage/sections/Metrics.tsx
Normal file
40
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsMediaCards
|
||||
tag="Proven Results"
|
||||
title="Market Impact"
|
||||
description="Numbers that build trust and long-term client success."
|
||||
metrics={[
|
||||
{
|
||||
value: "$500M+",
|
||||
title: "Portfolio Value",
|
||||
description: "Managed luxury assets.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/miami-luxury-house_649448-2926.jpg",
|
||||
},
|
||||
{
|
||||
value: "150+",
|
||||
title: "Happy Clients",
|
||||
description: "Exclusive successful deals.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cafe-living-room-loft-style_1150-10726.jpg",
|
||||
},
|
||||
{
|
||||
value: "20%",
|
||||
title: "Average Gain",
|
||||
description: "ROI for our investors.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-white-minimal-kitchen-with-wood-decoration_105762-2211.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Properties.tsx
Normal file
57
src/pages/HomePage/sections/Properties.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "properties" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function PropertiesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="properties" data-section="properties">
|
||||
<SectionErrorBoundary name="properties">
|
||||
<FeaturesImageBento
|
||||
tag="Collection"
|
||||
title="Luxury Real Estate Portfolio"
|
||||
description="Selected residences that define excellence."
|
||||
items={[
|
||||
{
|
||||
title: "The Mansion",
|
||||
description: "Ultimate privacy.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-modern-villa-with-pool-lush-greenery_23-2152008230.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Loft",
|
||||
description: "Industrial luxury.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-white-couch-coffee-table_188544-18668.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Villa",
|
||||
description: "Modern classic.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-kitchen-interior-design_23-2151008651.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Estate",
|
||||
description: "Opulence defined.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500595.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Suite",
|
||||
description: "Refined urban.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-vintage-bathtub_23-2148291600.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Retreat",
|
||||
description: "Quiet luxury.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-architecture-with-swimming-pool_23-2151993728.jpg",
|
||||
},
|
||||
{
|
||||
title: "The Reserve",
|
||||
description: "Secured living.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/layered-glasses-with-shampagne_8353-9952.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/pages/HomePage/sections/SocialProof.tsx
Normal file
29
src/pages/HomePage/sections/SocialProof.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "social-proof" section.
|
||||
|
||||
import React from 'react';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function SocialProofSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Networks"
|
||||
title="Trusted Partners"
|
||||
description="Collaborating with industry leaders worldwide."
|
||||
names={[
|
||||
"Forbes Real Estate",
|
||||
"Luxury Daily",
|
||||
"Architectural Digest",
|
||||
"Bloomberg Estate",
|
||||
"Wall Street Journal",
|
||||
"Luxury Living Intl",
|
||||
"Million Dollar Listings",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Team.tsx
Normal file
37
src/pages/HomePage/sections/Team.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "team" section.
|
||||
|
||||
import React from 'react';
|
||||
import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TeamSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamOverlayCards
|
||||
tag="Advisory Team"
|
||||
title="Meet The Experts"
|
||||
description="Professional support to guarantee your property journey is seamless."
|
||||
members={[
|
||||
{
|
||||
name: "Alex Rivier",
|
||||
role: "Head of Acquisitions",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/latin-amateurs-dancing-salsa_23-2151245222.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Chen",
|
||||
role: "Property Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-with-digital-tablet_1098-651.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Vark",
|
||||
role: "Luxury Legal Advisor",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/real-estate-satisfied-man-rejoicing-founding-perfect-home-apartment-holding-paper-house-model-sta_1258-113657.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Social Proof"
|
||||
title="Client Success Stories"
|
||||
description="See why top investors and homeowners trust my guidance."
|
||||
testimonials={[
|
||||
{
|
||||
name: "James L.",
|
||||
role: "Investor",
|
||||
quote: "Musa changed the way I view high-end property investment.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-home-with-book_23-2147611420.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elise M.",
|
||||
role: "Homeowner",
|
||||
quote: "The most seamless purchase experience I've ever had.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus R.",
|
||||
role: "CEO",
|
||||
quote: "Unmatched professionalism and expertise in the market.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena S.",
|
||||
role: "Expat Investor",
|
||||
quote: "A truly global standard of service and luxury.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",
|
||||
},
|
||||
{
|
||||
name: "Oliver K.",
|
||||
role: "Developer",
|
||||
quote: "Strategic vision and market understanding beyond compare.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-men-looking-away_23-2148269308.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user