bender/15c4760c-5532-488d-8fb2-ca2df1bce2ea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Added certifications section with icon cards

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-06-15 01:11:46 +00:00
parent ee68ff95b8
commit e988ca07d4
9 changed files with 287 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/pages/HomePage.tsx
View File

@@ -1,132 +1,35 @@
import AboutText from '@/components/sections/about/AboutText';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqSimple from '@/components/sections/faq/FaqSimple';
import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
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 MetricsSection from './HomePage/sections/Metrics';
import TestimonialsSection from './HomePage/sections/Testimonials';
import FaqSection from './HomePage/sections/Faq';
import ContactSection from './HomePage/sections/Contact';
import CertificationsSection from './HomePage/sections/Certifications';export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroCenteredLogos
avatarsSrc={[
"http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-71154.jpg", "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-fleece-shirt-drinks-coffee-hairdresser-s-salon_613910-5677.jpg", "http://img.b2bpic.net/free-photo/glad-curly-haired-afro-american-woman-drinks-aromatic-coffee-from-disposable-cup-has-interesting-happy-conversation-smiles-toothily-wears-casual-clothes-isolated-vivid-green-wall_273609-39736.jpg", "http://img.b2bpic.net/free-photo/man-with-mug_23-2147646630.jpg", "http://img.b2bpic.net/free-photo/smiley-colleagues-work-break-time_23-2149308456.jpg"]}
avatarText="Loved by 500+ locals"
title="Experience the Art of Specialty Coffee"
description="Crafting premium experiences with every single cup. We source the finest beans globally for a truly artisanal coffee journey in the heart of the city."
primaryButton={{
text: "Our Menu", href: "#features"}}
secondaryButton={{
text: "Visit Us", href: "#contact"}}
names={[
"The Morning Bean", "The City Cup", "Brew Daily", "Artisan Roast", "Bean Expert"]}
imageSrc="http://img.b2bpic.net/free-photo/coffee-machine-making-perfect-cup-coffee_23-2151699653.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutText
title="Our Commitment to Quality"
primaryButton={{
text: "Learn More", href: "#"}}
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesMediaCarousel
tag="Our Craft"
title="Why We Are Unique"
description="From bean to cup, every step is carefully curated to offer excellence."
items={[
{
title: "Premium Sourced Beans", description: "Sourced globally from sustainable farms.", buttonIcon: "Coffee", imageSrc: "http://img.b2bpic.net/free-photo/energy-coffee-seed-food-aroma_1172-470.jpg"},
{
title: "Master Baristas", description: "Our experts ensure the perfect pour.", buttonIcon: "Zap", imageSrc: "http://img.b2bpic.net/free-photo/professional-barista-pouring-latte-foam-coffee-caf_23-2148209229.jpg"},
{
title: "Artisanal Ambiance", description: "A relaxing sanctuary for your morning.", buttonIcon: "Heart", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-drinking-coffee_23-2148395430.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<FeaturesSection />
<CertificationsSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Impact"
title="Our Coffee Journey"
description="We are proud of our contributions to local coffee culture."
metrics={[
{
value: "10k+", description: "Cups Served Annually"},
{
value: "15+", description: "Origin Regions"},
{
value: "5", description: "Years of Excellence"},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialQuoteCards
tag="Feedback"
title="What Our Community Says"
description="Building lasting connections with our neighbors."
testimonials={[
{
name: "Sarah J.", role: "Local Professional", quote: "The coffee quality is unmatched. Truly premium experience.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-shopping-clothes_23-2149187300.jpg"},
{
name: "Michael D.", role: "Coffee Enthusiast", quote: "Love the atmosphere and the passion of the baristas.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-kebab_23-2148773545.jpg"},
{
name: "Emily R.", role: "Digital Nomad", quote: "Perfect spot to work and enjoy a perfect cup.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-with-copy-space_23-2148819859.jpg"},
{
name: "David K.", role: "Frequent Visitor", quote: "The beans are exceptional. A staple for my mornings.", imageSrc: "http://img.b2bpic.net/free-photo/humorous-talks-with-close-friends-dinner-hot-spring-day-cafe_8353-10001.jpg"},
{
name: "Linda M.", role: "Neighborhood Resident", quote: "They truly care about the quality. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/sensual-confident-woman-stylish-clothes-enjoying-coffee-coffeeshop-attractive-female-model-sitting-cafe-having-lunch-with-admirer-smiling-look-away-pleased-breakfast-outdoor-restaurant_197531-30517.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSimple
tag="Common Questions"
title="How Can We Help?"
description="Get answers to common questions about our coffee, services, and commitment to quality."
items={[
{
question: "Do you offer specialty teas?", answer: "Yes, we are actively expanding our tea selection to offer a variety of high-quality options very soon."},
{
question: "Why the premium pricing?", answer: "We invest in high-grade sustainable beans and expert craftsmanship to ensure a superior experience."},
{
question: "Do you have local roasting?", answer: "We partner with top-tier local roasters to guarantee freshness."},
]}
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Visit Us"
text="Visit us at Khamis Mushait, Riyadh Road for an unforgettable coffee journey."
primaryButton={{
text: "Get Directions", href: "#"}}
secondaryButton={{
text: "Contact Us", href: "#"}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

20
src/pages/HomePage/sections/About.tsx Normal file
View File

@@ -0,0 +1,20 @@
// 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 AboutText from '@/components/sections/about/AboutText';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutText
title="Our Commitment to Quality"
primaryButton={{
text: "Learn More", href: "#"}}
/>
</SectionErrorBoundary>
</div>
);
}

75
src/pages/HomePage/sections/Certifications.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { Leaf, Globe, Award, Newspaper } from "lucide-react";
import Tag from "@/components/ui/Tag";
import TextAnimation from "@/components/ui/TextAnimation";
import ScrollReveal from "@/components/ui/ScrollReveal";
import Card from "@/components/ui/Card";
export default function CertificationsSection() {
const features = [
{
icon: Leaf,
title: "100% Organic",
description: "Grown without synthetic fertilizers or pesticides, ensuring a pure and natural flavor profile."
},
{
icon: Globe,
title: "Fair Trade Certified",
description: "We ensure fair compensation and safe working conditions for all our partner farmers globally."
},
{
icon: Award,
title: "Award-Winning Roasts",
description: "Recognized by the Specialty Coffee Association for outstanding roast profiles and cup quality."
},
{
icon: Newspaper,
title: "Press Mentions",
description: "Praised by The Daily Brew, Coffee Connoisseur, and Artisan Lifestyle Magazine."
}
];
return (
<section data-webild-section="certifications" id="certifications" className="relative w-full py-24 bg-background">
<div className="w-content-width mx-auto px-6">
<div className="flex flex-col items-center text-center max-w-3xl mx-auto mb-16">
<ScrollReveal variant="fade">
<Tag text="Quality & Trust" className="mb-4" />
</ScrollReveal>
<TextAnimation
text="Certified Excellence"
variant="fade-blur"
tag="h2"
gradientText={false}
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
/>
<ScrollReveal variant="fade" delay={0.2}>
<p className="text-lg text-muted-foreground">
We are committed to sustainable practices and unparalleled quality. Our coffee is recognized by leading industry standards and featured in top publications.
</p>
</ScrollReveal>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{features.map((feature, index) => {
const Icon = feature.icon;
return (
<ScrollReveal variant="fade" key={index} delay={0.1 * index} className="h-full">
<Card className="p-8 h-full flex flex-col items-start bg-card">
<div className="w-12 h-12 rounded-full bg-background flex items-center justify-center mb-6">
<Icon className="w-6 h-6 text-foreground" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-3">
{feature.title}
</h3>
<p className="text-muted-foreground leading-relaxed">
{feature.description}
</p>
</Card>
</ScrollReveal>
);
})}
</div>
</div>
</section>
);
}

23
src/pages/HomePage/sections/Contact.tsx Normal file
View File

@@ -0,0 +1,23 @@
// 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="Visit Us"
text="Visit us at Khamis Mushait, Riyadh Road for an unforgettable coffee journey."
primaryButton={{
text: "Get Directions", href: "#"}}
secondaryButton={{
text: "Contact Us", href: "#"}}
/>
</SectionErrorBoundary>
</div>
);
}

28
src/pages/HomePage/sections/Faq.tsx Normal file
View File

@@ -0,0 +1,28 @@
// 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 FaqSimple from '@/components/sections/faq/FaqSimple';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSimple
tag="Common Questions"
title="How Can We Help?"
description="Get answers to common questions about our coffee, services, and commitment to quality."
items={[
{
question: "Do you offer specialty teas?", answer: "Yes, we are actively expanding our tea selection to offer a variety of high-quality options very soon."},
{
question: "Why the premium pricing?", answer: "We invest in high-grade sustainable beans and expert craftsmanship to ensure a superior experience."},
{
question: "Do you have local roasting?", answer: "We partner with top-tier local roasters to guarantee freshness."},
]}
/>
</SectionErrorBoundary>
</div>
);
}

28
src/pages/HomePage/sections/Features.tsx Normal file
View File

@@ -0,0 +1,28 @@
// 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 FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FeaturesSection(): React.JSX.Element {
return (
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesMediaCarousel
tag="Our Craft"
title="Why We Are Unique"
description="From bean to cup, every step is carefully curated to offer excellence."
items={[
{
title: "Premium Sourced Beans", description: "Sourced globally from sustainable farms.", buttonIcon: "Coffee", imageSrc: "http://img.b2bpic.net/free-photo/energy-coffee-seed-food-aroma_1172-470.jpg"},
{
title: "Master Baristas", description: "Our experts ensure the perfect pour.", buttonIcon: "Zap", imageSrc: "http://img.b2bpic.net/free-photo/professional-barista-pouring-latte-foam-coffee-caf_23-2148209229.jpg"},
{
title: "Artisanal Ambiance", description: "A relaxing sanctuary for your morning.", buttonIcon: "Heart", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-drinking-coffee_23-2148395430.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

29
src/pages/HomePage/sections/Hero.tsx Normal file
View 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 HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroCenteredLogos
avatarsSrc={[
"http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-71154.jpg", "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-fleece-shirt-drinks-coffee-hairdresser-s-salon_613910-5677.jpg", "http://img.b2bpic.net/free-photo/glad-curly-haired-afro-american-woman-drinks-aromatic-coffee-from-disposable-cup-has-interesting-happy-conversation-smiles-toothily-wears-casual-clothes-isolated-vivid-green-wall_273609-39736.jpg", "http://img.b2bpic.net/free-photo/man-with-mug_23-2147646630.jpg", "http://img.b2bpic.net/free-photo/smiley-colleagues-work-break-time_23-2149308456.jpg"]}
avatarText="Loved by 500+ locals"
title="Experience the Art of Specialty Coffee"
description="Crafting premium experiences with every single cup. We source the finest beans globally for a truly artisanal coffee journey in the heart of the city."
primaryButton={{
text: "Our Menu", href: "#features"}}
secondaryButton={{
text: "Visit Us", href: "#contact"}}
names={[
"The Morning Bean", "The City Cup", "Brew Daily", "Artisan Roast", "Bean Expert"]}
imageSrc="http://img.b2bpic.net/free-photo/coffee-machine-making-perfect-cup-coffee_23-2151699653.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

28
src/pages/HomePage/sections/Metrics.tsx Normal file
View File

@@ -0,0 +1,28 @@
// 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 MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Impact"
title="Our Coffee Journey"
description="We are proud of our contributions to local coffee culture."
metrics={[
{
value: "10k+", description: "Cups Served Annually"},
{
value: "15+", description: "Origin Regions"},
{
value: "5", description: "Years of Excellence"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

32
src/pages/HomePage/sections/Testimonials.tsx Normal file
View File

@@ -0,0 +1,32 @@
// 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 TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialQuoteCards
tag="Feedback"
title="What Our Community Says"
description="Building lasting connections with our neighbors."
testimonials={[
{
name: "Sarah J.", role: "Local Professional", quote: "The coffee quality is unmatched. Truly premium experience.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-shopping-clothes_23-2149187300.jpg"},
{
name: "Michael D.", role: "Coffee Enthusiast", quote: "Love the atmosphere and the passion of the baristas.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-kebab_23-2148773545.jpg"},
{
name: "Emily R.", role: "Digital Nomad", quote: "Perfect spot to work and enjoy a perfect cup.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-with-copy-space_23-2148819859.jpg"},
{
name: "David K.", role: "Frequent Visitor", quote: "The beans are exceptional. A staple for my mornings.", imageSrc: "http://img.b2bpic.net/free-photo/humorous-talks-with-close-friends-dinner-hot-spring-day-cafe_8353-10001.jpg"},
{
name: "Linda M.", role: "Neighborhood Resident", quote: "They truly care about the quality. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/sensual-confident-woman-stylish-clothes-enjoying-coffee-coffeeshop-attractive-female-model-sitting-cafe-having-lunch-with-admirer-smiling-look-away-pleased-breakfast-outdoor-restaurant_197531-30517.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}