Update src/app/page.tsx
This commit is contained in:
456
src/app/page.tsx
456
src/app/page.tsx
@@ -14,325 +14,165 @@ import { Activity, BarChart2, BookOpen, Image, Info, Layers, Link, Lock, Rocket,
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Início",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Cursos",
|
||||
id: "#paths",
|
||||
},
|
||||
{
|
||||
name: "Simulador",
|
||||
id: "#simulator",
|
||||
},
|
||||
{
|
||||
name: "Glossário",
|
||||
id: "#glossary",
|
||||
},
|
||||
]}
|
||||
brandName="CriptoEdu"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Início", id: "#hero" },
|
||||
{ name: "Cursos", id: "#paths" },
|
||||
{ name: "Simulador", id: "#simulator" },
|
||||
{ name: "Glossário", id: "#glossary" }
|
||||
]}
|
||||
brandName="CriptoEdu"
|
||||
button={{ text: "Login", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "glowing-orb",
|
||||
}}
|
||||
title="Domine o futuro das finanças"
|
||||
description="Aprenda sobre Blockchain, DeFi e investimentos em criptomoedas com cursos gamificados e simuladores sem risco."
|
||||
buttons={[
|
||||
{
|
||||
text: "Começar agora",
|
||||
href: "#paths",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139374.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182562.jpg",
|
||||
alt: "User avatar 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-low-poly-connections-background_1048-12378.jpg",
|
||||
alt: "User avatar 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133166.jpg",
|
||||
alt: "User avatar 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/digital-optical-fibers-design_23-2148241325.jpg",
|
||||
alt: "User avatar 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/futuristic-geometric-shapes-connect-modern-abstract-design-generated-by-ai_188544-26829.jpg",
|
||||
alt: "User avatar 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Junte-se a 10.000+ estudantes"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Blockchain",
|
||||
icon: Link,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Segurança",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Trading",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "DeFi",
|
||||
icon: Lock,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "NFTs",
|
||||
icon: Image,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "glowing-orb" }}
|
||||
title="Domine o futuro das finanças"
|
||||
description="Aprenda sobre Blockchain, DeFi e investimentos em criptomoedas com cursos gamificados e simuladores sem risco."
|
||||
buttons={[{ text: "Começar agora", href: "#paths" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139374.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182562.jpg", alt: "User avatar 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-low-poly-connections-background_1048-12378.jpg", alt: "User avatar 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133166.jpg", alt: "User avatar 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/digital-optical-fibers-design_23-2148241325.jpg", alt: "User avatar 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/futuristic-geometric-shapes-connect-modern-abstract-design-generated-by-ai_188544-26829.jpg", alt: "User avatar 5" }
|
||||
]}
|
||||
avatarText="Junte-se a 10.000+ estudantes"
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "Blockchain", icon: Link },
|
||||
{ type: "text-icon", text: "Segurança", icon: ShieldCheck },
|
||||
{ type: "text-icon", text: "Trading", icon: TrendingUp },
|
||||
{ type: "text-icon", text: "DeFi", icon: Lock },
|
||||
{ type: "text-icon", text: "NFTs", icon: Image }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="paths" data-section="paths">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Rocket,
|
||||
title: "Fundamentos",
|
||||
description: "Blockchain, carteiras digitais e a história do Bitcoin.",
|
||||
},
|
||||
{
|
||||
icon: BarChart2,
|
||||
title: "Análise de Mercado",
|
||||
description: "Entenda gráficos e indicadores de forma simples.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Segurança",
|
||||
description: "Como proteger seus ativos digitais com segurança total.",
|
||||
},
|
||||
]}
|
||||
title="Trilhas de Aprendizado"
|
||||
description="Escolha seu caminho e evolua no seu ritmo com trilhas gamificadas."
|
||||
/>
|
||||
</div>
|
||||
<div id="paths" data-section="paths">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Rocket, title: "Fundamentos", description: "Blockchain, carteiras digitais e a história do Bitcoin." },
|
||||
{ icon: BarChart2, title: "Análise de Mercado", description: "Entenda gráficos e indicadores de forma simples." },
|
||||
{ icon: ShieldCheck, title: "Segurança", description: "Como proteger seus ativos digitais com segurança total." }
|
||||
]}
|
||||
title="Trilhas de Aprendizado"
|
||||
description="Escolha seu caminho e evolua no seu ritmo com trilhas gamificadas."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="simulator" data-section="simulator">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Wallet,
|
||||
title: "Saldo Fictício",
|
||||
description: "Receba R$10.000 para começar sua jornada de investidor.",
|
||||
},
|
||||
{
|
||||
icon: Activity,
|
||||
title: "Mercado Real",
|
||||
description: "Preços atualizados em tempo real para treino preciso.",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Evolução",
|
||||
description: "Acompanhe seu desempenho e melhore sua estratégia.",
|
||||
},
|
||||
]}
|
||||
title="Simulador Sem Risco"
|
||||
description="Pratique com dinheiro fictício acompanhando preços em tempo real antes de investir de verdade."
|
||||
/>
|
||||
</div>
|
||||
<div id="simulator" data-section="simulator">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Wallet, title: "Saldo Fictício", description: "Receba R$10.000 para começar sua jornada de investidor." },
|
||||
{ icon: Activity, title: "Mercado Real", description: "Preços atualizados em tempo real para treino preciso." },
|
||||
{ icon: TrendingUp, title: "Evolução", description: "Acompanhe seu desempenho e melhore sua estratégia." }
|
||||
]}
|
||||
title="Simulador Sem Risco"
|
||||
description="Pratique com dinheiro fictício acompanhando preços em tempo real antes de investir de verdade."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="market" data-section="market">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Search,
|
||||
title: "O que está acontecendo?",
|
||||
description: "Resumo diário dos movimentos das principais moedas.",
|
||||
},
|
||||
{
|
||||
icon: Info,
|
||||
title: "Por que o preço subiu?",
|
||||
description: "Análises claras sobre os eventos que afetam o mercado.",
|
||||
},
|
||||
{
|
||||
icon: Layers,
|
||||
title: "Indicadores",
|
||||
description: "Tradução de gráficos técnicos em linguagem simples.",
|
||||
},
|
||||
]}
|
||||
title="Análises Simplificadas"
|
||||
description="Traduzimos o complexo mercado financeiro para você entender as tendências de hoje."
|
||||
/>
|
||||
</div>
|
||||
<div id="market" data-section="market">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Search, title: "O que está acontecendo?", description: "Resumo diário dos movimentos das principais moedas." },
|
||||
{ icon: Info, title: "Por que o preço subiu?", description: "Análises claras sobre os eventos que afetam o mercado." },
|
||||
{ icon: Layers, title: "Indicadores", description: "Tradução de gráficos técnicos em linguagem simples." }
|
||||
]}
|
||||
title="Análises Simplificadas"
|
||||
description="Traduzimos o complexo mercado financeiro para você entender as tendências de hoje."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="glossary" data-section="glossary">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: "Staking",
|
||||
description: "Como deixar seu dinheiro 'rendendo' na blockchain.",
|
||||
},
|
||||
{
|
||||
icon: Lock,
|
||||
title: "DeFi",
|
||||
description: "Finanças descentralizadas explicadas com analogia de banco.",
|
||||
},
|
||||
{
|
||||
icon: Image,
|
||||
title: "NFT",
|
||||
description: "Certificados digitais únicos no mundo virtual.",
|
||||
},
|
||||
]}
|
||||
title="Glossário Inteligente"
|
||||
description="Aprenda termos técnicos com analogias práticas."
|
||||
/>
|
||||
</div>
|
||||
<div id="glossary" data-section="glossary">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: BookOpen, title: "Staking", description: "Como deixar seu dinheiro 'rendendo' na blockchain." },
|
||||
{ icon: Lock, title: "DeFi", description: "Finanças descentralizadas explicadas com analogia de banco." },
|
||||
{ icon: Image, title: "NFT", description: "Certificados digitais únicos no mundo virtual." }
|
||||
]}
|
||||
title="Glossário Inteligente"
|
||||
description="Aprenda termos técnicos com analogias práticas."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "É seguro investir?",
|
||||
content: "Sim, com a educação correta e medidas de segurança, você reduz riscos.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Preciso de muito dinheiro?",
|
||||
content: "Não, você pode começar com valores mínimos no simulador.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Quanto tempo leva para aprender?",
|
||||
content: "Com nossas trilhas gamificadas, você aprende o essencial em poucos dias.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-background-with-connecting-lines-dots_1048-12214.jpg"
|
||||
title="Dúvidas Frequentes"
|
||||
description="Respondemos as principais perguntas sobre criptomoedas."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "É seguro investir?", content: "Sim, com a educação correta e medidas de segurança, você reduz riscos." },
|
||||
{ id: "2", title: "Preciso de muito dinheiro?", content: "Não, você pode começar com valores mínimos no simulador." },
|
||||
{ id: "3", title: "Quanto tempo leva para aprender?", content: "Com nossas trilhas gamificadas, você aprende o essencial em poucos dias." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-background-with-connecting-lines-dots_1048-12214.jpg"
|
||||
title="Dúvidas Frequentes"
|
||||
description="Respondemos as principais perguntas sobre criptomoedas."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"BinanceEdu",
|
||||
"CoinbaseLearn",
|
||||
"EthereumFoundation",
|
||||
"Bitso Academy",
|
||||
"Chainlink University",
|
||||
"Uniswap Labs",
|
||||
"Solana Education",
|
||||
]}
|
||||
title="Parceiros Educacionais"
|
||||
description="Plataformas que apoiam nossa missão de democratizar o acesso ao mercado cripto."
|
||||
/>
|
||||
</div>
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["BinanceEdu", "CoinbaseLearn", "EthereumFoundation", "Bitso Academy", "Chainlink University", "Uniswap Labs", "Solana Education"]}
|
||||
title="Parceiros Educacionais"
|
||||
description="Plataformas que apoiam nossa missão de democratizar o acesso ao mercado cripto."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Comece agora"
|
||||
title="Pronto para sua primeira negociação?"
|
||||
description="Entre para nossa lista de espera e receba acesso exclusivo ao simulador."
|
||||
buttons={[
|
||||
{
|
||||
text: "Cadastrar-se",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Comece agora"
|
||||
title="Pronto para sua primeira negociação?"
|
||||
description="Entre para nossa lista de espera e receba acesso exclusivo ao simulador."
|
||||
buttons={[{ text: "Cadastrar-se", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Aprenda",
|
||||
items: [
|
||||
{
|
||||
label: "Trilhas",
|
||||
href: "#paths",
|
||||
},
|
||||
{
|
||||
label: "Glossário",
|
||||
href: "#glossary",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Ferramentas",
|
||||
items: [
|
||||
{
|
||||
label: "Simulador",
|
||||
href: "#simulator",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacidade",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Termos",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="CriptoEdu"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Aprenda", items: [{ label: "Trilhas", href: "#paths" }, { label: "Glossário", href: "#glossary" }] },
|
||||
{ title: "Ferramentas", items: [{ label: "Simulador", href: "#simulator" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacidade", href: "#" }, { label: "Termos", href: "#" }] }
|
||||
]}
|
||||
logoText="CriptoEdu"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user