Primeira versão templates paginas de venda
This commit is contained in:
Marcio Bevervanso
commit
02aeb97aa5
27 changed files with 5512 additions and 0 deletions
BIN
.DS_Store
vendored
Normal file
BIN
.DS_Store
vendored
Normal file
Binary file not shown.
20
Template-01/README.md
Normal file
20
Template-01/README.md
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<div align="center">
|
||||||
|
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# Run and deploy your AI Studio app
|
||||||
|
|
||||||
|
This contains everything you need to run your app locally.
|
||||||
|
|
||||||
|
View your app in AI Studio: https://ai.studio/apps/cec417d3-a052-41ec-af89-88ff3d5492f9
|
||||||
|
|
||||||
|
## Run Locally
|
||||||
|
|
||||||
|
**Prerequisites:** Node.js
|
||||||
|
|
||||||
|
|
||||||
|
1. Install dependencies:
|
||||||
|
`npm install`
|
||||||
|
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||||
|
3. Run the app:
|
||||||
|
`npm run dev`
|
||||||
67
Template-01/index.html
Normal file
67
Template-01/index.html
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="pt-BR">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<!-- SEO Meta Tags -->
|
||||||
|
<title>O Produto - A Arquitetura da Escala</title>
|
||||||
|
<meta name="description" content="Descubra o sistema minimalista de vendas usado pela elite do mercado para gerar lucro previsível sem dobrar a complexidade." />
|
||||||
|
|
||||||
|
<!-- Open Graph / O que aparece no WhatsApp e Redes Sociais -->
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:title" content="O Produto - A Arquitetura da Escala" />
|
||||||
|
<meta property="og:description" content="Descubra o sistema minimalista de vendas usado pela elite do mercado para gerar lucro previsível." />
|
||||||
|
<!-- Coloque aqui a URL de uma imagem sua para aparecer no WhatsApp (exemplo: 1200x630px) -->
|
||||||
|
<meta property="og:image" content="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1200&auto=format&fit=crop" />
|
||||||
|
|
||||||
|
<!-- ============================================== -->
|
||||||
|
<!-- 1. GOOGLE TAG MANAGER (GTM) -->
|
||||||
|
<!-- ============================================== -->
|
||||||
|
<!-- Copie esse código e coloque sua tag onde tem GTM-XXXXXXX 👇 -->
|
||||||
|
<!--
|
||||||
|
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||||
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||||
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||||
|
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||||
|
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- ============================================== -->
|
||||||
|
<!-- 2. FACEBOOK PIXEL -->
|
||||||
|
<!-- ============================================== -->
|
||||||
|
<!-- Copie esse código e troque XXXXXXXXXX pelo ID do seu pixel 👇 -->
|
||||||
|
<!--
|
||||||
|
<script>
|
||||||
|
!function(f,b,e,v,n,t,s)
|
||||||
|
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
||||||
|
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
|
||||||
|
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
|
||||||
|
n.queue=[];t=b.createElement(e);t.async=!0;
|
||||||
|
t.src=v;s=b.getElementsByTagName(e)[0];
|
||||||
|
s.parentNode.insertBefore(t,s)}(window, document,'script',
|
||||||
|
'https://connect.facebook.net/en_US/fbevents.js');
|
||||||
|
fbq('init', 'XXXXXXXXXX');
|
||||||
|
fbq('track', 'PageView');
|
||||||
|
</script>
|
||||||
|
<noscript><img height="1" width="1" style="display:none"
|
||||||
|
src="https://www.facebook.com/tr?id=XXXXXXXXXX&ev=PageView&noscript=1"
|
||||||
|
/></noscript>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- ============================================== -->
|
||||||
|
<!-- GTM (NOSCRIPT) PARA O BODY -->
|
||||||
|
<!-- ============================================== -->
|
||||||
|
<!-- Substitua o GTM-XXXXXXX do GTM abaixo também 👇 -->
|
||||||
|
<!--
|
||||||
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
|
||||||
|
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
6
Template-01/metadata.json
Normal file
6
Template-01/metadata.json
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"name": "Lumina Digital Landing Page",
|
||||||
|
"description": "Premium, modern, and highly persuasive landing page for digital products.",
|
||||||
|
"requestFramePermissions": [],
|
||||||
|
"majorCapabilities": []
|
||||||
|
}
|
||||||
4342
Template-01/package-lock.json
generated
Normal file
4342
Template-01/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
37
Template-01/package.json
Normal file
37
Template-01/package.json
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
{
|
||||||
|
"name": "react-example",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --port=3000 --host=0.0.0.0",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"clean": "rm -rf dist",
|
||||||
|
"lint": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@google/genai": "^1.29.0",
|
||||||
|
"@tailwindcss/vite": "^4.1.14",
|
||||||
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"dotenv": "^17.2.3",
|
||||||
|
"express": "^4.21.2",
|
||||||
|
"framer-motion": "^12.38.0",
|
||||||
|
"lucide-react": "^0.546.0",
|
||||||
|
"motion": "^12.23.24",
|
||||||
|
"react": "^19.0.1",
|
||||||
|
"react-dom": "^19.0.1",
|
||||||
|
"tailwind-merge": "^3.5.0",
|
||||||
|
"vite": "^6.2.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/express": "^4.17.21",
|
||||||
|
"@types/node": "^22.14.0",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"tailwindcss": "^4.1.14",
|
||||||
|
"tsx": "^4.21.0",
|
||||||
|
"typescript": "~5.8.2",
|
||||||
|
"vite": "^6.2.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
47
Template-01/src/App.tsx
Normal file
47
Template-01/src/App.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { motion, useScroll, useSpring } from 'framer-motion';
|
||||||
|
import Navbar from './components/Navbar';
|
||||||
|
import Hero from './components/Hero';
|
||||||
|
import Problem from './components/Problem';
|
||||||
|
import Benefits from './components/Benefits';
|
||||||
|
import Offer from './components/Offer';
|
||||||
|
import Guarantee from './components/Guarantee';
|
||||||
|
import FAQ from './components/FAQ';
|
||||||
|
import CTA from './components/CTA';
|
||||||
|
import Footer from './components/Footer';
|
||||||
|
import Results from './components/Results';
|
||||||
|
import FloatingWhatsApp from './components/FloatingWhatsApp';
|
||||||
|
import { useUTMForwarder } from './hooks/useUTMForwarder';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const { scrollYProgress } = useScroll();
|
||||||
|
const scaleX = useSpring(scrollYProgress, {
|
||||||
|
stiffness: 100,
|
||||||
|
damping: 30,
|
||||||
|
restDelta: 0.001
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ativa o repasse automático de UTMs para links de checkout
|
||||||
|
useUTMForwarder();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background text-foreground selection:bg-white/20">
|
||||||
|
<motion.div
|
||||||
|
className="fixed top-0 left-0 right-0 h-1 bg-white origin-left z-50"
|
||||||
|
style={{ scaleX }}
|
||||||
|
/>
|
||||||
|
<Navbar />
|
||||||
|
<main>
|
||||||
|
<Hero />
|
||||||
|
<Problem />
|
||||||
|
<Benefits />
|
||||||
|
<Results />
|
||||||
|
<Offer />
|
||||||
|
<Guarantee />
|
||||||
|
<FAQ />
|
||||||
|
<CTA />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
<FloatingWhatsApp />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
75
Template-01/src/components/Benefits.tsx
Normal file
75
Template-01/src/components/Benefits.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Target, Zap, Clock, TrendingUp } from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
export default function Benefits() {
|
||||||
|
const cards = [
|
||||||
|
{
|
||||||
|
title: "Método Comprovado",
|
||||||
|
description: "Esqueça achismos. Utilize um framework estruturado que já foi testado e validado em dezenas de nichos diferentes.",
|
||||||
|
icon: <Target className="w-6 h-6 text-white" />,
|
||||||
|
className: "md:col-span-2 md:row-span-2 bg-gradient-to-br from-neutral-900 to-black hover:bg-neutral-900/80"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Atalhos de Execução",
|
||||||
|
description: "Modelos prontos para copiar e colar. Economize meses de desenvolvimento.",
|
||||||
|
icon: <Zap className="w-6 h-6 text-white" />,
|
||||||
|
className: "md:col-span-1 bg-neutral-900/50 hover:bg-neutral-900/80"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Automação Estética",
|
||||||
|
description: "Sistemas impecáveis rodando no automático para manter o alto valor percebido.",
|
||||||
|
icon: <Clock className="w-6 h-6 text-white" />,
|
||||||
|
className: "md:col-span-1 bg-neutral-900/50 hover:bg-neutral-900/80"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Escala Previsível",
|
||||||
|
description: "Construa uma infraestrutura preparada para o crescimento acelerado sem rupturas operacionais.",
|
||||||
|
icon: <TrendingUp className="w-6 h-6 text-white" />,
|
||||||
|
className: "md:col-span-2 bg-gradient-to-r from-neutral-900 to-black hover:bg-neutral-900/80"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 relative overflow-hidden" id="benefits">
|
||||||
|
<div className="absolute top-1/2 left-0 w-[500px] h-[500px] bg-white/5 blur-[120px] rounded-full pointer-events-none -translate-y-1/2 mix-blend-screen" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-5xl relative z-10">
|
||||||
|
<div className="mb-16 md:mb-20 text-center">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-6 tracking-tight">
|
||||||
|
Design, sistemas de venda e <br className="hidden md:block"/><span className="text-neutral-500">escala inteligente.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-neutral-400 max-w-2xl mx-auto font-light">
|
||||||
|
Tudo que você necessita para profissionalizar sua operação, encapsulado em um setup prático e extremamente elegante.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[250px]">
|
||||||
|
{cards.map((card, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||||||
|
className={cn(
|
||||||
|
"rounded-3xl border border-white/5 p-8 flex flex-col transition-all duration-300 group relative overflow-hidden hover:border-white/20 hover:shadow-[0_0_40px_rgba(255,255,255,0.03)]",
|
||||||
|
card.className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
|
||||||
|
|
||||||
|
<div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center mb-auto border border-white/10 group-hover:scale-105 transition-transform group-hover:bg-white/10">
|
||||||
|
{card.icon}
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10">
|
||||||
|
<h3 className="text-xl font-medium mb-2 text-white">{card.title}</h3>
|
||||||
|
<p className="text-neutral-400 font-light text-sm leading-relaxed">{card.description}</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
30
Template-01/src/components/CTA.tsx
Normal file
30
Template-01/src/components/CTA.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function CTA() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-[#050505]" />
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[300px] bg-white/5 blur-[120px] rounded-full pointer-events-none mix-blend-screen" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-4xl relative z-10 text-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-4xl md:text-5xl font-display font-medium mb-8 tracking-tight text-white line-clamp-2">
|
||||||
|
A decisão de elevar seu <br /> padrão começa aqui.
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-10">
|
||||||
|
<a href="#oferta" className="h-16 px-10 rounded-full bg-white text-black font-medium text-lg flex items-center justify-center gap-2 hover:bg-neutral-200 transition-all shadow-[0_0_40px_rgba(255,255,255,0.15)] ring-1 ring-white/20 ring-offset-4 ring-offset-black outline-none">
|
||||||
|
Iniciar Meu Acesso <ArrowRight className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
80
Template-01/src/components/FAQ.tsx
Normal file
80
Template-01/src/components/FAQ.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import { Plus, Minus } from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
export default function FAQ() {
|
||||||
|
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||||||
|
|
||||||
|
const faqs = [
|
||||||
|
{
|
||||||
|
q: "Preciso ter conhecimento prévio em tecnologia?",
|
||||||
|
a: "Não. O material foi desenhado do absoluto zero para que você consiga implementar os sistemas mesmo que seja total iniciante no mercado digital."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Quanto tempo de acesso eu terei?",
|
||||||
|
a: "O acesso é vitalício. Você pode assistir e revisar o conteúdo quantas vezes quiser, no seu próprio ritmo, sem prazos de validade."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Como receberei o acesso ao material?",
|
||||||
|
a: "Imediatamente após a confirmação do pagamento, os dados restritos de acesso à plataforma serão enviados automaticamente para o seu e-mail cadastrado na hora da compra."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Funciona para quem vende produto físico?",
|
||||||
|
a: "Sim. A arquitetura de vendas ensinada foca em aumentar o valor percebido e gerenciar o fluxo comercial."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 border-t border-white/5 bg-neutral-950/20">
|
||||||
|
<div className="container mx-auto px-6 max-w-3xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-4 tracking-tight">
|
||||||
|
Perguntas Frequentes.
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{faqs.map((faq, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: i * 0.1 }}
|
||||||
|
className="border border-white/10 rounded-2xl bg-neutral-900/30 overflow-hidden transition-colors hover:border-white/20"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => setOpenIndex(openIndex === i ? null : i)}
|
||||||
|
className="w-full px-6 py-6 flex items-center justify-between text-left"
|
||||||
|
>
|
||||||
|
<span className="font-medium pr-8">{faq.q}</span>
|
||||||
|
<div className={cn(
|
||||||
|
"w-8 h-8 rounded-full border border-white/10 flex items-center justify-center shrink-0 transition-colors",
|
||||||
|
openIndex === i ? "bg-white text-black" : "bg-neutral-800 text-white"
|
||||||
|
)}>
|
||||||
|
{openIndex === i ? <Minus className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{openIndex === i && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ height: 0, opacity: 0 }}
|
||||||
|
animate={{ height: "auto", opacity: 1 }}
|
||||||
|
exit={{ height: 0, opacity: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="px-6 pb-6 text-neutral-400 font-light leading-relaxed">
|
||||||
|
{faq.a}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
79
Template-01/src/components/Features.tsx
Normal file
79
Template-01/src/components/Features.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Layers, Shield, Settings, MousePointerClick, Smartphone, BarChart3 } from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
export default function Features() {
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: <Layers />,
|
||||||
|
title: "Modular Structure",
|
||||||
|
description: "Build once, reuse infinitely. Component-based architecture for your digital products."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Shield />,
|
||||||
|
title: "Bank-grade Security",
|
||||||
|
description: "Enterprise-level protection for your content and customer data out of the box."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Settings />,
|
||||||
|
title: "Zero Setup Required",
|
||||||
|
description: "Skip the technical headaches. Everything works seamlessly perfectly from day one."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <MousePointerClick />,
|
||||||
|
title: "One-Click Deployment",
|
||||||
|
description: "Push your products live to thousands of customers with a single action."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Smartphone />,
|
||||||
|
title: "Mobile Optimized",
|
||||||
|
description: "Flawless experience across all devices. Never lose a sale due to poor UX."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <BarChart3 />,
|
||||||
|
title: "Advanced Analytics",
|
||||||
|
description: "Deep insights into customer behavior, drop-off points, and conversion rates."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-neutral-950/50" id="features">
|
||||||
|
<div className="container mx-auto px-6 max-w-7xl">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-8">
|
||||||
|
<div className="max-w-2xl">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-6 tracking-tight">
|
||||||
|
Everything you need. <br/><span className="text-neutral-500">Nothing you don't.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-muted-foreground font-light">
|
||||||
|
A comprehensive toolkit designed specifically for modern digital creators and founders.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button className="h-12 px-6 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 text-white font-medium text-sm transition-colors whitespace-nowrap self-start md:self-auto">
|
||||||
|
View All Features
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{features.map((feature, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||||||
|
className="p-8 rounded-3xl bg-neutral-900/30 border border-white/5 hover:bg-neutral-800/50 hover:border-white/10 transition-all group"
|
||||||
|
>
|
||||||
|
<div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center mb-6 text-neutral-300 group-hover:text-white group-hover:scale-110 transition-all">
|
||||||
|
{feature.icon}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-medium mb-3">{feature.title}</h3>
|
||||||
|
<p className="text-neutral-400 font-light leading-relaxed text-sm">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
29
Template-01/src/components/FloatingWhatsApp.tsx
Normal file
29
Template-01/src/components/FloatingWhatsApp.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { MessageCircle } from 'lucide-react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
export default function FloatingWhatsApp() {
|
||||||
|
// Coloque aqui o número do seu WhatsApp com DDI (Ex: 5511999999999)
|
||||||
|
const whatsappNumber = "5511999999999";
|
||||||
|
const defaultMessage = "Olá! Tenho uma dúvida sobre a Arquitetura de Escala Digital.";
|
||||||
|
const url = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(defaultMessage)}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.a
|
||||||
|
href={url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="fixed bottom-6 right-6 z-50 flex items-center justify-center w-14 h-14 bg-emerald-500 text-white rounded-full shadow-[0_0_20px_rgba(16,185,129,0.3)] hover:bg-emerald-400 hover:scale-110 transition-all duration-300 group"
|
||||||
|
initial={{ opacity: 0, scale: 0 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: 1, duration: 0.5, type: 'spring' }}
|
||||||
|
>
|
||||||
|
<MessageCircle className="w-7 h-7" />
|
||||||
|
|
||||||
|
{/* Tooltip */}
|
||||||
|
<div className="absolute right-full mr-4 top-1/2 -translate-y-1/2 px-4 py-2 bg-neutral-900 border border-white/10 text-white text-sm whitespace-nowrap rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity drop-shadow-xl font-medium shadow-2xl">
|
||||||
|
Fale com nosso time
|
||||||
|
<div className="absolute right-[-5px] top-1/2 -translate-y-1/2 w-2 h-2 bg-neutral-900 border-r border-t border-white/10 rotate-45" />
|
||||||
|
</div>
|
||||||
|
</motion.a>
|
||||||
|
);
|
||||||
|
}
|
||||||
15
Template-01/src/components/Footer.tsx
Normal file
15
Template-01/src/components/Footer.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="py-12 border-t border-white/10 bg-black">
|
||||||
|
<div className="container mx-auto px-6 max-w-5xl text-center text-neutral-600 text-xs">
|
||||||
|
<p className="mb-4 max-w-3xl mx-auto leading-relaxed">
|
||||||
|
Este site não é afiliado ao Facebook ou a qualquer entidade do Facebook.
|
||||||
|
Depois que você sair do Facebook, a responsabilidade não é deles e sim do nosso site.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
© {new Date().getFullYear()} O Produto. Todos os direitos reservados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
29
Template-01/src/components/Guarantee.tsx
Normal file
29
Template-01/src/components/Guarantee.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { ShieldAlert } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Guarantee() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 border-y border-white/5 bg-[#080808]">
|
||||||
|
<div className="container mx-auto px-6 max-w-4xl text-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="p-12 md:p-16 rounded-[2.5rem] bg-[#0A0A0A] border border-white/5 flex flex-col items-center relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="absolute top-0 right-0 w-64 h-64 bg-white/5 blur-[80px] rounded-full pointer-events-none mix-blend-screen" />
|
||||||
|
|
||||||
|
<ShieldAlert className="w-16 h-16 text-neutral-400 mb-8" strokeWidth={1} />
|
||||||
|
|
||||||
|
<h2 className="text-3xl md:text-4xl font-display font-medium mb-6 tracking-tight">
|
||||||
|
Proteção incondicional garantida.
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-lg text-neutral-400 mb-0 max-w-2xl font-light leading-relaxed">
|
||||||
|
Nós confiamos inteiramente na eficácia desta arquitetura. Portanto, você tem exatos 7 dias para avaliar o material na íntegra. Caso entenda que o ecossistema não se alinha ao seu momento, devolveremos integralmente seu investimento, mediante uma solicitação simples, sem quaisquer empecilhos burocráticos.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
74
Template-01/src/components/Hero.tsx
Normal file
74
Template-01/src/components/Hero.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { ArrowRight, Play, Shield } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Hero() {
|
||||||
|
return (
|
||||||
|
<section className="relative pt-32 pb-20 md:pt-40 md:pb-24 overflow-hidden">
|
||||||
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] opacity-20 pointer-events-none">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-white to-transparent blur-[120px] rounded-full mix-blend-screen" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 max-w-4xl relative z-10 flex flex-col items-center text-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-white/10 bg-white/5 backdrop-blur-md mb-8 text-neutral-300"
|
||||||
|
>
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
|
||||||
|
<span className="text-xs font-medium uppercase tracking-widest">Apresentação Exclusiva</span>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.1 }}
|
||||||
|
className="text-4xl md:text-5xl lg:text-7xl tracking-tight leading-[1.1] font-display font-medium text-white mb-6"
|
||||||
|
>
|
||||||
|
A Arquitetura Exata Para <br className="hidden md:block"/>
|
||||||
|
Sua <span className="text-neutral-500">Escala Digital.</span>
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
|
className="text-lg md:text-xl text-neutral-400 mb-10 max-w-2xl font-light"
|
||||||
|
>
|
||||||
|
Descubra o sistema minimalista de vendas usado pela elite do mercado para gerar lucro previsível sem dobrar a complexidade.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
{/* Video / VSL Placeholder */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||||||
|
className="w-full aspect-video rounded-2xl overflow-hidden border border-white/10 bg-neutral-900/50 shadow-[0_0_80px_rgba(255,255,255,0.03)] relative group cursor-pointer mb-12 flex items-center justify-center backdrop-blur-sm"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center opacity-40 mix-blend-luminosity brightness-75 transition-transform duration-700 group-hover:scale-105" />
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-background/20 to-transparent" />
|
||||||
|
|
||||||
|
<div className="relative w-20 h-20 md:w-24 md:h-24 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex flex-col items-center justify-center group-hover:scale-110 group-hover:bg-white transition-all duration-500 shadow-[0_0_40px_rgba(255,255,255,0.1)] group-hover:text-black text-white">
|
||||||
|
<Play className="w-8 h-8 md:w-10 md:h-10 ml-1.5" fill="currentColor" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.6 }}
|
||||||
|
className="flex flex-col items-center gap-4 w-full"
|
||||||
|
>
|
||||||
|
<a href="#oferta" className="w-full sm:w-auto h-16 px-12 rounded-full bg-white text-black font-medium text-lg flex items-center justify-center gap-2 hover:bg-neutral-200 hover:scale-105 transition-all shadow-[0_0_40px_rgba(255,255,255,0.15)] outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black">
|
||||||
|
Quero Começar Agora <ArrowRight className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
<div className="flex items-center gap-2 text-neutral-500 text-sm mt-3">
|
||||||
|
<Shield className="w-4 h-4" />
|
||||||
|
<span>Compra 100% Segura. Implantação imediata.</span>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
61
Template-01/src/components/HowItWorks.tsx
Normal file
61
Template-01/src/components/HowItWorks.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
export default function HowItWorks() {
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
number: "01",
|
||||||
|
title: "Deconstruct",
|
||||||
|
description: "We break down your existing knowledge and identify the high-leverage assets that people are willing to pay for."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: "02",
|
||||||
|
title: "Architect",
|
||||||
|
description: "Using our proven templates, you'll design a high-converting offer and map out the entire fulfillment architecture."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: "03",
|
||||||
|
title: "Launch & Scale",
|
||||||
|
description: "Deploy the automated systems, launch to your audience (even if small), and use math to scale predictably."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-neutral-950 border-y border-white/5" id="how-it-works">
|
||||||
|
<div className="container mx-auto px-6 max-w-7xl">
|
||||||
|
<div className="text-center mb-20">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-6 tracking-tight">
|
||||||
|
The Blueprint.
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto font-light">
|
||||||
|
A systematic approach to building digital products that sell.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
{/* Connecting line */}
|
||||||
|
<div className="absolute top-1/2 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent hidden md:block -translate-y-1/2" />
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8 relative z-10">
|
||||||
|
{steps.map((step, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: i * 0.2 }}
|
||||||
|
className="flex flex-col items-center text-center group"
|
||||||
|
>
|
||||||
|
<div className="w-16 h-16 rounded-full bg-background border border-white/10 flex items-center justify-center mb-6 relative group-hover:border-white/30 transition-colors">
|
||||||
|
<div className="absolute inset-2 rounded-full bg-white/5" />
|
||||||
|
<span className="font-display font-medium text-lg text-white">{step.number}</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-medium mb-3">{step.title}</h3>
|
||||||
|
<p className="text-muted-foreground font-light text-sm leading-relaxed">{step.description}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
Template-01/src/components/Navbar.tsx
Normal file
39
Template-01/src/components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
export default function Navbar() {
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 20);
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header
|
||||||
|
className={cn(
|
||||||
|
"fixed top-0 w-full z-40 transition-all duration-300",
|
||||||
|
isScrolled ? "bg-background/80 backdrop-blur-xl border-b border-white/5 py-4" : "bg-transparent py-6"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-6 max-w-5xl flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3 group cursor-pointer">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-white flex items-center justify-center transition-transform group-hover:scale-105">
|
||||||
|
<div className="w-3 h-3 rounded-full bg-background" />
|
||||||
|
</div>
|
||||||
|
<span className="font-display font-medium text-xl tracking-tight text-white">O Produto.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<a href="#oferta" className="h-10 px-5 rounded-full bg-white text-black font-medium text-sm flex items-center gap-2 hover:bg-neutral-200 transition-all">
|
||||||
|
Garantir Acesso <ArrowRight className="w-4 h-4" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
79
Template-01/src/components/Offer.tsx
Normal file
79
Template-01/src/components/Offer.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Check, ShieldCheck } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Offer() {
|
||||||
|
const benefits = [
|
||||||
|
"Acesso Vitalício ao Framework Essencial (R$ 997)",
|
||||||
|
"Engine de Copy e Componentes de UI (R$ 497)",
|
||||||
|
"Workflow de Automação Minimalista (R$ 397)",
|
||||||
|
"Templates Notion para Gestão de Produto (R$ 297)",
|
||||||
|
"Suporte VIP Diretamente com Autores (Inestimável)",
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 relative overflow-hidden" id="oferta">
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-white/5 blur-[150px] rounded-full pointer-events-none mix-blend-screen" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-5xl relative z-10">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-6">
|
||||||
|
Investimento único. <br className="hidden md:block"/><span className="text-neutral-500">Retorno perpétuo.</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto border border-white/10 rounded-[2.5rem] overflow-hidden bg-[#0A0A0A] relative shadow-2xl">
|
||||||
|
{/* Background Highlight */}
|
||||||
|
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent" />
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-5 p-8 md:p-12 gap-12 items-center relative z-10">
|
||||||
|
|
||||||
|
<div className="md:col-span-3">
|
||||||
|
<div className="space-y-5 mb-8">
|
||||||
|
{benefits.map((benefit, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: i * 0.1 }}
|
||||||
|
className="flex items-start gap-4"
|
||||||
|
>
|
||||||
|
<div className="w-6 h-6 mt-0.5 rounded-full bg-white/10 flex items-center justify-center shrink-0 border border-white/10">
|
||||||
|
<Check className="w-3 h-3 text-white" />
|
||||||
|
</div>
|
||||||
|
<span className="text-neutral-300 font-light text-base leading-relaxed">{benefit}</span>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-6 border-t border-white/5">
|
||||||
|
<p className="text-neutral-500 text-sm">Valor total do ecossistema: <span className="line-through">R$ 2.188,00</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2 rounded-3xl p-8 text-center flex flex-col justify-center relative overflow-hidden bg-white/5 border border-white/5">
|
||||||
|
<div className="mb-4 text-white font-medium text-xs tracking-[0.2em] uppercase">Lote Promocional</div>
|
||||||
|
|
||||||
|
<div className="flex items-end justify-center gap-1 mb-2">
|
||||||
|
<span className="text-2xl font-medium mb-2 text-neutral-400">12x</span>
|
||||||
|
<span className="text-6xl font-display font-semibold tracking-tight text-white">49</span>
|
||||||
|
<span className="text-xl font-medium mb-1 text-neutral-400">,90</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-neutral-500 font-light mb-8">ou apenas R$ 497 à vista.</p>
|
||||||
|
|
||||||
|
<a href="https://pay.kiwify.com.br/SEU_LINK_AQUI" target="_blank" rel="noopener noreferrer" className="w-full h-14 rounded-full bg-white text-black font-medium text-base hover:bg-neutral-200 transition-all mb-4 flex items-center justify-center shadow-[0_0_30px_rgba(255,255,255,0.1)]">
|
||||||
|
Garantir Acesso
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center gap-2 text-xs text-neutral-500 font-medium">
|
||||||
|
<ShieldCheck className="w-4 h-4 text-neutral-400" />
|
||||||
|
<span>Liberação imediata.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
41
Template-01/src/components/Problem.tsx
Normal file
41
Template-01/src/components/Problem.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { XCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Problem() {
|
||||||
|
const problems = [
|
||||||
|
"Trabalha 12h por dia mas o faturamento estagnou.",
|
||||||
|
"Tentou diversas estratégias de marketing sem ROI positivo.",
|
||||||
|
"Falta clareza e um passo a passo organizado.",
|
||||||
|
"Sente que está sempre apagando incêndios na operação."
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 border-y border-white/5 bg-neutral-950/50">
|
||||||
|
<div className="container mx-auto px-6 max-w-4xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-6">
|
||||||
|
Isso soa <span className="text-neutral-500">familiar?</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{problems.map((problem, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: i * 0.1 }}
|
||||||
|
className="p-6 rounded-2xl bg-red-500/5 border border-red-500/10 flex items-start gap-4"
|
||||||
|
>
|
||||||
|
<div className="mt-1">
|
||||||
|
<XCircle className="w-6 h-6 text-red-500" />
|
||||||
|
</div>
|
||||||
|
<p className="text-lg text-neutral-300 font-light">{problem}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
97
Template-01/src/components/Results.tsx
Normal file
97
Template-01/src/components/Results.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Play, Star } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Results() {
|
||||||
|
const videoTestimonials = [
|
||||||
|
{ name: "Luciana M.", result: "R$ 50k em 30 dias", thumb: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=500&h=800&fit=crop" },
|
||||||
|
{ name: "Carlos T.", result: "Escala em 3 Meses", thumb: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=500&h=800&fit=crop" },
|
||||||
|
{ name: "Mariana R.", result: "Conversão 3x Maior", thumb: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=500&h=800&fit=crop" },
|
||||||
|
{ name: "João V.", result: "Processos no Piloto", thumb: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&h=800&fit=crop" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const textTestimonials = [
|
||||||
|
{ name: "Rafael M.", role: "Empreendedor Digital", avatar: "https://i.pravatar.cc/100?img=33", content: "Eu não sabia por onde começar. O método me deu a estrutura exata e o design premium que faltava. Na primeira semana eu já tinha recuperado o investimento inteiro." },
|
||||||
|
{ name: "Camila V.", role: "Criadora de Conteúdo", avatar: "https://i.pravatar.cc/100?img=5", content: "A clareza dos módulos e o minimalismo nos templates são os grandes diferenciais. Consegui posicionar meu produto como high-ticket com esse visual." },
|
||||||
|
{ name: "Thiago H.", role: "Founder SaaS", avatar: "https://i.pravatar.cc/100?img=11", content: "Já tinha comprado mais de 5 treinamentos que só enchiam linguiça. Aqui foi direto ao ponto. A estética profissional me fez fechar 3 contratos B2B em 15 dias." },
|
||||||
|
{ name: "Amanda K.", role: "Especialista em UI/UX", avatar: "https://i.pravatar.cc/100?img=9", content: "Fiquei impressionada com o nível de acabamento. O material de apoio é de um primor absurdo. Mudou a forma que embalo meus entregáveis de consultoria." },
|
||||||
|
{ name: "Lucas F.", role: "Copywriter Sênior", avatar: "https://i.pravatar.cc/100?img=15", content: "Sempre sofri pra conectar uma boa copy com um design limpo. A estrutura resolveu esse gap pra mim. As páginas simplesmente vendem sozinhas agora." },
|
||||||
|
{ name: "Beatriz N.", role: "Mentora High Ticket", avatar: "https://i.pravatar.cc/100?img=20", content: "O melhor investimento no meu branding deste ano. O framework passa muita autoridade. Minha mentoria se esgotou poucas horas após atualizar a página." }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 border-y border-white/5 relative overflow-hidden bg-neutral-950/40" id="results">
|
||||||
|
<div className="absolute top-0 left-0 w-full h-[300px] bg-gradient-to-b from-black to-transparent pointer-events-none" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-6xl relative z-10">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-6 tracking-tight">
|
||||||
|
Validação <span className="text-neutral-500">imediata.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-neutral-400 font-light max-w-2xl mx-auto">
|
||||||
|
Fundadores e criadores que elevaram a percepção de valor de seus produtos, traduzindo design em resultados práticos.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Video Testimonials */}
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-20">
|
||||||
|
{videoTestimonials.map((t, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: i * 0.1 }}
|
||||||
|
className="relative aspect-[9/16] rounded-2xl overflow-hidden group cursor-pointer border border-white/10 bg-neutral-900"
|
||||||
|
>
|
||||||
|
<img src={t.thumb} alt={t.name} className="absolute inset-0 w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-700 group-hover:scale-105" />
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent" />
|
||||||
|
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="w-14 h-14 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center border border-white/20 group-hover:scale-110 group-hover:bg-white transition-all duration-300 group-hover:text-black text-white">
|
||||||
|
<Play className="w-6 h-6 ml-1" fill="currentColor" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-4 left-4 right-4 z-10">
|
||||||
|
<div className="font-medium text-white text-base mb-2">{t.name}</div>
|
||||||
|
<div className="text-xs text-neutral-300 font-medium bg-white/10 inline-block px-3 py-1.5 rounded-full backdrop-blur-md border border-white/10">
|
||||||
|
{t.result}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Text Testimonials */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{textTestimonials.map((t, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: i * 0.1 }}
|
||||||
|
className="relative rounded-3xl p-8 border border-white/5 bg-neutral-900/30 hover:bg-neutral-800/80 transition-colors group"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-1 mb-6">
|
||||||
|
{[...Array(5)].map((_, idx) => (
|
||||||
|
<Star key={idx} className="w-4 h-4 text-neutral-400 fill-neutral-400 group-hover:text-white group-hover:fill-white transition-colors" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-neutral-300 font-light leading-relaxed mb-8">
|
||||||
|
"{t.content}"
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-4 mt-auto">
|
||||||
|
<img src={t.avatar} className="w-12 h-12 rounded-full border border-white/10 grayscale group-hover:grayscale-0 transition-all" alt={t.name}/>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-medium text-sm">{t.name}</h4>
|
||||||
|
<span className="text-xs text-neutral-500">{t.role}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
71
Template-01/src/components/Testimonials.tsx
Normal file
71
Template-01/src/components/Testimonials.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Star } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Testimonials() {
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
name: "Sarah Jenkins",
|
||||||
|
role: "Creator & Founder",
|
||||||
|
content: "Lumina gave me the exact architecture I needed to scale my community to $50k/mo. The frameworks are plug-and-play and the results were immediate.",
|
||||||
|
avatar: "https://i.pravatar.cc/150?img=44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Marcus Chen",
|
||||||
|
role: "SaaS Entrepreneur",
|
||||||
|
content: "I've bought dozens of courses and tools. This is the only one that felt like an actual operating system for my business rather than just random tactics.",
|
||||||
|
avatar: "https://i.pravatar.cc/150?img=11"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Elena Rodriguez",
|
||||||
|
role: "Design Educator",
|
||||||
|
content: "The aesthetic alone sold me, but the backend systems are what actually changed my business. My conversion rate doubled in two weeks.",
|
||||||
|
avatar: "https://i.pravatar.cc/150?img=5"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 overflow-hidden relative" id="testimonials">
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-white/5 blur-[120px] rounded-full pointer-events-none" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-7xl relative z-10">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-medium mb-6 tracking-tight">
|
||||||
|
Trusted by top performers.
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-muted-foreground font-light max-w-2xl mx-auto">
|
||||||
|
Join thousands of creators who have already transformed their digital businesses.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{testimonials.map((t, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6, delay: i * 0.2 }}
|
||||||
|
className="p-8 rounded-3xl glass-panel relative group"
|
||||||
|
>
|
||||||
|
<div className="flex gap-1 mb-6">
|
||||||
|
{[...Array(5)].map((_, idx) => (
|
||||||
|
<Star key={idx} className="w-4 h-4 fill-white text-white" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-lg font-light text-neutral-300 leading-relaxed mb-8">
|
||||||
|
"{t.content}"
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-4 mt-auto">
|
||||||
|
<img src={t.avatar} alt={t.name} className="w-12 h-12 rounded-full object-cover border border-white/20" />
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-white">{t.name}</div>
|
||||||
|
<div className="text-sm text-neutral-500">{t.role}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
48
Template-01/src/hooks/useUTMForwarder.ts
Normal file
48
Template-01/src/hooks/useUTMForwarder.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Esse hook procura por links de checkout (que saem da página) e
|
||||||
|
* adiciona os parâmetros de URL (como UTMs) no final desses links.
|
||||||
|
*
|
||||||
|
* Assim, se o usuário entra via:
|
||||||
|
* meusite.com/?utm_source=facebook&utm_medium=stories
|
||||||
|
*
|
||||||
|
* Quando ele clicar em "Comprar", o link de checkout receberá esses mesmos parâmetros,
|
||||||
|
* garantindo que a venda seja rastreada perfeitamente.
|
||||||
|
*/
|
||||||
|
export function useUTMForwarder() {
|
||||||
|
useEffect(() => {
|
||||||
|
// Pega todos os parâmetros atuais da URL da landing page (UTMs, src, sck, etc)
|
||||||
|
const urlParams = window.location.search;
|
||||||
|
|
||||||
|
if (!urlParams) return;
|
||||||
|
|
||||||
|
// Encontra todas as tags de link (<a>) na página
|
||||||
|
const links = document.querySelectorAll('a');
|
||||||
|
|
||||||
|
links.forEach(link => {
|
||||||
|
const href = link.getAttribute('href');
|
||||||
|
|
||||||
|
// Checa se é um link externo de checkout ou similar
|
||||||
|
// Exemplo: https://pay.kiwify.com.br, https://pay.hotmart.com, ou links com http
|
||||||
|
if (href && href.startsWith('http') && !href.includes(window.location.host)) {
|
||||||
|
try {
|
||||||
|
const urlObj = new URL(href);
|
||||||
|
|
||||||
|
// Pega os parâmetros existentes na landing page e repassa pro link final
|
||||||
|
const params = new URLSearchParams(urlParams);
|
||||||
|
params.forEach((value, key) => {
|
||||||
|
// Se o link de checkout já não tiver esse UTM, ele adiciona
|
||||||
|
if (!urlObj.searchParams.has(key)) {
|
||||||
|
urlObj.searchParams.append(key, value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
link.setAttribute('href', urlObj.toString());
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Erro ao processar UTMs do link: ", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
80
Template-01/src/index.css
Normal file
80
Template-01/src/index.css
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--color-background: #050505;
|
||||||
|
--color-foreground: #ffffff;
|
||||||
|
|
||||||
|
--color-primary: #ffffff;
|
||||||
|
--color-primary-foreground: #000000;
|
||||||
|
|
||||||
|
--color-muted: #1a1a1a;
|
||||||
|
--color-muted-foreground: #a3a3a3;
|
||||||
|
|
||||||
|
--color-accent: #262626;
|
||||||
|
--color-accent-foreground: #ffffff;
|
||||||
|
|
||||||
|
--color-border: #262626;
|
||||||
|
|
||||||
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||||
|
--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
|
||||||
|
|
||||||
|
--animate-fade-in: fade-in 1s ease-out forwards;
|
||||||
|
--animate-slide-up: slide-up 0.8s ease-out forwards;
|
||||||
|
--animate-glow: glow 3s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--color-background);
|
||||||
|
color: var(--color-foreground);
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.text-gradient {
|
||||||
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-white via-neutral-300 to-neutral-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-panel {
|
||||||
|
@apply bg-white/5 backdrop-blur-xl border border-white/10 shadow-[0_8px_32px_0_rgba(0,0,0,0.3)];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glow {
|
||||||
|
from {
|
||||||
|
box-shadow: 0 0 20px -10px rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
box-shadow: 0 0 30px -5px rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
6
Template-01/src/lib/utils.ts
Normal file
6
Template-01/src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { clsx, type ClassValue } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
10
Template-01/src/main.tsx
Normal file
10
Template-01/src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import {StrictMode} from 'react';
|
||||||
|
import {createRoot} from 'react-dom/client';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
26
Template-01/tsconfig.json
Normal file
26
Template-01/tsconfig.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": [
|
||||||
|
"ES2022",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
24
Template-01/vite.config.ts
Normal file
24
Template-01/vite.config.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import path from 'path';
|
||||||
|
import {defineConfig, loadEnv} from 'vite';
|
||||||
|
|
||||||
|
export default defineConfig(({mode}) => {
|
||||||
|
const env = loadEnv(mode, '.', '');
|
||||||
|
return {
|
||||||
|
plugins: [react(), tailwindcss()],
|
||||||
|
define: {
|
||||||
|
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, '.'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
// HMR is disabled in AI Studio via DISABLE_HMR env var.
|
||||||
|
// Do not modifyâfile watching is disabled to prevent flickering during agent edits.
|
||||||
|
hmr: process.env.DISABLE_HMR !== 'true',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue