315 lines
19 KiB
TypeScript
315 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { MapPin, TrendingUp, Users, MessageCircle, Globe, Award, Lightbulb, CheckCircle, ArrowRight } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="MGI"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Opportunities", id: "opportunities" },
|
|
{ name: "Social", id: "social" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Chat on WhatsApp", href: "https://wa.me/1234567890"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Miami Real Estate, Global Perspective."
|
|
description="MGI helps buyers, investors, and international clients explore curated Miami opportunities through a premium personal-brand experience built on trust, access, and fast communication."
|
|
background={{ variant: "plain" }}
|
|
tag="Miami-Focused"
|
|
tagIcon={MapPin}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Chat on WhatsApp", href: "https://wa.me/1234567890" },
|
|
{ text: "Request Private Consultation", href: "#lead-form" },
|
|
{ text: "View Opportunities", href: "#opportunities" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
carouselItems={[
|
|
{
|
|
id: "carousel-1", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelmodern-man-dressed-elegant-suit-fashion-male-posing-street-background-europe-city-sunset-sunglasses_158538-22400.jpg", imageAlt: "MGI Founder - Miami Global Investment"
|
|
},
|
|
{
|
|
id: "carousel-2", imageSrc: "http://img.b2bpic.net/free-photo/orlando-downtown-dusk_649448-3815.jpg", imageAlt: "Luxury Miami Ocean View Apartment"
|
|
},
|
|
{
|
|
id: "carousel-3", imageSrc: "http://img.b2bpic.net/free-photo/blue-chairs-travel-ocean-umbrella_1203-4636.jpg", imageAlt: "Premium Miami Beachfront Property"
|
|
},
|
|
{
|
|
id: "carousel-4", imageSrc: "http://img.b2bpic.net/free-photo/skyscrapers-towering-bangkok-metropolis-with-big-windows_482257-124394.jpg", imageAlt: "Luxury Miami Downtown Penthouse"
|
|
},
|
|
{
|
|
id: "carousel-5", imageSrc: "http://img.b2bpic.net/free-photo/pool-surrounded-by-palm-trees-near-hotel_181624-16151.jpg", imageAlt: "High-End Miami Beach Residence"
|
|
},
|
|
{
|
|
id: "carousel-6", imageSrc: "http://img.b2bpic.net/free-photo/inspired-woman-with-curly-hairstyle-posing-near-pool-while-chilling-summer-outdoor-portrait-smiling-glad-woman-with-tanned-skin-resting-exotic-resort_197531-20886.jpg", imageAlt: "Premium Miami Waterfront Investment"
|
|
}
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={5000}
|
|
ariaLabel="Hero section with Miami investment opportunities carousel"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<MetricCardTen
|
|
title="Built on Social Trust"
|
|
description="Growing audience credibility across Miami real estate, lifestyle, and investment-focused digital platforms."
|
|
useInvertedBackground={false}
|
|
animationType="opacity"
|
|
textboxLayout="default"
|
|
metrics={[
|
|
{ id: "instagram", title: "Instagram", value: "170K", subtitle: "Followers", category: "Social" },
|
|
{ id: "tiktok", title: "TikTok", value: "70K", subtitle: "Followers", category: "Social" },
|
|
{ id: "youtube", title: "YouTube", value: "220K", subtitle: "Subscribers", category: "Social" },
|
|
{ id: "brand-account", title: "Brand Account", value: "31K", subtitle: "Followers", category: "Social" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="trust-pillars" data-section="trust-pillars">
|
|
<FeatureBento
|
|
title="Why People Trust MGI"
|
|
description="Premium positioning built on selective curation, audience credibility, and direct communication."
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
features={[
|
|
{
|
|
title: "Miami-Focused Expertise", description: "Deep knowledge of Miami's luxury real estate market, investment trends, and neighborhood dynamics. Personalized insights for buyers and investors.", bentoComponent: "reveal-icon", icon: MapPin
|
|
},
|
|
{
|
|
title: "Investment-Minded Curation", description: "Every opportunity is vetted for value, appreciation potential, and alignment with investor goals. No cluttered listings—only selective recommendations.", bentoComponent: "reveal-icon", icon: TrendingUp
|
|
},
|
|
{
|
|
title: "Social Proof & Audience", description: "Proven digital presence with 490K+ engaged followers across Instagram, TikTok, YouTube, and brand accounts. Real credibility from real community.", bentoComponent: "reveal-icon", icon: Users
|
|
},
|
|
{
|
|
title: "Personalized Communication", description: "Direct access via WhatsApp, Instagram DM, or Telegram. Fast, professional responses. No generic templates or slow processes.", bentoComponent: "reveal-icon", icon: MessageCircle
|
|
},
|
|
{
|
|
title: "International-Friendly", description: "Expertise in helping international clients navigate Miami opportunities. Multi-language support and understanding of global investment perspectives.", bentoComponent: "reveal-icon", icon: Globe
|
|
}
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
title="About MGI"
|
|
description="MGI — Miami Global Investment — is a founder-led real estate and investment platform designed for discerning buyers, investors, and international clients who value premium positioning, selective curation, and direct access. We believe Miami's opportunities deserve more than generic listings and slow communication. Our mission is simple: connect trusted people to curated opportunities with speed, confidence, and style. Built on audience trust. Powered by market insight. Driven by results."
|
|
tag="Founder-Led Brand"
|
|
tagIcon={Award}
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelmodern-man-dressed-elegant-suit-fashion-male-posing-street-background-europe-city-sunset-sunglasses_158538-22400.jpg"
|
|
imageAlt="MGI Founder - Premium Miami Real Estate & Investment"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ value: "490K+", title: "Engaged Followers" },
|
|
{ value: "5+", title: "Years in Market" },
|
|
{ value: "Global", title: "Client Base" },
|
|
{ value: "24h", title: "Response Time" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<ProductCardOne
|
|
title="How We Help"
|
|
description="Premium services tailored to your Miami real estate and investment goals."
|
|
useInvertedBackground={true}
|
|
animationType="opacity"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "buy-miami", name: "Buy in Miami", price: "Premium Access", imageSrc: "http://img.b2bpic.net/free-photo/orlando-downtown-dusk_649448-3815.jpg", imageAlt: "Buy in Miami - Curated Properties"
|
|
},
|
|
{
|
|
id: "invest-miami", name: "Invest in Miami", price: "Value Strategy", imageSrc: "http://img.b2bpic.net/free-photo/blue-chairs-travel-ocean-umbrella_1203-4636.jpg", imageAlt: "Invest in Miami - Investment Opportunities"
|
|
},
|
|
{
|
|
id: "relocate", name: "Relocate with Confidence", price: "Full Support", imageSrc: "http://img.b2bpic.net/free-photo/skyscrapers-towering-bangkok-metropolis-with-big-windows_482257-124394.jpg", imageAlt: "Relocate to Miami - Relocation Services"
|
|
},
|
|
{
|
|
id: "new-dev", name: "Explore New Developments", price: "Early Access", imageSrc: "http://img.b2bpic.net/free-photo/pool-surrounded-by-palm-trees-near-hotel_181624-16151.jpg", imageAlt: "New Developments - Miami Projects"
|
|
},
|
|
{
|
|
id: "private-requests", name: "Private Opportunity Requests", price: "Bespoke", imageSrc: "http://img.b2bpic.net/free-photo/inspired-woman-with-curly-hairstyle-posing-near-pool-while-chilling-summer-outdoor-portrait-smiling-glad-woman-with-tanned-skin-resting-exotic-resort_197531-20886.jpg", imageAlt: "Private Opportunities - Custom Matching"
|
|
},
|
|
{
|
|
id: "consultation", name: "Personal Consultation", price: "Direct Access", imageSrc: "http://img.b2bpic.net/free-photo/funny-young-caucasian-woman-with-dark-hair-white-sundress-spends-time-vacation-by-pool-outdoors_197531-32553.jpg", imageAlt: "Consultation - Expert Guidance"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<FeatureBento
|
|
title="How It Works"
|
|
description="Three simple steps from discovery to opportunity."
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
features={[
|
|
{
|
|
title: "1. Share Your Goals", description: "Tell us what you're looking for—whether you're buying, investing, relocating, or exploring. Quick form or direct WhatsApp chat.", bentoComponent: "reveal-icon", icon: Lightbulb
|
|
},
|
|
{
|
|
title: "2. Receive Curated Response", description: "We review your inquiry and share hand-selected opportunities that match your criteria. Premium curation, not endless scrolling.", bentoComponent: "reveal-icon", icon: CheckCircle
|
|
},
|
|
{
|
|
title: "3. Continue & Get Matched", description: "Stay connected via WhatsApp, Instagram, or Telegram. Get matched to the right opportunity or next steps with transparent, fast communication.", bentoComponent: "reveal-icon", icon: ArrowRight
|
|
}
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="opportunities" data-section="opportunities">
|
|
<ProductCardOne
|
|
title="Curated Miami Opportunities"
|
|
description="Selective, premium properties hand-picked for value, location, and potential."
|
|
useInvertedBackground={false}
|
|
animationType="scale-rotate"
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
products={[
|
|
{
|
|
id: "opp-1", name: "Luxury Oceanfront Penthouse", price: "$2.8M", imageSrc: "http://img.b2bpic.net/free-photo/orlando-downtown-dusk_649448-3815.jpg", imageAlt: "Luxury Oceanfront Penthouse - Miami Beach"
|
|
},
|
|
{
|
|
id: "opp-2", name: "Modern Beachfront Condo", price: "$1.95M", imageSrc: "http://img.b2bpic.net/free-photo/blue-chairs-travel-ocean-umbrella_1203-4636.jpg", imageAlt: "Modern Beachfront Condo - Miami"
|
|
},
|
|
{
|
|
id: "opp-3", name: "Downtown Investment Property", price: "$750K", imageSrc: "http://img.b2bpic.net/free-photo/skyscrapers-towering-bangkok-metropolis-with-big-windows_482257-124394.jpg", imageAlt: "Downtown Investment Property - Miami"
|
|
},
|
|
{
|
|
id: "opp-4", name: "New Development - Premium Tower", price: "$1.2M+", imageSrc: "http://img.b2bpic.net/free-photo/pool-surrounded-by-palm-trees-near-hotel_181624-16151.jpg", imageAlt: "New Development - Premium Tower Miami"
|
|
},
|
|
{
|
|
id: "opp-5", name: "Waterfront Villa - Private Estate", price: "$3.5M", imageSrc: "http://img.b2bpic.net/free-photo/inspired-woman-with-curly-hairstyle-posing-near-pool-while-chilling-summer-outdoor-portrait-smiling-glad-woman-with-tanned-skin-resting-exotic-resort_197531-20886.jpg", imageAlt: "Waterfront Villa - Private Estate Miami"
|
|
},
|
|
{
|
|
id: "opp-6", name: "Boutique Investment Opportunity", price: "$890K", imageSrc: "http://img.b2bpic.net/free-photo/funny-young-caucasian-woman-with-dark-hair-white-sundress-spends-time-vacation-by-pool-outdoors_197531-32553.jpg", imageAlt: "Boutique Investment Opportunity - Miami"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Request Full Private List", href: "#lead-form" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="lead-form" data-section="lead-form">
|
|
<ContactFaq
|
|
ctaTitle="Ready to Explore Miami?"
|
|
ctaDescription="Share your goals and connect directly with MGI. Fast, professional, confidential."
|
|
ctaIcon={MessageCircle}
|
|
ctaButton={{ text: "Request Private Consultation", href: "#" }}
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "How do I start buying in Miami?", content: "Share your budget, preferred area, and timeline through our quick form or WhatsApp. We'll send curated opportunities tailored to your needs within 24 hours."
|
|
},
|
|
{
|
|
id: "faq-2", title: "Do you work with international clients?", content: "Yes. We specialize in helping international buyers and investors navigate Miami opportunities. We understand global investment perspectives and can support multi-currency transactions."
|
|
},
|
|
{
|
|
id: "faq-3", title: "Can I request curated opportunities?", content: "Absolutely. That's our specialty. Tell us your criteria and we'll handpick properties that match your goals. No endless scrolling—just premium recommendations."
|
|
},
|
|
{
|
|
id: "faq-4", title: "How quickly do you respond?", content: "Within 24 hours to your preferred contact method: WhatsApp, Instagram DM, or email. We prioritize fast, professional communication."
|
|
},
|
|
{
|
|
id: "faq-5", title: "Can I connect via WhatsApp or Instagram?", content: "Yes, that's preferred. Message us on WhatsApp or Instagram DM for direct, real-time communication. We also support Telegram for community updates."
|
|
},
|
|
{
|
|
id: "faq-6", title: "Do you cover new developments?", content: "Yes. We have early access to new Miami developments and can help you explore launch opportunities before they hit the market."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social" data-section="social">
|
|
<SocialProofOne
|
|
title="Follow MGI Across Platforms"
|
|
description="See Miami opportunities, lifestyle insights, market perspective, and community updates in real time."
|
|
useInvertedBackground={false}
|
|
textboxLayout="default"
|
|
names={["Instagram", "TikTok", "YouTube", "Telegram"]}
|
|
buttons={[
|
|
{ text: "Follow Now", href: "https://instagram.com/mgimiami" }
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Navigation", items: [
|
|
{ label: "Home", href: "#home" },
|
|
{ label: "About MGI", href: "#about" },
|
|
{ label: "Opportunities", href: "#opportunities" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "WhatsApp", href: "https://wa.me/1234567890" },
|
|
{ label: "Instagram", href: "https://instagram.com/mgimiami" },
|
|
{ label: "Telegram", href: "https://t.me/mgimiami" },
|
|
{ label: "Email", href: "mailto:hello@mgimiami.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Disclaimer", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2026 MGI — Miami Global Investment. All rights reserved. Premium real estate and investment platform for Miami-focused buyers, investors, and international clients."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|