Bob AI: Updated color palette to a bright, airy, and clean theme.
This commit is contained in:
kudinDmitriyUp
@@ -5,15 +5,15 @@
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f0f8ffe6;
|
||||
--primary-cta: #cee7ff;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #f0f8ffe6;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
--background: #f8fafc;
|
||||
--card: #ffffff;
|
||||
--foreground: #0f172a;
|
||||
--primary-cta: #0284c7;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #e2e8f0;
|
||||
--secondary-cta-text: #0f172a;
|
||||
--accent: #64748b;
|
||||
--background-accent: #e2e8f0;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 1.5rem;
|
||||
|
||||
@@ -1,272 +1,33 @@
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
|
||||
import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import { CreditCard, Grid, PlayCircle } from "lucide-react";
|
||||
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 HowItWorksSection from './HomePage/sections/HowItWorks';
|
||||
import FeaturedContentSection from './HomePage/sections/FeaturedContent';
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardTiltedCarousel
|
||||
tag="Your Home Cinema, Instantly"
|
||||
title="Stream Everything. Play Anywhere."
|
||||
description="Simply subscribe, pick your favorite video, and watch it directly on your Smart TV, projector, or media player. No tech setup required."
|
||||
primaryButton={{
|
||||
text: "Start Watching",
|
||||
href: "#pricing",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "How it works",
|
||||
href: "#how-it-works",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/player-enjoying-high-quality-ray-tracing-graphics-console-videogame_482257-82197.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-friends-having-fun-cinema-open-air_23-2149477072.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500646.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500637.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-watching-movie-home_23-2149546691.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-popcorn-cinema_23-2147988973.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<SectionErrorBoundary name="how-it-works">
|
||||
<FeaturesBorderGlow
|
||||
tag="Simple as 1-2-3"
|
||||
title="How it Works"
|
||||
description="We've removed the complexity. Just follow these simple steps to start streaming."
|
||||
features={[
|
||||
{
|
||||
icon: CreditCard,
|
||||
title: "1. Subscribe",
|
||||
description: "Choose a monthly plan that fits your needs.",
|
||||
},
|
||||
{
|
||||
icon: Grid,
|
||||
title: "2. Pick Content",
|
||||
description: "Browse our curated selection of video content.",
|
||||
},
|
||||
{
|
||||
icon: PlayCircle,
|
||||
title: "3. Instant Play",
|
||||
description: "Cast instantly to your favorite media device.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<HowItWorksSection />
|
||||
|
||||
<div id="featured-content" data-section="featured-content">
|
||||
<SectionErrorBoundary name="featured-content">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Curated for You"
|
||||
title="Latest Content"
|
||||
description="Discover a diverse world of movies, documentaries, and series."
|
||||
items={[
|
||||
{
|
||||
title: "Sci-Fi Thriller",
|
||||
description: "Explore galaxies unknown.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/halloween-concept-with-spooky-woman_23-2147701158.jpg",
|
||||
},
|
||||
{
|
||||
title: "Nature Wonders",
|
||||
description: "Earth's beautiful landscape.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-tall-trees-reflection-lake-park_181624-30524.jpg",
|
||||
},
|
||||
{
|
||||
title: "Daily Drama",
|
||||
description: "Deep, emotional storytelling.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-3d-render-with-geometric-shapes-gold-spheres_187299-48077.jpg",
|
||||
},
|
||||
{
|
||||
title: "Comedy Night",
|
||||
description: "Laugh until it hurts.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-arrangement-3d-glasses_23-2149487691.jpg",
|
||||
},
|
||||
{
|
||||
title: "Action Blockbuster",
|
||||
description: "Adrenaline-fueled fun.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-medieval-soldier-posing-studio_23-2150542200.jpg",
|
||||
},
|
||||
{
|
||||
title: "History Docs",
|
||||
description: "Understand the past.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/halftone-monochrome-collage_23-2151005035.jpg",
|
||||
},
|
||||
{
|
||||
title: "Classic Cinema",
|
||||
description: "Timeless masterpieces.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-woman-using-telephone_23-2148870670.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturedContentSection />
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingLayeredCards
|
||||
tag="Choose Your Plan"
|
||||
title="Simple Subscription"
|
||||
description="One price, no hidden fees, instant access."
|
||||
plans={[
|
||||
{
|
||||
tag: "Basic",
|
||||
price: "$9.99/mo",
|
||||
description: "Perfect for solo viewers.",
|
||||
primaryButton: {
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"Unlimited access",
|
||||
"1 device support",
|
||||
"Standard HD",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Standard",
|
||||
price: "$14.99/mo",
|
||||
description: "Best value for families.",
|
||||
primaryButton: {
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"Unlimited access",
|
||||
"3 devices support",
|
||||
"Full 4K UHD",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Premium",
|
||||
price: "$19.99/mo",
|
||||
description: "Ultimate home theater experience.",
|
||||
primaryButton: {
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"Unlimited access",
|
||||
"Unlimited devices",
|
||||
"8K Ultra HD",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<PricingSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Support"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about TrueWindow."
|
||||
categories={[
|
||||
{
|
||||
name: "Getting Started",
|
||||
items: [
|
||||
{
|
||||
question: "What devices can I use?",
|
||||
answer: "Smart TVs, Projectors, or any dedicated media player with our app.",
|
||||
},
|
||||
{
|
||||
question: "Is it hard to install?",
|
||||
answer: "No, our app works out of the box.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Happy Viewers"
|
||||
title="What Our Users Say"
|
||||
description="Real experiences from real subscribers."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Jenkins",
|
||||
role: "Homemaker",
|
||||
quote: "Finally, something I can actually understand! Casting is just one click.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark Wilson",
|
||||
role: "Teacher",
|
||||
quote: "I use it on my projector for classroom films. Incredible quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",
|
||||
},
|
||||
{
|
||||
name: "John Doe",
|
||||
role: "Tech Enthusiast",
|
||||
quote: "Simple, efficient, and great library.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-black-suit-smiles-sitting-chair_23-2148401485.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena Smith",
|
||||
role: "Designer",
|
||||
quote: "So clean and minimalist. Love the design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
},
|
||||
{
|
||||
name: "Robert Lee",
|
||||
role: "Engineer",
|
||||
quote: "Exactly what I wanted for my smart TV.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-black-jacket-liking-lip-posing-isolated-background-charming-lady-dark-suit-smiling-white-backdrop_197531-18516.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to watch?"
|
||||
text="Join thousands of others enjoying instant streaming."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#pricing",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Support",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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 watch?"
|
||||
text="Join thousands of others enjoying instant streaming."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#pricing",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Support",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
src/pages/HomePage/sections/Faq.tsx
Normal file
35
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
// 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="Common Questions"
|
||||
description="Everything you need to know about TrueWindow."
|
||||
categories={[
|
||||
{
|
||||
name: "Getting Started",
|
||||
items: [
|
||||
{
|
||||
question: "What devices can I use?",
|
||||
answer: "Smart TVs, Projectors, or any dedicated media player with our app.",
|
||||
},
|
||||
{
|
||||
question: "Is it hard to install?",
|
||||
answer: "No, our app works out of the box.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
64
src/pages/HomePage/sections/FeaturedContent.tsx
Normal file
64
src/pages/HomePage/sections/FeaturedContent.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "featured-content" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FeaturedContentSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="featured-content" data-section="featured-content">
|
||||
<SectionErrorBoundary name="featured-content">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Curated for You"
|
||||
title="Latest Content"
|
||||
description="Discover a diverse world of movies, documentaries, and series."
|
||||
items={[
|
||||
{
|
||||
title: "Sci-Fi Thriller",
|
||||
description: "Explore galaxies unknown.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/halloween-concept-with-spooky-woman_23-2147701158.jpg",
|
||||
},
|
||||
{
|
||||
title: "Nature Wonders",
|
||||
description: "Earth's beautiful landscape.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-tall-trees-reflection-lake-park_181624-30524.jpg",
|
||||
},
|
||||
{
|
||||
title: "Daily Drama",
|
||||
description: "Deep, emotional storytelling.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-3d-render-with-geometric-shapes-gold-spheres_187299-48077.jpg",
|
||||
},
|
||||
{
|
||||
title: "Comedy Night",
|
||||
description: "Laugh until it hurts.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-arrangement-3d-glasses_23-2149487691.jpg",
|
||||
},
|
||||
{
|
||||
title: "Action Blockbuster",
|
||||
description: "Adrenaline-fueled fun.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-medieval-soldier-posing-studio_23-2150542200.jpg",
|
||||
},
|
||||
{
|
||||
title: "History Docs",
|
||||
description: "Understand the past.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/halftone-monochrome-collage_23-2151005035.jpg",
|
||||
},
|
||||
{
|
||||
title: "Classic Cinema",
|
||||
description: "Timeless masterpieces.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-woman-using-telephone_23-2148870670.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
src/pages/HomePage/sections/Hero.tsx
Normal file
48
src/pages/HomePage/sections/Hero.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 "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardTiltedCarousel
|
||||
tag="Your Home Cinema, Instantly"
|
||||
title="Stream Everything. Play Anywhere."
|
||||
description="Simply subscribe, pick your favorite video, and watch it directly on your Smart TV, projector, or media player. No tech setup required."
|
||||
primaryButton={{
|
||||
text: "Start Watching",
|
||||
href: "#pricing",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "How it works",
|
||||
href: "#how-it-works",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/player-enjoying-high-quality-ray-tracing-graphics-console-videogame_482257-82197.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-friends-having-fun-cinema-open-air_23-2149477072.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500646.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500637.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-watching-movie-home_23-2149546691.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-popcorn-cinema_23-2147988973.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/HowItWorks.tsx
Normal file
38
src/pages/HomePage/sections/HowItWorks.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "how-it-works" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
|
||||
import { CreditCard, Grid, PlayCircle } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HowItWorksSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<SectionErrorBoundary name="how-it-works">
|
||||
<FeaturesBorderGlow
|
||||
tag="Simple as 1-2-3"
|
||||
title="How it Works"
|
||||
description="We've removed the complexity. Just follow these simple steps to start streaming."
|
||||
features={[
|
||||
{
|
||||
icon: CreditCard,
|
||||
title: "1. Subscribe",
|
||||
description: "Choose a monthly plan that fits your needs.",
|
||||
},
|
||||
{
|
||||
icon: Grid,
|
||||
title: "2. Pick Content",
|
||||
description: "Browse our curated selection of video content.",
|
||||
},
|
||||
{
|
||||
icon: PlayCircle,
|
||||
title: "3. Instant Play",
|
||||
description: "Cast instantly to your favorite media device.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
64
src/pages/HomePage/sections/Pricing.tsx
Normal file
64
src/pages/HomePage/sections/Pricing.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
// 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 PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function PricingSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingLayeredCards
|
||||
tag="Choose Your Plan"
|
||||
title="Simple Subscription"
|
||||
description="One price, no hidden fees, instant access."
|
||||
plans={[
|
||||
{
|
||||
tag: "Basic",
|
||||
price: "$9.99/mo",
|
||||
description: "Perfect for solo viewers.",
|
||||
primaryButton: {
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"Unlimited access",
|
||||
"1 device support",
|
||||
"Standard HD",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Standard",
|
||||
price: "$14.99/mo",
|
||||
description: "Best value for families.",
|
||||
primaryButton: {
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"Unlimited access",
|
||||
"3 devices support",
|
||||
"Full 4K UHD",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Premium",
|
||||
price: "$19.99/mo",
|
||||
description: "Ultimate home theater experience.",
|
||||
primaryButton: {
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"Unlimited access",
|
||||
"Unlimited devices",
|
||||
"8K Ultra HD",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
// 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 TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Happy Viewers"
|
||||
title="What Our Users Say"
|
||||
description="Real experiences from real subscribers."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Jenkins",
|
||||
role: "Homemaker",
|
||||
quote: "Finally, something I can actually understand! Casting is just one click.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark Wilson",
|
||||
role: "Teacher",
|
||||
quote: "I use it on my projector for classroom films. Incredible quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",
|
||||
},
|
||||
{
|
||||
name: "John Doe",
|
||||
role: "Tech Enthusiast",
|
||||
quote: "Simple, efficient, and great library.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-black-suit-smiles-sitting-chair_23-2148401485.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena Smith",
|
||||
role: "Designer",
|
||||
quote: "So clean and minimalist. Love the design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
},
|
||||
{
|
||||
name: "Robert Lee",
|
||||
role: "Engineer",
|
||||
quote: "Exactly what I wanted for my smart TV.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-black-jacket-liking-lip-posing-isolated-background-charming-lady-dark-suit-smiling-white-backdrop_197531-18516.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user