Merge version_2_1781478316390 into main #1

Merged
bender merged 1 commits from version_2_1781478316390 into main 2026-06-14 23:07:38 +00:00
6 changed files with 336 additions and 167 deletions

View File

@@ -1,176 +1,27 @@
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
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 ModulesSection from './HomePage/sections/Modules';
import TestimonialsSection from './HomePage/sections/Testimonials';
import FaqSection from './HomePage/sections/Faq';
import CtaSection from './HomePage/sections/Cta';
export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboardCarousel
tag="Renda Black™ - Método Premium"
title="Descubra Como Criar uma Renda Mensal Usando Tráfego Pago"
description="Sem aparecer, sem criar produto e com um método simples de aplicar. Seu sucesso começa aqui."
primaryButton={{
text: "Começar Agora",
href: "#modules",
}}
secondaryButton={{
text: "Ver módulos",
href: "#modules",
}}
items={[
{
imageSrc: "http://img.b2bpic.net/free-vector/futuristic-infographic-collection_23-2148469252.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150513313.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/digital-presentation-related-performance-business-using-graph_53876-98525.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2392.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172434.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="modules" data-section="modules">
<SectionErrorBoundary name="modules">
<FeaturesArrowCards
tag="Conteúdo Exclusivo"
title="Módulos do Curso"
description="Aprenda o passo a passo completo desde a afiliação até a escala de anúncios."
items={[
{
title: "Módulo 1: Começando",
tags: [
"Afiliação",
"Mindset",
],
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg",
},
{
title: "Módulo 2: Estrutura",
tags: [
"Setup",
"Ferramentas",
],
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-interface_23-2152011741.jpg",
},
{
title: "Módulo 3: Tráfego Pago",
tags: [
"Ads",
"Facebook",
],
imageSrc: "http://img.b2bpic.net/free-vector/velocity-technology-interface-design-elements_53876-100773.jpg",
},
{
title: "Módulo 4: Orgânico",
tags: [
"Viral",
"Conteúdo",
],
imageSrc: "http://img.b2bpic.net/free-vector/pack-futuristic-infographic-elements_52683-17611.jpg",
},
{
title: "Módulo 5: Criativos",
tags: [
"Design",
"Conversão",
],
imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039367.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ModulesSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialTrustCard
quote="A plataforma é muito direta ao ponto e fácil de aplicar. Mudou meu jogo no tráfego pago."
rating={5}
author="Comunidade Renda Black"
avatars={[
{
name: "João",
imageSrc: "http://img.b2bpic.net/free-photo/elegant-mature-woman-sitting-stool_23-2148275043.jpg",
},
{
name: "Maria",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-charming-businesswoman-glasses-blue-shirt-holds-tablet-leaning-against-brick-wall-room-with-loft-design_613910-9159.jpg",
},
{
name: "Pedro",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands_1258-193990.jpg",
},
{
name: "Ana",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",
},
{
name: "Carlos",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-clipboard-smiling-camera_482257-121165.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSplitMedia
tag="Dúvidas Frequentes"
title="Perguntas sobre o Renda Black"
description="Tire suas dúvidas antes de começar."
items={[
{
question: "Precisa experiência?",
answer: "Não, o método é desenhado para iniciantes do zero.",
},
{
question: "Precisa aparecer?",
answer: "Não, você pode rodar anúncios sem se expor.",
},
{
question: "Funciona pra iniciantes?",
answer: "Sim, temos aulas específicas para quem está começando agora.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg"
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="cta" data-section="cta">
<SectionErrorBoundary name="cta">
<ContactCta
tag="Pronto para começar?"
text="Junte-se à elite que fatura com tráfego pago."
primaryButton={{
text: "Acessar Agora",
href: "#",
}}
secondaryButton={{
text: "Suporte WhatsApp",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
<CtaSection />
</>
);
}

View File

@@ -0,0 +1,27 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "cta" section.
import React from 'react';
import ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function CtaSection(): React.JSX.Element {
return (
<div id="cta" data-section="cta">
<SectionErrorBoundary name="cta">
<ContactCta
tag="Pronto para começar?"
text="Junte-se à elite que fatura com tráfego pago."
primaryButton={{
text: "Acessar Agora",
href: "#",
}}
secondaryButton={{
text: "Suporte WhatsApp",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
);
}

View 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 FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSplitMedia
tag="Dúvidas Frequentes"
title="Perguntas sobre o Renda Black"
description="Tire suas dúvidas antes de começar."
items={[
{
question: "Precisa experiência?",
answer: "Não, o método é desenhado para iniciantes do zero.",
},
{
question: "Precisa aparecer?",
answer: "Não, você pode rodar anúncios sem se expor.",
},
{
question: "Funciona pra iniciantes?",
answer: "Sim, temos aulas específicas para quem está começando agora.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View 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 HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboardCarousel
tag="Renda Black™ - Método Premium"
title="Descubra Como Criar uma Renda Mensal Usando Tráfego Pago"
description="Sem aparecer, sem criar produto e com um método simples de aplicar. Seu sucesso começa aqui."
primaryButton={{
text: "Começar Agora",
href: "#modules",
}}
secondaryButton={{
text: "Ver módulos",
href: "#modules",
}}
items={[
{
imageSrc: "http://img.b2bpic.net/free-vector/futuristic-infographic-collection_23-2148469252.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150513313.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/digital-presentation-related-performance-business-using-graph_53876-98525.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2392.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172434.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,166 @@
/* eslint-disable */
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
import { ArrowUpRight } from "lucide-react";
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import GridOrCarousel from "@/components/ui/GridOrCarousel";
import ScrollReveal from "@/components/ui/ScrollReveal";
import { useButtonClick } from "@/hooks/useButtonClick";
const items = [
{
title: "Módulo 1: Começando",
description: "Aprenda como se afiliar aos melhores produtos e preparar sua mentalidade para o sucesso no mercado digital.",
tags: [
"Afiliação",
"Mindset"
],
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg"
},
{
title: "Módulo 2: Estrutura",
description: "Passo a passo para montar sua estrutura própria, configurando domínio, hospedagem e páginas de alta conversão.",
tags: [
"Setup",
"Ferramentas"
],
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-interface_23-2152011741.jpg"
},
{
title: "Módulo 3: Tráfego Pago",
description: "Domine o Facebook Ads e Google Ads. Crie campanhas do zero, teste criativos e escale seus resultados diários.",
tags: [
"Ads",
"Facebook"
],
imageSrc: "http://img.b2bpic.net/free-vector/velocity-technology-interface-design-elements_53876-100773.jpg"
},
{
title: "Módulo 4: Orgânico",
description: "Estratégias validadas para atrair clientes sem investir em anúncios usando TikTok, Reels e YouTube Shorts.",
tags: [
"Viral",
"Conteúdo"
],
imageSrc: "http://img.b2bpic.net/free-vector/pack-futuristic-infographic-elements_52683-17611.jpg"
},
{
title: "Módulo 5: Criativos",
description: "Descubra os segredos por trás de imagens e vídeos que convertem. Aprenda a usar ferramentas simples de design.",
tags: [
"Design",
"Conversão"
],
imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039367.jpg"
}
];
type FeatureItem = {
title: string;
description?: string;
tags: string[];
href?: string;
onClick?: () => void;
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const ArrowButton = ({ href, onClick }: { href?: string; onClick?: () => void }) => {
const handleClick = useButtonClick(href, onClick);
return (
<a
href={href}
onClick={handleClick}
className="group/arrow flex items-center justify-center shrink-0 size-9 primary-button rounded-full cursor-pointer transition-transform duration-300 hover:scale-110"
>
<ArrowUpRight className="size-4 text-primary-cta-text transition-transform duration-300 group-hover/arrow:rotate-45" strokeWidth={2} />
</a>
);
};
interface FeaturesArrowCardsProps {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
items: FeatureItem[];
}
const ModulesInline = () => {
return (
<section aria-label="Features 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>{"Conteúdo Exclusivo"}</p>
</div>
<TextAnimation
text={"Módulos do Curso"}
variant="fade-blur"
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={"Aprenda o passo a passo completo desde a afiliação até a escala de anúncios."}
variant="fade-blur"
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="slide-up">
<GridOrCarousel>
{items.map((item) => (
<div key={item.title} className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 h-full card rounded group">
<div className="relative aspect-video rounded overflow-hidden bg-card flex items-center justify-center">
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="absolute inset-0 w-full h-full object-cover opacity-50 transition-transform duration-500 ease-in-out group-hover:scale-105" />
<div className="relative z-10 flex flex-col items-center gap-2">
<div className="size-12 rounded-full bg-primary-cta/20 flex items-center justify-center backdrop-blur-sm">
<div className="w-0 h-0 border-t-[8px] border-t-transparent border-l-[12px] border-l-primary-cta border-b-[8px] border-b-transparent ml-1"></div>
</div>
<span className="text-xs font-medium text-primary-cta">Assistir Aula</span>
</div>
<div className="absolute top-3 right-3 xl:top-3.5 xl:right-3.5 2xl:top-4 2xl:right-4 z-10">
<ArrowButton href={item.href} onClick={item.onClick} />
</div>
</div>
<div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4">
<h3 className="text-2xl font-semibold leading-snug text-balance">{item.title}</h3>
{item.description && (
<p className="text-sm text-muted-foreground mt-1 line-clamp-3">{item.description}</p>
)}
<div className="flex flex-wrap items-center gap-2 mt-2 md:mt-3">
{item.tags.map((itemTag) => (
<div key={itemTag} className="flex items-center h-9 px-3 text-sm card rounded">
<p>{itemTag}</p>
</div>
))}
</div>
</div>
</div>
))}
</GridOrCarousel>
</ScrollReveal>
</div>
</section>
);
};
export default function ModulesSection() {
return (
<div data-webild-section="modules" id="modules">
<ModulesInline />
</div>
);
}

View 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="A plataforma é muito direta ao ponto e fácil de aplicar. Mudou meu jogo no tráfego pago."
rating={5}
author="Comunidade Renda Black"
avatars={[
{
name: "João",
imageSrc: "http://img.b2bpic.net/free-photo/elegant-mature-woman-sitting-stool_23-2148275043.jpg",
},
{
name: "Maria",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-charming-businesswoman-glasses-blue-shirt-holds-tablet-leaning-against-brick-wall-room-with-loft-design_613910-9159.jpg",
},
{
name: "Pedro",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands_1258-193990.jpg",
},
{
name: "Ana",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",
},
{
name: "Carlos",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-clipboard-smiling-camera_482257-121165.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}