Bob AI (stub): Update the website design to incorporate high-quality, full-
This commit is contained in:
kudinDmitriyUp
@@ -1,143 +1,25 @@
|
||||
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TeamOverlayCardsGrid from '@/components/sections/team/TeamOverlayCardsGrid';
|
||||
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; this shell only fixes render order.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import SocialProofSection from './HomePage/sections/SocialProof';
|
||||
import TeamSection from './HomePage/sections/Team';
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
|
||||
|
||||
{/* webild-stub @2026-06-13T11:10:03.042Z: Update the website design to incorporate high-quality, full-width, cinematic background photography of Algerian landscapes and architecture for all major sections, ensuring no generic stock images or people are used. Implement a luxury trav */}
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardBrand
|
||||
brand="Gili Travel"
|
||||
description="Discover Algeria Through Unforgettable Journeys. Explore breathtaking landscapes, rich culture, and authentic experiences across Algeria."
|
||||
primaryButton={{
|
||||
text: "Explore Destinations",
|
||||
href: "/destinations",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Request Information",
|
||||
href: "/contact",
|
||||
}}
|
||||
imageSrc="https://images.pexels.com/photos/4011190/pexels-photo-4011190.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsMediaCards
|
||||
tag="Our Impact"
|
||||
title="Why Choose Us"
|
||||
description="Trusted by travelers worldwide for premium Algerian experiences."
|
||||
metrics={[
|
||||
{
|
||||
value: "4.9/5",
|
||||
title: "Rating",
|
||||
description: "Based on 160+ guest reviews",
|
||||
imageSrc: "https://images.pexels.com/photos/8826278/pexels-photo-8826278.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Organization",
|
||||
description: "Professional planning for every journey",
|
||||
imageSrc: "https://images.pexels.com/photos/36885277/pexels-photo-36885277.png?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted By"
|
||||
title="World-Class Travelers"
|
||||
description="Our journeys are designed for discerning adventurers."
|
||||
names={[
|
||||
"Explorer Magazine",
|
||||
"Travel Weekly",
|
||||
"Wanderlust Guide",
|
||||
"Culture Trip",
|
||||
"Global Nomads",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamOverlayCardsGrid
|
||||
tag="Our Experts"
|
||||
title="Meet The Team"
|
||||
description="Our dedicated specialists in Algerian tourism."
|
||||
members={[
|
||||
{
|
||||
name: "Sarah Ahmed",
|
||||
role: "Lead Guide",
|
||||
imageSrc: "https://images.pexels.com/photos/8111887/pexels-photo-8111887.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
name: "Karim Bellal",
|
||||
role: "Heritage Expert",
|
||||
imageSrc: "https://images.pexels.com/photos/5699475/pexels-photo-5699475.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
name: "Amira Ziani",
|
||||
role: "Logistics Manager",
|
||||
imageSrc: "https://images.pexels.com/photos/8871934/pexels-photo-8871934.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingSplitCards
|
||||
tag="Pricing"
|
||||
title="Premium Experience Options"
|
||||
description="Choose the level of service that fits your requirements."
|
||||
plans={[
|
||||
{
|
||||
tag: "Standard",
|
||||
price: "Starting from $1,200",
|
||||
period: "/ person",
|
||||
description: "Classic itinerary covering major sites.",
|
||||
primaryButton: {
|
||||
text: "Book",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes:",
|
||||
features: [
|
||||
"Transport",
|
||||
"Accommodation",
|
||||
"Breakfast",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Premium",
|
||||
price: "Starting from $2,500",
|
||||
period: "/ person",
|
||||
description: "Handcrafted experience with luxury touches.",
|
||||
primaryButton: {
|
||||
text: "Book",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes:",
|
||||
features: [
|
||||
"Private transport",
|
||||
"Luxury Riads",
|
||||
"Expert historians",
|
||||
"Full board",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<HeroSection />
|
||||
<MetricsSection />
|
||||
<SocialProofSection />
|
||||
<TeamSection />
|
||||
<PricingSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
28
src/pages/HomePage/sections/Hero.tsx
Normal file
28
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
// 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 HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardBrand
|
||||
brand="Gili Travel"
|
||||
description="Discover Algeria Through Unforgettable Journeys. Explore breathtaking landscapes, rich culture, and authentic experiences across Algeria."
|
||||
primaryButton={{
|
||||
text: "Explore Destinations",
|
||||
href: "/destinations",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Request Information",
|
||||
href: "/contact",
|
||||
}}
|
||||
imageSrc="https://images.pexels.com/photos/4011190/pexels-photo-4011190.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
|
||||
/>
|
||||
</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="Our Impact"
|
||||
title="Why Choose Us"
|
||||
description="Trusted by travelers worldwide for premium Algerian experiences."
|
||||
metrics={[
|
||||
{
|
||||
value: "4.9/5",
|
||||
title: "Rating",
|
||||
description: "Based on 160+ guest reviews",
|
||||
imageSrc: "https://images.pexels.com/photos/8826278/pexels-photo-8826278.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Organization",
|
||||
description: "Professional planning for every journey",
|
||||
imageSrc: "https://images.pexels.com/photos/36885277/pexels-photo-36885277.png?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
src/pages/HomePage/sections/Pricing.tsx
Normal file
55
src/pages/HomePage/sections/Pricing.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "pricing" section.
|
||||
|
||||
import React from 'react';
|
||||
import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function PricingSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingSplitCards
|
||||
tag="Pricing"
|
||||
title="Premium Experience Options"
|
||||
description="Choose the level of service that fits your requirements."
|
||||
plans={[
|
||||
{
|
||||
tag: "Standard",
|
||||
price: "Starting from $1,200",
|
||||
period: "/ person",
|
||||
description: "Classic itinerary covering major sites.",
|
||||
primaryButton: {
|
||||
text: "Book",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes:",
|
||||
features: [
|
||||
"Transport",
|
||||
"Accommodation",
|
||||
"Breakfast",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Premium",
|
||||
price: "Starting from $2,500",
|
||||
period: "/ person",
|
||||
description: "Handcrafted experience with luxury touches.",
|
||||
primaryButton: {
|
||||
text: "Book",
|
||||
href: "/contact",
|
||||
},
|
||||
featuresTitle: "Includes:",
|
||||
features: [
|
||||
"Private transport",
|
||||
"Luxury Riads",
|
||||
"Expert historians",
|
||||
"Full board",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/SocialProof.tsx
Normal file
27
src/pages/HomePage/sections/SocialProof.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 "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="Trusted By"
|
||||
title="World-Class Travelers"
|
||||
description="Our journeys are designed for discerning adventurers."
|
||||
names={[
|
||||
"Explorer Magazine",
|
||||
"Travel Weekly",
|
||||
"Wanderlust Guide",
|
||||
"Culture Trip",
|
||||
"Global Nomads",
|
||||
]}
|
||||
/>
|
||||
</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 TeamOverlayCardsGrid from '@/components/sections/team/TeamOverlayCardsGrid';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TeamSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamOverlayCardsGrid
|
||||
tag="Our Experts"
|
||||
title="Meet The Team"
|
||||
description="Our dedicated specialists in Algerian tourism."
|
||||
members={[
|
||||
{
|
||||
name: "Sarah Ahmed",
|
||||
role: "Lead Guide",
|
||||
imageSrc: "https://images.pexels.com/photos/8111887/pexels-photo-8111887.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
name: "Karim Bellal",
|
||||
role: "Heritage Expert",
|
||||
imageSrc: "https://images.pexels.com/photos/5699475/pexels-photo-5699475.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
name: "Amira Ziani",
|
||||
role: "Logistics Manager",
|
||||
imageSrc: "https://images.pexels.com/photos/8871934/pexels-photo-8871934.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user