Compare commits
8 Commits
version_4_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| a8338d6158 | |||
|
9b287500ff | ||
| 0acb7f04ab | |||
|
|
bc71487230 | ||
| 45ec76d5bb | |||
| 50f4b8e424 | |||
| 0bc20f359f | |||
| c61c1de0d7 |
@@ -1,298 +1,39 @@
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
|
||||
import TeamStackedCards from '@/components/sections/team/TeamStackedCards';
|
||||
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
||||
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 FeaturesSection from './HomePage/sections/Features';
|
||||
import ComparisonSection from './HomePage/sections/Comparison';
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TeamSection from './HomePage/sections/Team';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplit
|
||||
tag="Vacation Rental Redefined"
|
||||
title="Find your next escape with VacationMarket"
|
||||
description="Browse thousands of unique homes, villas, and apartments for your next adventure. Join a global community of travelers and hosts."
|
||||
primaryButton={{
|
||||
text: "Explore Stays",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Become a Host",
|
||||
href: "#",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/luxury-villa-with-infinity-pool-ocean-view_23-2151974411.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="The Host Perspective"
|
||||
quote="VacationMarket changed how I manage my property rentals. The dashboard is intuitive, and the support from the team is unparalleled."
|
||||
author="Elena Rodriguez"
|
||||
role="Superhost & Property Manager"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/neat-office-with-computer-worker_482257-119323.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesImageBento
|
||||
tag="Explore Unique Stays"
|
||||
title="Premium properties worldwide"
|
||||
description="From coastal retreats to urban lofts, discover homes that provide unforgettable experiences."
|
||||
items={[
|
||||
{
|
||||
title: "Penthouse",
|
||||
description: "Urban luxury living",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-parisian-boutique-hotel-room-with-vintage-yellow-rotary-phone_1308-190376.jpg",
|
||||
},
|
||||
{
|
||||
title: "Beach Villa",
|
||||
description: "Coastal ocean view",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-relaxing-around-swimming-pool-resort-hotel-vacation_74190-16335.jpg",
|
||||
},
|
||||
{
|
||||
title: "Mountain Cabin",
|
||||
description: "Cozy forest retreat",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-listening-music-drawing_23-2147770013.jpg",
|
||||
},
|
||||
{
|
||||
title: "Chalet",
|
||||
description: "Panoramic mountain view",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cliffside-infinity-pool-overlooking-mountain-vista_23-2152008200.jpg",
|
||||
},
|
||||
{
|
||||
title: "Modern Loft",
|
||||
description: "Style and convenience",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-woman-after-shower-towel-stands-balcony-villa-drink-coffee-tea-perfect-start-day-calm-relaxed-female-meets-new-day_343596-2053.jpg",
|
||||
},
|
||||
{
|
||||
title: "Beach Bungalow",
|
||||
description: "Tropical paradise stay",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/indoor-plants-terracotta-pots-archway_23-2151972879.jpg",
|
||||
},
|
||||
{
|
||||
title: "Luxury Suite",
|
||||
description: "High end professional",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-nature-lover-businessman-meeting-with-colleagues-online-video-call_482257-120447.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturesSection />
|
||||
|
||||
<div id="comparison" data-section="comparison">
|
||||
<SectionErrorBoundary name="comparison">
|
||||
<FeaturesComparison
|
||||
tag="Why VacationMarket?"
|
||||
title="Built for modern travel"
|
||||
description="We offer a superior platform experience for both guests and property hosts compared to standard booking portals."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
}}
|
||||
negativeItems={[
|
||||
"High service fees",
|
||||
"Hidden costs",
|
||||
"Slow support response",
|
||||
"Manual booking process",
|
||||
]}
|
||||
positiveItems={[
|
||||
"Transparent pricing",
|
||||
"Zero booking fees",
|
||||
"24/7 expert support",
|
||||
"Instant booking confirmed",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ComparisonSection />
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingHighlightedCards
|
||||
tag="For Property Hosts"
|
||||
title="Professional hosting plans"
|
||||
description="Scale your rental business with our professional host tools and analytics."
|
||||
plans={[
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$0",
|
||||
description: "Basic listing management.",
|
||||
features: [
|
||||
"1 Listing",
|
||||
"Standard support",
|
||||
"Stripe integration",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Start Free",
|
||||
href: "#",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Professional",
|
||||
price: "$49/mo",
|
||||
highlight: "Best Value",
|
||||
description: "For growing rental businesses.",
|
||||
features: [
|
||||
"Unlimited listings",
|
||||
"Priority support",
|
||||
"Revenue analytics",
|
||||
"Custom branding",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Join Pro",
|
||||
href: "#",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Enterprise",
|
||||
price: "Custom",
|
||||
description: "For large rental portfolios.",
|
||||
features: [
|
||||
"Dedicated account manager",
|
||||
"API access",
|
||||
"Bulk operations",
|
||||
"Custom payouts",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<PricingSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsMediaCards
|
||||
tag="Proven Impact"
|
||||
title="Driving success for hosts"
|
||||
description="Our platform empowers hosts to maximize occupancy and revenue efficiently."
|
||||
metrics={[
|
||||
{
|
||||
value: "2.5M+",
|
||||
title: "Guest Bookings",
|
||||
description: "Thousands of successful stays facilitated worldwide annually.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barefooted-girl-drinking-cocktail-window-sill-attractive-young-lady-wears-leg-bracelet-posing-with-amazing-smile_197531-9239.jpg",
|
||||
},
|
||||
{
|
||||
value: "150k+",
|
||||
title: "Host Partners",
|
||||
description: "An expanding network of professional hosts and property managers.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-french-food-world-tourism-day_23-2149114060.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamStackedCards
|
||||
tag="Meet the Team"
|
||||
title="Engineered for excellence"
|
||||
description="Our team is dedicated to building the future of vacation rentals."
|
||||
members={[
|
||||
{
|
||||
name: "Alex Jensen",
|
||||
role: "CEO & Founder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-man-with-wine-glass-night-club_23-2148037554.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
role: "Operations Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-grey-haired-female-ceo-smiling-content-experienced-beautiful-businesswoman-posing-office-room-business-company-appearance-expression-concept_74855-11905.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Wu",
|
||||
role: "CTO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tech-people-trying-achieve-ambitious-sustainability-goals_23-2150950222.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TeamSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialTrustCard
|
||||
quote="VacationMarket is the gold standard for travel experiences. The ease of booking and quality of hosts is exceptional. I wouldn't use any other platform."
|
||||
rating={5}
|
||||
author="Jordan Smith"
|
||||
avatars={[
|
||||
{
|
||||
name: "User 1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-person-decorating-christmas-tree_1048-17677.jpg",
|
||||
},
|
||||
{
|
||||
name: "User 2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-portrait-beautiful-cheerful-young-female-model-with-bobbed-hairstyle-pleasant-gentle-smile-healthy-skin-wears-green-sweater_273609-3528.jpg",
|
||||
},
|
||||
{
|
||||
name: "User 3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-handsome-modern-man-wearing-glasses-denim-jacket-yellow-background-with-happy-face-standing-smiling-with-confident-smile-showing-teeth_839833-30354.jpg",
|
||||
},
|
||||
{
|
||||
name: "User 4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-portrait-cheerful-woman-with-appealing-smile-having-pinkish-hair-bun-tattoo-wearing-casual-clothes_273609-307.jpg",
|
||||
},
|
||||
{
|
||||
name: "User 5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-person-holding-rose-valentines_1048-17887.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Help Center"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find everything you need to know about booking or hosting on VacationMarket."
|
||||
categories={[
|
||||
{
|
||||
name: "Guests",
|
||||
items: [
|
||||
{
|
||||
question: "How do I book a stay?",
|
||||
answer: "Browse our properties, select your dates, and click 'Book Now' to complete your reservation.",
|
||||
},
|
||||
{
|
||||
question: "Is booking secure?",
|
||||
answer: "Yes, we use Stripe for secure payment processing and identity verification.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Hosts",
|
||||
items: [
|
||||
{
|
||||
question: "How do I list my property?",
|
||||
answer: "Sign up for a host account, upload your photos, and set your availability calendar.",
|
||||
},
|
||||
{
|
||||
question: "When do I get paid?",
|
||||
answer: "Payouts are processed 24 hours after your guest successfully checks in.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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="The Host Perspective"
|
||||
quote="VacationMarket changed how I manage my property rentals. The dashboard is intuitive, and the support from the team is unparalleled."
|
||||
author="Elena Rodriguez"
|
||||
role="Superhost & Property Manager"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/neat-office-with-computer-worker_482257-119323.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
src/pages/HomePage/sections/Comparison.tsx
Normal file
36
src/pages/HomePage/sections/Comparison.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "comparison" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ComparisonSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="comparison" data-section="comparison">
|
||||
<SectionErrorBoundary name="comparison">
|
||||
<FeaturesComparison
|
||||
tag="Why VacationMarket?"
|
||||
title="Built for modern travel"
|
||||
description="We offer a superior platform experience for both guests and property hosts compared to standard booking portals."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
}}
|
||||
negativeItems={[
|
||||
"High service fees",
|
||||
"Hidden costs",
|
||||
"Slow support response",
|
||||
"Manual booking process",
|
||||
]}
|
||||
positiveItems={[
|
||||
"Transparent pricing",
|
||||
"Zero booking fees",
|
||||
"24/7 expert support",
|
||||
"Instant booking confirmed",
|
||||
]}
|
||||
/>
|
||||
</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="Help Center"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find everything you need to know about booking or hosting on VacationMarket."
|
||||
categories={[
|
||||
{
|
||||
name: "Guests",
|
||||
items: [
|
||||
{
|
||||
question: "How do I book a stay?",
|
||||
answer: "Browse our properties, select your dates, and click 'Book Now' to complete your reservation.",
|
||||
},
|
||||
{
|
||||
question: "Is booking secure?",
|
||||
answer: "Yes, we use Stripe for secure payment processing and identity verification.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Hosts",
|
||||
items: [
|
||||
{
|
||||
question: "How do I list my property?",
|
||||
answer: "Sign up for a host account, upload your photos, and set your availability calendar.",
|
||||
},
|
||||
{
|
||||
question: "When do I get paid?",
|
||||
answer: "Payouts are processed 24 hours after your guest successfully checks in.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Features.tsx
Normal file
57
src/pages/HomePage/sections/Features.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 "features" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FeaturesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesImageBento
|
||||
tag="Explore Unique Stays"
|
||||
title="Premium properties worldwide"
|
||||
description="From coastal retreats to urban lofts, discover homes that provide unforgettable experiences."
|
||||
items={[
|
||||
{
|
||||
title: "Penthouse",
|
||||
description: "Urban luxury living",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-parisian-boutique-hotel-room-with-vintage-yellow-rotary-phone_1308-190376.jpg",
|
||||
},
|
||||
{
|
||||
title: "Beach Villa",
|
||||
description: "Coastal ocean view",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-relaxing-around-swimming-pool-resort-hotel-vacation_74190-16335.jpg",
|
||||
},
|
||||
{
|
||||
title: "Mountain Cabin",
|
||||
description: "Cozy forest retreat",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-listening-music-drawing_23-2147770013.jpg",
|
||||
},
|
||||
{
|
||||
title: "Chalet",
|
||||
description: "Panoramic mountain view",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cliffside-infinity-pool-overlooking-mountain-vista_23-2152008200.jpg",
|
||||
},
|
||||
{
|
||||
title: "Modern Loft",
|
||||
description: "Style and convenience",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-woman-after-shower-towel-stands-balcony-villa-drink-coffee-tea-perfect-start-day-calm-relaxed-female-meets-new-day_343596-2053.jpg",
|
||||
},
|
||||
{
|
||||
title: "Beach Bungalow",
|
||||
description: "Tropical paradise stay",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/indoor-plants-terracotta-pots-archway_23-2151972879.jpg",
|
||||
},
|
||||
{
|
||||
title: "Luxury Suite",
|
||||
description: "High end professional",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-nature-lover-businessman-meeting-with-colleagues-online-video-call_482257-120447.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/pages/HomePage/sections/Hero.tsx
Normal file
29
src/pages/HomePage/sections/Hero.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 "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplit
|
||||
tag="Vacation Rental Redefined"
|
||||
title="Find your next escape with VacationMarket"
|
||||
description="Discover thousands of unique homes with zero booking fees for your next getaway."
|
||||
primaryButton={{
|
||||
text: "Explore Stays",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Become a Host",
|
||||
href: "#",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/luxury-villa-with-infinity-pool-ocean-view_23-2151974411.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
src/pages/HomePage/sections/Metrics.tsx
Normal file
34
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
// 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 Impact"
|
||||
title="Driving success for hosts"
|
||||
description="Our platform empowers hosts to maximize occupancy and revenue efficiently."
|
||||
metrics={[
|
||||
{
|
||||
value: "2.5M+",
|
||||
title: "Guest Bookings",
|
||||
description: "Thousands of successful stays facilitated worldwide annually.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barefooted-girl-drinking-cocktail-window-sill-attractive-young-lady-wears-leg-bracelet-posing-with-amazing-smile_197531-9239.jpg",
|
||||
},
|
||||
{
|
||||
value: "150k+",
|
||||
title: "Host Partners",
|
||||
description: "An expanding network of professional hosts and property managers.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-french-food-world-tourism-day_23-2149114060.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
146
src/pages/HomePage/sections/Pricing.tsx
Normal file
146
src/pages/HomePage/sections/Pricing.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import { Check } from "lucide-react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
const plans = [
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$0",
|
||||
description: "Basic listing management.",
|
||||
features: [
|
||||
"1 Listing",
|
||||
"Standard support",
|
||||
"Stripe integration"
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Start Free",
|
||||
href: "#"
|
||||
}
|
||||
},
|
||||
{
|
||||
tag: "Professional",
|
||||
price: "$49/mo",
|
||||
highlight: "Maximize Your ROI",
|
||||
description: "For growing rental businesses.",
|
||||
features: [
|
||||
"Unlimited listings",
|
||||
"Priority support",
|
||||
"Revenue analytics",
|
||||
"Custom branding"
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Join Pro",
|
||||
href: "#"
|
||||
}
|
||||
},
|
||||
{
|
||||
tag: "Enterprise",
|
||||
price: "Custom",
|
||||
description: "For large rental portfolios.",
|
||||
features: [
|
||||
"Dedicated account manager",
|
||||
"API access",
|
||||
"Bulk operations",
|
||||
"Custom payouts"
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Contact Us",
|
||||
href: "#"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
type PricingPlan = {
|
||||
tag: string;
|
||||
price: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
highlight?: string;
|
||||
primaryButton: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
};
|
||||
|
||||
const PricingInline = () => (
|
||||
<section aria-label="Pricing section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"For Property Hosts"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Professional hosting plans"}
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"Scale your rental business with our professional host tools and analytics."}
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
|
||||
{(undefined || undefined) && (
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="fade-blur">
|
||||
<GridOrCarousel>
|
||||
{plans.map((plan) => (
|
||||
<div key={plan.tag} className="flex flex-col h-full">
|
||||
<div className={cls("px-5 py-2 text-base", plan.highlight ? "text-center primary-button rounded-t text-primary-cta-text" : "invisible")}>
|
||||
{plan.highlight || "placeholder"}
|
||||
</div>
|
||||
|
||||
<div className={cls("flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 flex-1 card text-center", plan.highlight ? "rounded-t-none rounded-b" : "rounded")}>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-5xl md:text-6xl font-semibold">{plan.price}</span>
|
||||
<span className="text-base font-medium">{plan.tag}</span>
|
||||
</div>
|
||||
|
||||
<div className="h-px w-full bg-foreground/20" />
|
||||
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
{plan.features.map((feature) => (
|
||||
<div key={feature} className="flex items-start gap-3">
|
||||
<div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
|
||||
<Check className="size-3 text-primary-cta-text" strokeWidth={2} />
|
||||
</div>
|
||||
<span className="text-base text-left">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 w-full mt-auto">
|
||||
<Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-full" />
|
||||
{plan.secondaryButton && <Button text={plan.secondaryButton.text} href={plan.secondaryButton.href} variant="secondary" className="w-full" />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default function PricingSection() {
|
||||
return (
|
||||
<div data-webild-section="pricing" id="pricing">
|
||||
<PricingInline />
|
||||
</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 TeamStackedCards from '@/components/sections/team/TeamStackedCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TeamSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamStackedCards
|
||||
tag="Meet the Team"
|
||||
title="Engineered for excellence"
|
||||
description="Our team is dedicated to building the future of vacation rentals."
|
||||
members={[
|
||||
{
|
||||
name: "Alex Jensen",
|
||||
role: "CEO & Founder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-man-with-wine-glass-night-club_23-2148037554.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
role: "Operations Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-grey-haired-female-ceo-smiling-content-experienced-beautiful-businesswoman-posing-office-room-business-company-appearance-expression-concept_74855-11905.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Wu",
|
||||
role: "CTO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tech-people-trying-achieve-ambitious-sustainability-goals_23-2150950222.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
src/pages/HomePage/sections/Testimonials.tsx
Normal file
42
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
// 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 TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialTrustCard
|
||||
quote="VacationMarket is the gold standard for travel experiences. The ease of booking and quality of hosts is exceptional. I wouldn't use any other platform."
|
||||
rating={5}
|
||||
author="Jordan Smith"
|
||||
avatars={[
|
||||
{
|
||||
name: "User 1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-person-decorating-christmas-tree_1048-17677.jpg",
|
||||
},
|
||||
{
|
||||
name: "User 2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-portrait-beautiful-cheerful-young-female-model-with-bobbed-hairstyle-pleasant-gentle-smile-healthy-skin-wears-green-sweater_273609-3528.jpg",
|
||||
},
|
||||
{
|
||||
name: "User 3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-handsome-modern-man-wearing-glasses-denim-jacket-yellow-background-with-happy-face-standing-smiling-with-confident-smile-showing-teeth_839833-30354.jpg",
|
||||
},
|
||||
{
|
||||
name: "User 4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-portrait-cheerful-woman-with-appealing-smile-having-pinkish-hair-bun-tattoo-wearing-casual-clothes_273609-307.jpg",
|
||||
},
|
||||
{
|
||||
name: "User 5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-person-holding-rose-valentines_1048-17887.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user