Deploy automático da Landing Page
This commit is contained in:
AI Studio Assistant
commit
e2ff036906
49 changed files with 6716 additions and 0 deletions
5
.dockerignore
Normal file
5
.dockerignore
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.git
|
||||||
|
.env
|
||||||
|
scripts
|
||||||
9
.env.example
Normal file
9
.env.example
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
# GEMINI_API_KEY: Required for Gemini AI API calls.
|
||||||
|
# AI Studio automatically injects this at runtime from user secrets.
|
||||||
|
# Users configure this via the Secrets panel in the AI Studio UI.
|
||||||
|
GEMINI_API_KEY="MY_GEMINI_API_KEY"
|
||||||
|
|
||||||
|
# APP_URL: The URL where this applet is hosted.
|
||||||
|
# AI Studio automatically injects this at runtime with the Cloud Run service URL.
|
||||||
|
# Used for self-referential links, OAuth callbacks, and API endpoints.
|
||||||
|
APP_URL="MY_APP_URL"
|
||||||
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
node_modules/
|
||||||
|
build/
|
||||||
|
dist/
|
||||||
|
coverage/
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
.env*
|
||||||
|
!.env.example
|
||||||
31
Dockerfile
Normal file
31
Dockerfile
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
# Build phase
|
||||||
|
FROM node:20-alpine AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy dependency info
|
||||||
|
COPY package.json package-lock.json ./
|
||||||
|
|
||||||
|
# Install all dependencies
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
# Copy the rest of the application code
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Build the application
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Serve phase
|
||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
# Copy the build output to replace the default nginx contents
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
# Copy our custom nginx configuration
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
# Expose port 8080
|
||||||
|
EXPOSE 8080
|
||||||
|
|
||||||
|
# Start nginx
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
132
index.html
Normal file
132
index.html
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
<!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 & Advanced Optimization -->
|
||||||
|
<title>Festa Mágica IA | O Primeiro Kit Festa Infantil Feito com Inteligência Artificial</title>
|
||||||
|
<meta name="description" content="A decoração de festa infantil mais exclusiva do mundo. Transformamos a foto do seu filho em um personagem 3D (estilo Pixar/Disney) aplicado em 21 itens prontos para imprimir. Crie agora!" />
|
||||||
|
<meta name="keywords" content="festa infantil personalizada, kit festa infantil, kit digital festa, convite personalizado infantil, topo de bolo personalizado, festa com Inteligência artificial" />
|
||||||
|
<meta name="author" content="Festa Mágica IA" />
|
||||||
|
<meta name="robots" content="index, follow" />
|
||||||
|
|
||||||
|
<!-- Open Graph / Redes Sociais -->
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Festa Mágica IA" />
|
||||||
|
<meta property="og:title" content="Transforme seu Filho em Personagem 3D | Festa Mágica IA" />
|
||||||
|
<meta property="og:description" content="Kit festa infantil 100% personalizado gerado por Inteligência Artificial. Convites, topos de bolo, lembrancinhas e muito mais em 2 minutos." />
|
||||||
|
<!-- Coloque aqui a URL de uma imagem sua para aparecer no WhatsApp (exemplo: 1200x630px) -->
|
||||||
|
<meta property="og:image" content="https://landpage.festamagicaia.com.br/share-card.jpeg" />
|
||||||
|
<meta property="og:image:width" content="1200" />
|
||||||
|
<meta property="og:image:height" content="630" />
|
||||||
|
<meta property="og:url" content="https://landpage.festamagicaia.com.br/" />
|
||||||
|
<meta property="og:locale" content="pt_BR" />
|
||||||
|
|
||||||
|
<!-- Twitter Cards -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Transforme seu Filho em Personagem 3D | Festa Mágica IA" />
|
||||||
|
<meta name="twitter:description" content="Kit festa infantil 100% personalizado gerado por IA. Convites, topos de bolo e mais." />
|
||||||
|
<meta name="twitter:image" content="https://landpage.festamagicaia.com.br/share-card.jpeg" />
|
||||||
|
|
||||||
|
<!-- Schema Markup (JSON-LD) -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Product",
|
||||||
|
"name": "Kit Festa Mágica IA",
|
||||||
|
"description": "Kit completo para festa infantil (21 itens) gerado por Inteligência Artificial, onde a criança vira o personagem principal em formato 3D estilo animação.",
|
||||||
|
"image": "https://landpage.festamagicaia.com.br/share-card.jpeg",
|
||||||
|
"brand": {
|
||||||
|
"@type": "Brand",
|
||||||
|
"name": "Festa Mágica IA"
|
||||||
|
},
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"url": "https://festamagicaia.com.br/",
|
||||||
|
"priceCurrency": "BRL",
|
||||||
|
"price": "9.90",
|
||||||
|
"availability": "https://schema.org/InStock",
|
||||||
|
"itemCondition": "https://schema.org/NewCondition"
|
||||||
|
},
|
||||||
|
"aggregateRating": {
|
||||||
|
"@type": "AggregateRating",
|
||||||
|
"ratingValue": "4.9",
|
||||||
|
"reviewCount": "5423"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "FAQPage",
|
||||||
|
"mainEntity": [{
|
||||||
|
"@type": "Question",
|
||||||
|
"name": "Como funciona a geração da arte em IA?",
|
||||||
|
"acceptedAnswer": {
|
||||||
|
"@type": "Answer",
|
||||||
|
"text": "Após a compra, você receberá acesso a um painel onde enviará 1 foto do corpo inteiro da criança (de preferência de frente) e escolherá o tema. A primeira foto gerada é por nossa conta e não gasta seus créditos! A nossa Inteligência Artificial vai fundir o rostinho da criança com o tema selecionado perfeitamente em estilo Pixar/Disney 3D e gerar 21 arquivos de papelaria."
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"@type": "Question",
|
||||||
|
"name": "Quanto tempo demora para o kit ficar pronto?",
|
||||||
|
"acceptedAnswer": {
|
||||||
|
"@type": "Answer",
|
||||||
|
"text": "O acesso a plataforma é imediato, o tempo da geração e formatação do PDF dos 21 itens demora em média 2 a 3 minutos."
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- ============================================== -->
|
||||||
|
<!-- 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 -->
|
||||||
|
<!-- ============================================== -->
|
||||||
|
<!-- Meta Pixel Code -->
|
||||||
|
<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', '1494357542144348');
|
||||||
|
fbq('track', 'PageView');
|
||||||
|
</script>
|
||||||
|
<!-- End Meta Pixel Code -->
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Facebook Pixel (noscript) -->
|
||||||
|
<noscript>
|
||||||
|
<img height="1" width="1" style="display:none"
|
||||||
|
src="https://www.facebook.com/tr?id=1494357542144348&ev=PageView&noscript=1"/>
|
||||||
|
</noscript>
|
||||||
|
<!-- ============================================== -->
|
||||||
|
<!-- 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
metadata.json
Normal file
6
metadata.json
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"name": "Festa Mágica IA",
|
||||||
|
"description": "Kit de festa infantil personalizado usando Inteligência Artificial. Transforme a foto do seu filho em 21 itens exclusivos estilo Pixar.",
|
||||||
|
"requestFramePermissions": [],
|
||||||
|
"majorCapabilities": []
|
||||||
|
}
|
||||||
11
nginx.conf
Normal file
11
nginx.conf
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
server {
|
||||||
|
listen 8080;
|
||||||
|
server_name _;
|
||||||
|
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
}
|
||||||
4400
package-lock.json
generated
Normal file
4400
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
38
package.json
Normal file
38
package.json
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"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.52.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",
|
||||||
|
"react-router-dom": "^7.15.0",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
8
public/.htaccess
Normal file
8
public/.htaccess
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<IfModule mod_rewrite.c>
|
||||||
|
RewriteEngine On
|
||||||
|
RewriteBase /
|
||||||
|
RewriteRule ^index\.html$ - [L]
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteRule . /index.html [L]
|
||||||
|
</IfModule>
|
||||||
1
public/_redirects
Normal file
1
public/_redirects
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/* /index.html 200
|
||||||
1
public/share-card.jpeg
Normal file
1
public/share-card.jpeg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<html><body>404</body></html>
|
||||||
64
scripts/deploy-forgejo.ts
Normal file
64
scripts/deploy-forgejo.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
const TOKEN = '53c0cc31a6cb27901dd29f1215d4ee5fe5064a19';
|
||||||
|
const DOMAIN = 'forgejo.seureview.com.br';
|
||||||
|
const USER = 'marciobever';
|
||||||
|
const REPO = 'festa-magica-ia';
|
||||||
|
|
||||||
|
async function deploy() {
|
||||||
|
try {
|
||||||
|
console.log(`Acessando API do Forgejo (${DOMAIN})...`);
|
||||||
|
const createRes = await fetch(`https://${DOMAIN}/api/v1/user/repos`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `token ${TOKEN}`,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: REPO,
|
||||||
|
private: true,
|
||||||
|
description: 'Landing Page Festa Mágica IA (Gerada no AI Studio)'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!createRes.ok) {
|
||||||
|
const errorText = await createRes.text();
|
||||||
|
console.log(`Aviso ao criar repo (Provavelmente já existe): ${errorText}`);
|
||||||
|
} else {
|
||||||
|
console.log('✅ Repositório criado com sucesso.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nConfigurando Git local e preparando commit...');
|
||||||
|
try { execSync('rm -rf .git'); } catch(e){}
|
||||||
|
|
||||||
|
execSync('git init', { stdio: 'inherit' });
|
||||||
|
execSync('git config user.name "AI Studio Assistant"', { stdio: 'inherit' });
|
||||||
|
execSync('git config user.email "macrolojauk@gmail.com"', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
execSync('git add .', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "Deploy automático da Landing Page"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
execSync('git branch -M main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
// Montamos a URL autenticada usando as credenciais providenciadas
|
||||||
|
const remoteUrl = `https://${USER}:${TOKEN}@${DOMAIN}/${USER}/${REPO}.git`;
|
||||||
|
execSync(`git remote add origin ${remoteUrl}`, { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código (Forçando atualização no main)...');
|
||||||
|
execSync('git push -u origin main --force', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Deploy concluído com sucesso!`);
|
||||||
|
console.log(`🔗 URL do Repositório: https://${DOMAIN}/${USER}/${REPO}`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro no script de deploy:', error.message);
|
||||||
|
if (error.stdout) console.error('STDOUT:', error.stdout.toString());
|
||||||
|
if (error.stderr) console.error('STDERR:', error.stderr.toString());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
deploy();
|
||||||
22
scripts/download-og.ts
Normal file
22
scripts/download-og.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import fs from "fs";
|
||||||
|
import https from "https";
|
||||||
|
import path from "path";
|
||||||
|
|
||||||
|
const dir = path.join(process.cwd(), "public");
|
||||||
|
if (!fs.existsSync(dir)) {
|
||||||
|
fs.mkdirSync(dir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileUrl = "https://images.unsplash.com/photo-1530103862676-de8892bc952f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&h=630&q=80";
|
||||||
|
const filePath = path.join(dir, "share-card.jpeg");
|
||||||
|
|
||||||
|
https.get(fileUrl, (res) => {
|
||||||
|
const fileStream = fs.createWriteStream(filePath);
|
||||||
|
res.pipe(fileStream);
|
||||||
|
fileStream.on("finish", () => {
|
||||||
|
fileStream.close();
|
||||||
|
console.log("Image downloaded to public/share-card.jpeg");
|
||||||
|
});
|
||||||
|
}).on("error", (err) => {
|
||||||
|
console.error("Error downloading image:", err);
|
||||||
|
});
|
||||||
23
scripts/fix-gateway-push.ts
Normal file
23
scripts/fix-gateway-push.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function fixAndPush() {
|
||||||
|
try {
|
||||||
|
console.log('\nAdicionando arquivos corrigidos para o Coolify (porta 8080)...');
|
||||||
|
execSync('git add Dockerfile nginx.conf scripts/fix-gateway-push.ts', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "fix(deploy): altera a porta do Nginx e Dockerfile para 8080 para evitar erro de Bad Gateway no Coolify"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Resolvido e push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fixAndPush();
|
||||||
46
scripts/fix-repo-and-push.ts
Normal file
46
scripts/fix-repo-and-push.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
const TOKEN = '53c0cc31a6cb27901dd29f1215d4ee5fe5064a19';
|
||||||
|
const DOMAIN = 'forgejo.seureview.com.br';
|
||||||
|
const USER = 'marciobever';
|
||||||
|
const REPO = 'festa-magica-ia';
|
||||||
|
|
||||||
|
async function updateAndPush() {
|
||||||
|
try {
|
||||||
|
console.log(`Tornando o repositório público (${DOMAIN})...`);
|
||||||
|
const patchRes = await fetch(`https://${DOMAIN}/api/v1/repos/${USER}/${REPO}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `token ${TOKEN}`,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
private: false
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!patchRes.ok) {
|
||||||
|
console.log(`Aviso ao atualizar repo:`, await patchRes.text());
|
||||||
|
} else {
|
||||||
|
console.log('✅ Repositório atualizado para PÚBLICO (resolve o erro de Username/Password no Coolify).');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nAdicionando Dockerfile e arquivos...');
|
||||||
|
execSync('git add Dockerfile .dockerignore nginx.conf scripts/fix-repo-and-push.ts', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "Adiciona Dockerfile e configuração Nginx para deploy SPA"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Resolvido e push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateAndPush();
|
||||||
23
scripts/push-footer-updates.ts
Normal file
23
scripts/push-footer-updates.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function pushUpdates() {
|
||||||
|
try {
|
||||||
|
console.log('\nAdicionando arquivos para atualizar o Footer e WhatsApp...');
|
||||||
|
execSync('git add src/components/Footer.tsx src/components/FloatingWhatsApp.tsx scripts/push-footer-updates.ts', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "fix(footer): atualiza cnpj, remove links extras e altera numero do whatsapp"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pushUpdates();
|
||||||
23
scripts/push-og-tags.ts
Normal file
23
scripts/push-og-tags.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function fixOGAndPush() {
|
||||||
|
try {
|
||||||
|
console.log('\nAdicionando arquivos para Open Graph Meta tags...');
|
||||||
|
execSync('git add index.html public/share-card.jpeg src/components/Hero.tsx', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "feat(og): adiciona open graph imagem e atualiza url da hero para melhorar o compartilhamento via whatsapp"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Push de OG Tags concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fixOGAndPush();
|
||||||
23
scripts/push-pixel.ts
Normal file
23
scripts/push-pixel.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function pushUpdates() {
|
||||||
|
try {
|
||||||
|
console.log('\nAdicionando arquivos limpos...');
|
||||||
|
execSync('git add -A', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "chore: remove unused lumina components"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pushUpdates();
|
||||||
23
scripts/push-protect-success.ts
Normal file
23
scripts/push-protect-success.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function pushUpdates() {
|
||||||
|
try {
|
||||||
|
console.log('\nProtegendo rota de sucesso...');
|
||||||
|
execSync('git add src/pages/SuccessPage.tsx', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "feat: protege rota de sucesso exigindo parametro na url do stripe"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pushUpdates();
|
||||||
23
scripts/push-remove-upsell.ts
Normal file
23
scripts/push-remove-upsell.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function pushUpdates() {
|
||||||
|
try {
|
||||||
|
console.log('\nRemovendo upsell da pagina de sucesso...');
|
||||||
|
execSync('git add src/pages/SuccessPage.tsx', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "refactor: remove upsell de convite animado da pagina de sucesso"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pushUpdates();
|
||||||
24
scripts/push-remove-whatsapp.ts
Normal file
24
scripts/push-remove-whatsapp.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function pushUpdates() {
|
||||||
|
try {
|
||||||
|
console.log('\nAdicionando arquivos para remover botão de WhatsApp...');
|
||||||
|
execSync('git add src/App.tsx scripts/push-remove-whatsapp.ts', { stdio: 'inherit' });
|
||||||
|
execSync('git rm src/components/FloatingWhatsApp.tsx', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "refactor: remove botão de whatsapp flutuante"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pushUpdates();
|
||||||
23
scripts/push-server-config.ts
Normal file
23
scripts/push-server-config.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function pushUpdates() {
|
||||||
|
try {
|
||||||
|
console.log('\nAdicionando arquivos de configuração de servidor...');
|
||||||
|
execSync('git add public/_redirects public/.htaccess vercel.json', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "build: adiciona regras de spa router para apche, netlify, cloudflare e vercel"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pushUpdates();
|
||||||
23
scripts/push-success-page.ts
Normal file
23
scripts/push-success-page.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function pushUpdates() {
|
||||||
|
try {
|
||||||
|
console.log('\nAdicionando arquivos para página de sucesso/vendas...');
|
||||||
|
execSync('git add package.json package-lock.json src/App.tsx src/pages/LandingPage.tsx src/pages/SuccessPage.tsx scripts/push-success-page.ts', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "feat: adiciona react-router-dom, refatora App para router e cria pagina oculta de sucesso"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pushUpdates();
|
||||||
23
scripts/push-update-success.ts
Normal file
23
scripts/push-update-success.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { execSync } from 'child_process';
|
||||||
|
|
||||||
|
async function pushUpdates() {
|
||||||
|
try {
|
||||||
|
console.log('\nAtualizando instruções da página de sucesso...');
|
||||||
|
execSync('git add src/pages/SuccessPage.tsx', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
execSync('git commit -m "feat: atualiza texto e adiciona cards de instrucao na pagina de sucesso"', { stdio: 'inherit' });
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Nada para commitar.');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\nFazendo push do código...');
|
||||||
|
execSync('git push origin main', { stdio: 'inherit' });
|
||||||
|
|
||||||
|
console.log(`\n🎉 Push concluído com sucesso!`);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('\n❌ Ocorreu um erro:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pushUpdates();
|
||||||
16
src/App.tsx
Normal file
16
src/App.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||||
|
import LandingPage from './pages/LandingPage';
|
||||||
|
import SuccessPage from './pages/SuccessPage';
|
||||||
|
import WhatsAppFunnel from './pages/WhatsAppFunnel';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<LandingPage />} />
|
||||||
|
<Route path="/sucesso" element={<SuccessPage />} />
|
||||||
|
<Route path="/funil" element={<WhatsAppFunnel />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
}
|
||||||
73
src/components/Benefits.tsx
Normal file
73
src/components/Benefits.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Sparkles, Printer, Clock, Wand2 } from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
export default function Benefits() {
|
||||||
|
const cards = [
|
||||||
|
{
|
||||||
|
title: "100% Personalizado",
|
||||||
|
description: "A Inteligência Artificial transforma a foto da criança em um personagem 3D ao estilo dos filmes mais amados do cinema, garantindo um tema exclusivo e mágico.",
|
||||||
|
icon: <Wand2 className="w-8 h-8 text-pink-500" />,
|
||||||
|
className: "md:col-span-2 bg-gradient-to-br from-pink-50 to-white hover:border-pink-300"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Arquivos em PDF",
|
||||||
|
description: "Esqueça dor de cabeça com formatação. Você recebe os itens em PDF, prontos para a impressora.",
|
||||||
|
icon: <Printer className="w-8 h-8 text-violet-500" />,
|
||||||
|
className: "md:col-span-1 bg-gradient-to-br from-indigo-50 to-white hover:border-violet-300"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Pronto na Hora",
|
||||||
|
description: "Sem espera interminável por encomenda. Seu kit completo é gerado quase instantaneamente.",
|
||||||
|
icon: <Clock className="w-8 h-8 text-amber-500" />,
|
||||||
|
className: "md:col-span-1 bg-gradient-to-br from-orange-50 to-white hover:border-amber-300"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "21 Itens Exclusivos",
|
||||||
|
description: "Convites interativos, caixa de pipoca, totens, saia de cupcake, tag de agradecimento, painéis, topo de bolo e muito mais.",
|
||||||
|
icon: <Sparkles className="w-8 h-8 text-pink-500" />,
|
||||||
|
className: "md:col-span-2 bg-gradient-to-r from-violet-50 to-pink-50 hover:border-pink-300"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 relative overflow-hidden bg-white" id="benefits">
|
||||||
|
<div className="absolute top-1/2 left-0 w-[500px] h-[500px] bg-pink-100/50 blur-[120px] rounded-full pointer-events-none -translate-y-1/2 opacity-60" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-6xl relative z-10">
|
||||||
|
<div className="mb-16 md:mb-20 text-center">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-bold mb-6 tracking-tight text-indigo-950">
|
||||||
|
A forma mais inovadora de <br className="hidden md:block"/><span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-violet-500">decorar a festa infantil.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-indigo-800/70 max-w-2xl mx-auto font-medium">
|
||||||
|
Tudo que você precisa para uma festa inesquecível, com a qualidade de um estúdio de animação.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-fr">
|
||||||
|
{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-[2.5rem] border-2 border-indigo-50/50 p-10 flex flex-col transition-all duration-300 group shadow-xl shadow-indigo-100/50 hover:shadow-2xl relative bg-white",
|
||||||
|
card.className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="w-16 h-16 rounded-2xl bg-white shadow-sm border border-indigo-50 flex items-center justify-center mb-10 group-hover:scale-110 transition-transform relative z-20 shrink-0">
|
||||||
|
{card.icon}
|
||||||
|
</div>
|
||||||
|
<div className="relative z-20 mt-auto">
|
||||||
|
<h3 className="text-2xl font-display font-bold mb-4 text-indigo-950">{card.title}</h3>
|
||||||
|
<p className="text-indigo-900/70 font-medium text-lg leading-relaxed">{card.description}</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
38
src/components/CTA.tsx
Normal file
38
src/components/CTA.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { ArrowRight, Sparkles } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function CTA() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 relative overflow-hidden bg-indigo-950">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-tr from-pink-600/20 to-violet-600/20 mix-blend-overlay" />
|
||||||
|
<div className="absolute -top-40 -right-40 w-[600px] h-[600px] bg-pink-500/20 blur-[100px] rounded-full pointer-events-none" />
|
||||||
|
<div className="absolute -bottom-40 -left-40 w-[600px] h-[600px] bg-violet-500/20 blur-[100px] rounded-full pointer-events-none" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-4xl relative z-10 text-center">
|
||||||
|
<h2 className="text-4xl md:text-6xl font-display font-bold text-white mb-8">
|
||||||
|
Pronta para fazer a melhor <br className="hidden md:block"/> festa do seu filho?
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-xl text-indigo-200 font-medium mb-10 max-w-2xl mx-auto">
|
||||||
|
Tire a ideia do papel hoje mesmo. Com Inteligência Artificial, sua festa sairá da imaginação direto para a sua casa em poucos minutos.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center justify-center gap-6">
|
||||||
|
<a
|
||||||
|
href="#oferta"
|
||||||
|
onClick={() => {
|
||||||
|
if (typeof window !== 'undefined' && 'fbq' in window) {
|
||||||
|
(window as any).fbq('track', 'InitiateCheckout');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="h-16 px-12 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-xl flex items-center justify-center gap-3 hover:scale-105 transition-all shadow-[0_0_40px_rgba(236,72,153,0.5)]"
|
||||||
|
>
|
||||||
|
Criar Minha Festa Agora <Sparkles className="w-5 h-5 animate-pulse" />
|
||||||
|
</a>
|
||||||
|
<span className="text-indigo-300 font-medium text-sm">
|
||||||
|
Pagamento 100% Seguro. Acesso Imediato.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
81
src/components/FAQ.tsx
Normal file
81
src/components/FAQ.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
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: "Como funciona a geração da arte em IA?",
|
||||||
|
a: "Após a compra, você receberá acesso a um painel onde enviará 1 foto do corpo inteiro da criança (de preferência de frente) e escolherá o tema. A primeira foto gerada é por nossa conta e não gasta seus créditos! A nossa Inteligência Artificial vai fundir o rostinho da criança com o tema selecionado perfeitamente em estilo Pixar/Disney 3D e gerar todos os arquivos de papelaria."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Preciso de algum programa pesado para imprimir?",
|
||||||
|
a: "De jeito nenhum! Nós entregamos os arquivos em formato PDF pronto na medida exata. Você só precisa abrir o arquivo e clicar em imprimir, seja na sua casa ou enviar para a gráfica rápida mais próxima."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Quanto tempo demora para o kit ficar pronto?",
|
||||||
|
a: "A transformação mágica pela Inteligência Artificial e a geração dos itens levam cerca de 2 a 5 minutos. É extremamente rápido e prático, perfeito para quem tem pressa."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Se eu não conseguir imprimir, vocês ajudam?",
|
||||||
|
a: "Nossa equipe de suporte está à disposição no WhatsApp de segunda a sexta para tirar suas dúvidas e dar todo apoio técnico necessário. Mas fique tranquila, entregamos tutoriais rápidos junto ao material!"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-white border-y border-pink-100">
|
||||||
|
<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-bold mb-4 text-indigo-950">Dúvidas Frequentes</h2>
|
||||||
|
<p className="text-indigo-500 font-medium text-lg">Tudo que você precisa saber.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{faqs.map((faq, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={cn(
|
||||||
|
"border-2 rounded-3xl overflow-hidden transition-colors duration-300",
|
||||||
|
openIndex === i ? "border-pink-300 bg-pink-50/50" : "border-pink-100 hover:border-pink-200"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => setOpenIndex(openIndex === i ? null : i)}
|
||||||
|
className="w-full px-8 py-6 flex items-center justify-between text-left focus:outline-none"
|
||||||
|
>
|
||||||
|
<span className="font-bold text-lg text-indigo-950 pr-8">{faq.q}</span>
|
||||||
|
{openIndex === i ? (
|
||||||
|
<div className="shrink-0 w-8 h-8 rounded-full bg-pink-200 flex items-center justify-center">
|
||||||
|
<Minus className="w-4 h-4 text-pink-600" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="shrink-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
|
||||||
|
<Plus className="w-4 h-4 text-indigo-500" />
|
||||||
|
</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, ease: "easeInOut" }}
|
||||||
|
>
|
||||||
|
<div className="px-8 pb-6 text-indigo-900/80 font-medium leading-relaxed">
|
||||||
|
{faq.a}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
18
src/components/Footer.tsx
Normal file
18
src/components/Footer.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="py-12 border-t border-pink-200 bg-pink-50">
|
||||||
|
<div className="container mx-auto px-6 max-w-5xl text-center text-indigo-900/60 font-medium 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 Meta.
|
||||||
|
Depois que você sair do Facebook, a responsabilidade não é deles e sim do nosso site.
|
||||||
|
</p>
|
||||||
|
<p className="mb-2">
|
||||||
|
Festa Mágica IA LTDA - CNPJ: 47.082.683/0001-37
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
© {new Date().getFullYear()} Festa Mágica IA. Todos os direitos reservados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
57
src/components/Gallery.tsx
Normal file
57
src/components/Gallery.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
export default function Gallery() {
|
||||||
|
const images = [
|
||||||
|
{ src: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/topo-de-bolo.webp", title: "Topo de Bolo 3D", desc: "Perfeito para destacar a mesa" },
|
||||||
|
{ src: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/adesivos-redondos.webp", title: "Adesivos Redondos", desc: "Ideais para potinhos" },
|
||||||
|
{ src: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/11362da2-027b-401e-bcad-28c86ef59ce8/caixa-de-pipoca.webp", title: "Caixa de Pipoca", desc: "A alegria garantida no lanche" },
|
||||||
|
{ src: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/convite-digital.webp", title: "Convite Digital", desc: "Para enviar no WhatsApp" },
|
||||||
|
{ src: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/9c8c4c80-2214-4c12-867b-1593e69e57c1/convite-digital.webp", title: "Convite Digital Animado", desc: "Mais vida e magia" },
|
||||||
|
{ src: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/611ff0db-b676-42d9-a10e-66f03e63837f/tag-de-agradecimento.webp", title: "Tag de Agradecimento", desc: "Pronto para as lembrancinhas" },
|
||||||
|
{ src: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/3ebc6785-7277-4463-a62c-943a24b88452/saia-de-cupcake.webp", title: "Saia de Cupcake", desc: "Mais estilo para os docinhos" },
|
||||||
|
{ src: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/e4b543aa-2106-4b92-9ef2-8a8954a58be4/chapu-de-festa.webp", title: "Chapéu de Festa", desc: "Divertido, personalizado e único" },
|
||||||
|
{ src: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/ac59765f-8f9d-4f11-8150-eb9a821f97e3/adesivos-quadrados.webp", title: "Adesivos Quadrados", desc: "Versáteis para decorar caixinhas" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-pink-50 relative overflow-hidden pb-32">
|
||||||
|
<div className="absolute -left-20 top-0 w-72 h-72 bg-violet-300 blur-[100px] rounded-full opacity-30" />
|
||||||
|
|
||||||
|
<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-bold mb-6 text-indigo-950">
|
||||||
|
Veja a magia <span className="text-gradient">acontecer.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-indigo-900/70 max-w-2xl mx-auto font-medium">
|
||||||
|
De uma simples foto para dezenas de itens prontos para transformar a sua festa.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
|
||||||
|
{images.map((img, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: i * 0.1 }}
|
||||||
|
className="break-inside-avoid relative rounded-[2rem] overflow-hidden bg-white border border-indigo-100 group shadow-lg hover:shadow-xl transition-all duration-300"
|
||||||
|
>
|
||||||
|
<div className="relative w-full overflow-hidden flex items-center justify-center p-6 bg-indigo-50/50">
|
||||||
|
<img
|
||||||
|
src={img.src}
|
||||||
|
alt={img.title}
|
||||||
|
className="w-full h-auto object-contain rounded-2xl drop-shadow-xl transition-transform duration-700 group-hover:scale-105 max-h-[400px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 bg-white border-t border-indigo-50">
|
||||||
|
<h3 className="font-display font-bold text-xl text-indigo-950 mb-1">{img.title}</h3>
|
||||||
|
<p className="text-sm font-medium text-indigo-900/60">{img.desc}</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
129
src/components/Hero.tsx
Normal file
129
src/components/Hero.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { ArrowRight, Play, Sparkles, Star } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Hero() {
|
||||||
|
return (
|
||||||
|
<section className="relative pt-32 pb-20 md:pt-40 md:pb-24 overflow-hidden bg-pink-50">
|
||||||
|
{/* Decorative Blobs */}
|
||||||
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] opacity-40 pointer-events-none">
|
||||||
|
<div className="absolute top-10 left-10 w-64 h-64 bg-pink-400 blur-[80px] rounded-full mix-blend-multiply opacity-50 animate-float" />
|
||||||
|
<div className="absolute top-20 right-10 w-72 h-72 bg-violet-400 blur-[80px] rounded-full mix-blend-multiply opacity-50 animate-pulse-slow" />
|
||||||
|
<div className="absolute -bottom-10 left-40 w-60 h-60 bg-yellow-300 blur-[80px] rounded-full mix-blend-multiply opacity-50 animate-float" style={{ animationDelay: '2s' }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Floating Elements / Stars */}
|
||||||
|
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||||
|
<Star className="absolute top-32 left-10 text-yellow-400 w-6 h-6 animate-pulse-slow" />
|
||||||
|
<Star className="absolute top-40 right-20 text-pink-400 w-8 h-8 animate-float" />
|
||||||
|
<div className="absolute top-[40%] left-[15%] w-3 h-3 rounded-full bg-violet-400 animate-bounce-slow" />
|
||||||
|
<div className="absolute top-[60%] right-[10%] w-4 h-4 rounded-full bg-pink-400 animate-float" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-7xl relative z-10">
|
||||||
|
<div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
|
||||||
|
{/* Text Content */}
|
||||||
|
<div className="flex-1 flex flex-col items-center lg:items-start text-center lg:text-left pt-10">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-pink-200 bg-white/60 backdrop-blur-md mb-8 text-pink-600 shadow-sm"
|
||||||
|
>
|
||||||
|
<Sparkles className="w-4 h-4 text-amber-500 animate-pulse" />
|
||||||
|
<span className="text-sm font-bold uppercase tracking-wider">A Festa do Ano Chegou</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-6xl xl:text-[4.5rem] tracking-tight leading-[1.1] font-display font-bold text-indigo-950 mb-6"
|
||||||
|
>
|
||||||
|
Transforme a foto do seu filho<br className="hidden md:block"/> em uma
|
||||||
|
<span className="text-gradient"> Festa Mágica!</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-indigo-800/80 mb-10 max-w-xl font-medium leading-relaxed"
|
||||||
|
>
|
||||||
|
Pare de gastar horas procurando decoração. Envie uma foto e nossa IA cria um <strong>Kit Digital com 21 Itens Exclusivos</strong>, com o rostinho do seu filho no estilo de personagens de cinema! Prontinho para imprimir.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.4 }}
|
||||||
|
className="flex flex-col sm:flex-row items-center gap-4 w-full justify-center lg:justify-start"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#oferta"
|
||||||
|
onClick={() => {
|
||||||
|
if (typeof window !== 'undefined' && 'fbq' in window) {
|
||||||
|
(window as any).fbq('track', 'InitiateCheckout');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="w-full sm:w-auto h-16 px-10 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-xl flex items-center justify-center gap-3 hover:scale-105 hover:shadow-2xl transition-all shadow-xl shadow-pink-500/30"
|
||||||
|
>
|
||||||
|
Criar Minha Festa Agora <Wand2Icon className="w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
<div className="flex flex-col items-center sm:items-start text-indigo-600/70 text-xs sm:text-sm mt-3 sm:mt-0 font-medium">
|
||||||
|
<div className="flex items-center gap-1 mb-1">
|
||||||
|
{[...Array(5)].map((_, i) => <Star key={i} className="w-4 h-4 text-amber-500 fill-amber-500" />)}
|
||||||
|
</div>
|
||||||
|
<span>Mais de 10.000 mães<br/>já fizeram a festa!</span>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Image Content */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95, rotate: -2 }}
|
||||||
|
animate={{ opacity: 1, scale: 1, rotate: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.3 }}
|
||||||
|
className="flex-1 w-full max-w-2xl lg:max-w-none relative"
|
||||||
|
>
|
||||||
|
{/* The Image from the User */}
|
||||||
|
<div className="relative rounded-[2rem] overflow-hidden border-8 border-white shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-500">
|
||||||
|
<img
|
||||||
|
src="https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/topo-de-bolo.webp"
|
||||||
|
className="w-full h-auto object-cover aspect-square md:aspect-[4/3] lg:aspect-square"
|
||||||
|
alt="Resultado impressionante de antes e depois da transformação da criança para personagem 3D de festa"
|
||||||
|
fetchPriority="high"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-[1.5rem]" />
|
||||||
|
|
||||||
|
{/* Badge floating */}
|
||||||
|
<div className="absolute top-6 right-6 bg-white rounded-2xl p-3 shadow-xl transform rotate-12 animate-float">
|
||||||
|
<div className="bg-pink-100 text-pink-600 font-bold text-xs px-3 py-1.5 rounded-lg mb-1 flex items-center gap-1">
|
||||||
|
<Sparkles className="w-3 h-3" /> Fica Perfeito
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Decorative background for the image */}
|
||||||
|
<div className="absolute -inset-6 bg-gradient-to-tr from-pink-400 to-violet-500 blur-2xl opacity-20 -z-10 rounded-full" />
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Wand2Icon({ className }: { className?: string }) {
|
||||||
|
return (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
|
||||||
|
<path d="M15 4V2"/>
|
||||||
|
<path d="M15 16v-2"/>
|
||||||
|
<path d="M8 9h2"/>
|
||||||
|
<path d="M20 9h2"/>
|
||||||
|
<path d="M17.8 11.8 19 13"/>
|
||||||
|
<path d="M15 9h0"/>
|
||||||
|
<path d="M17.8 6.2 19 5"/>
|
||||||
|
<path d="m3 21 9-9"/>
|
||||||
|
<path d="M12.2 6.2 11 5"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
63
src/components/HowItWorks.tsx
Normal file
63
src/components/HowItWorks.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
export default function HowItWorks() {
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
number: "01",
|
||||||
|
title: "Adquira seus Créditos",
|
||||||
|
description: "Comece escolhendo um pacote. Você recebe créditos na hora para gerar suas imagens.",
|
||||||
|
image: "https://festamagicaia.com.br/images/before-after.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: "02",
|
||||||
|
title: "A IA Cria a Mágica",
|
||||||
|
description: "Envie a foto da criança e para cada crédito, gere um item incrível com o personagem 3D perfeito nível cinema.",
|
||||||
|
image: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/convite-digital.webp"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: "03",
|
||||||
|
title: "Só Imprimir e Decorar",
|
||||||
|
description: "Enviamos o arquivo final em PDF pronto para levar pra gráfica ou imprimir em casa. Super fácil!",
|
||||||
|
image: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/adesivos-redondos.webp"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-indigo-950 border-y border-white/10" id="como-funciona">
|
||||||
|
<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-bold mb-6 tracking-tight text-white">
|
||||||
|
Como a <span className="text-pink-500">Mágica</span> Acontece
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-indigo-200 max-w-2xl mx-auto font-medium">
|
||||||
|
Em apenas 3 passos simples, você terá um kit de festa exclusivo que parece ter saído de um estúdio de cinema!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<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-full h-64 md:h-72 rounded-3xl overflow-hidden mb-6 border-4 border-indigo-900 shadow-2xl relative group-hover:scale-105 transition-transform duration-500">
|
||||||
|
<img src={step.image} alt={step.title} className="w-full h-full object-cover" />
|
||||||
|
<div className="absolute top-4 left-4 w-12 h-12 rounded-full bg-pink-500 flex items-center justify-center text-white font-display font-bold text-xl shadow-lg">
|
||||||
|
{step.number}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold mb-3 text-white">{step.title}</h3>
|
||||||
|
<p className="text-indigo-200 font-medium text-base leading-relaxed">{step.description}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
src/components/Navbar.tsx
Normal file
39
src/components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ArrowRight, Wand2 } 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-white/90 backdrop-blur-xl border-b border-pink-100 py-3 shadow-sm" : "bg-transparent py-5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-6 max-w-6xl flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3 group cursor-pointer">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-gradient-to-tr from-pink-400 to-violet-500 flex items-center justify-center transition-transform group-hover:scale-110 shadow-lg shadow-pink-500/30">
|
||||||
|
<Wand2 className="w-5 h-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<span className="font-display font-bold text-2xl tracking-tight text-indigo-950">Festa Mágica<span className="text-pink-500">IA</span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<a href="#oferta" className="h-11 px-6 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-semibold text-sm flex items-center gap-2 hover:shadow-[0_0_20px_rgba(236,72,153,0.4)] hover:scale-105 transition-all">
|
||||||
|
Criar Kit Agora <ArrowRight className="w-4 h-4" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
166
src/components/Offer.tsx
Normal file
166
src/components/Offer.tsx
Normal file
|
|
@ -0,0 +1,166 @@
|
||||||
|
import { useState, type FormEvent } from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Check, ShieldCheck, Gift, ArrowRight, Loader2 } from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
function getCookie(name: string) {
|
||||||
|
const match = document.cookie.match(
|
||||||
|
new RegExp('(^| )' + name + '=([^;]+)')
|
||||||
|
);
|
||||||
|
return match ? match[2] : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Offer() {
|
||||||
|
const benefits = [
|
||||||
|
"Criação do Personagem com IA Exclusivo",
|
||||||
|
"10 créditos na sua conta (1 imagem = 1 crédito)",
|
||||||
|
"Arquivos em PDF já formatados, prontos para impressão",
|
||||||
|
"Acesso imediato à plataforma"
|
||||||
|
];
|
||||||
|
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
const handleCheckout = async (e: FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!email) {
|
||||||
|
setError('Por favor, informe seu e-mail.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||||
|
setError('Por favor, informe um e-mail válido.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fire InitiateCheckout parameter for Meta Pixel
|
||||||
|
if (typeof window !== 'undefined' && 'fbq' in window) {
|
||||||
|
(window as any).fbq('track', 'InitiateCheckout');
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
const fbp = getCookie('_fbp');
|
||||||
|
const fbc = getCookie('_fbc');
|
||||||
|
|
||||||
|
console.log('FBP:', fbp);
|
||||||
|
console.log('FBC:', fbc);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch('https://n8n.seureview.com.br/webhook/festa-magica-stripe', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
source: 'landing',
|
||||||
|
userEmail: email,
|
||||||
|
fbp: fbp || '',
|
||||||
|
fbc: fbc || ''
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.success && data.url) {
|
||||||
|
window.location.href = data.url;
|
||||||
|
} else {
|
||||||
|
setError('Ocorreu um erro ao gerar o checkout. Tente novamente.');
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError('Erro de conexão. Verifique sua internet e tente novamente.');
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-indigo-950 relative overflow-hidden" id="oferta">
|
||||||
|
<div className="absolute top-0 right-0 w-full h-full bg-[url('https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/adesivos-redondos.webp')] bg-cover bg-center opacity-5 mix-blend-overlay" />
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-pink-500/20 blur-[130px] 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-4xl md:text-5xl font-display font-bold mb-4 text-white">
|
||||||
|
Crie a melhor festa que <br className="hidden md:block"/><span className="text-pink-400">seu filho já teve.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-indigo-200 text-lg">
|
||||||
|
Adquira o pacote inicial e receba <strong className="text-white">10 créditos para gerar itens exclusivos</strong> por um valor simbólico.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-[2.5rem] p-8 md:p-12 shadow-[0_30px_60px_-15px_rgba(236,72,153,0.3)] relative overflow-hidden flex flex-col md:flex-row items-center gap-12 max-w-4xl mx-auto border border-pink-100">
|
||||||
|
|
||||||
|
<div className="flex-1 w-full">
|
||||||
|
<h3 className="text-3xl font-display font-bold text-indigo-950 mb-6">
|
||||||
|
O Kit Mágico
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4 mb-8">
|
||||||
|
{benefits.map((benefit, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-4">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-pink-100 flex items-center justify-center shrink-0">
|
||||||
|
<Check className="w-4 h-4 text-pink-600" strokeWidth={3} />
|
||||||
|
</div>
|
||||||
|
<span className="text-indigo-900 font-medium text-lg leading-relaxed">{benefit}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-6 border-t border-indigo-100 flex items-center gap-3">
|
||||||
|
<Gift className="w-6 h-6 text-pink-500" />
|
||||||
|
<p className="text-indigo-800 font-bold">Surpreenda todos os convidados!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-[360px] rounded-3xl p-6 md:p-8 text-center flex flex-col justify-center relative bg-gradient-to-b from-indigo-50 to-white border border-indigo-100 shadow-inner">
|
||||||
|
<div className="mb-4 text-pink-600 font-bold text-sm tracking-[0.2em] uppercase">Pacote Inicial</div>
|
||||||
|
|
||||||
|
<div className="flex items-start justify-center mb-1">
|
||||||
|
<span className="text-2xl font-bold text-indigo-950 mt-2 mr-1">R$</span>
|
||||||
|
<span className="text-8xl font-display font-black tracking-tight text-indigo-950">9</span>
|
||||||
|
<span className="text-2xl font-bold mb-1 text-indigo-950 mt-2">,99</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-indigo-500 font-medium mb-6">Pagamento único. Acesso imediato.</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleCheckout} className="flex flex-col gap-3 w-full mb-4">
|
||||||
|
<div className="flex flex-col gap-1 text-left">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => {
|
||||||
|
setEmail(e.target.value);
|
||||||
|
if (error) setError('');
|
||||||
|
}}
|
||||||
|
placeholder="Seu melhor e-mail"
|
||||||
|
className={cn(
|
||||||
|
"w-full h-14 px-5 rounded-full border-2 bg-white outline-none transition-all placeholder:text-gray-400 font-medium",
|
||||||
|
error ? "border-red-400 focus:border-red-500" : "border-indigo-100 focus:border-pink-500/50"
|
||||||
|
)}
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
{error && <span className="text-red-500 text-xs px-2 font-medium">{error}</span>}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full h-16 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-lg hover:shadow-[0_0_30px_rgba(236,72,153,0.5)] hover:scale-105 transition-all flex items-center justify-center gap-2 disabled:opacity-70 disabled:hover:scale-100 disabled:hover:shadow-none"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<>Gerando Pedido... <Loader2 className="w-5 h-5 animate-spin" /></>
|
||||||
|
) : (
|
||||||
|
<>Gerar Tema Agora <ArrowRight className="w-5 h-5" /></>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center gap-2 text-sm text-indigo-400 font-medium">
|
||||||
|
<ShieldCheck className="w-5 h-5 text-emerald-500" />
|
||||||
|
<span>Compra 100% segura pelo Stripe.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
63
src/components/Problem.tsx
Normal file
63
src/components/Problem.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { XCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Problem() {
|
||||||
|
const problems = [
|
||||||
|
"Orçamentos de decoração que chegam a R$ 2.000,00.",
|
||||||
|
"Aquela correria louca atrás de lojas e fornecedores.",
|
||||||
|
"A frustração de ver todo ano 'os mesmos temas'.",
|
||||||
|
"Não ter tempo ou habilidade para desenhar lembrancinhas do zero."
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 border-y border-pink-100 bg-white">
|
||||||
|
<div className="container mx-auto px-6 max-w-6xl">
|
||||||
|
<div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">
|
||||||
|
|
||||||
|
{/* Left Text / Problems List */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="text-3xl md:text-5xl font-display font-bold mb-8 text-indigo-950">
|
||||||
|
Sua vida de mãe já é corrida. <br className="hidden md:block"/><span className="text-pink-500">A festa não precisa ser um caos.</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{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-5 rounded-2xl bg-pink-50 border border-pink-100 flex items-start gap-4 hover:shadow-lg transition-shadow"
|
||||||
|
>
|
||||||
|
<div className="mt-1 bg-pink-200 rounded-full p-1 shrink-0">
|
||||||
|
<XCircle className="w-5 h-5 text-pink-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-lg text-indigo-900 font-medium">{problem}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Image/Illustration */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="flex-1 w-full"
|
||||||
|
>
|
||||||
|
<div className="relative rounded-[2.5rem] overflow-hidden shadow-2xl border-4 border-white bg-slate-100">
|
||||||
|
<img src="https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/topo-de-bolo.webp" alt="Solução mágica" className="w-full h-auto object-contain opacity-95 hover:scale-105 transition-transform duration-500" />
|
||||||
|
<div className="absolute inset-0 bg-indigo-950/10 mix-blend-multiply pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
{/* Small floating badge */}
|
||||||
|
<div className="absolute top-[60%] sm:right-[10%] bg-white rounded-xl p-4 shadow-xl z-20 animate-bounce-slow">
|
||||||
|
<p className="text-indigo-900 font-bold text-sm">Fim da correria 😍</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
59
src/components/Results.tsx
Normal file
59
src/components/Results.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Star, Heart } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Results() {
|
||||||
|
const textTestimonials = [
|
||||||
|
{ name: "Juliana Mendes", role: "Mãe do Pedro (4 anos)", avatar: "https://i.pravatar.cc/100?img=5", content: "Gente, eu não acreditei quando vi! O Pedro pirou quando viu ele vestido de astronauta no convite. Todo mundo da escola elogiou, foi muito incrível e super barato." },
|
||||||
|
{ name: "Camila V.", role: "Mãe da Alice (6 anos)", avatar: "https://i.pravatar.cc/100?img=9", content: "Eu tava desesperada porque deixei tudo pra última hora. Criei o kit, imprimi na gráfica da esquina e a festa ficou parecendo de decoradora cara. Salvaram a vida!" },
|
||||||
|
{ name: "Fernanda Costa", role: "Decoradora", avatar: "https://i.pravatar.cc/100?img=11", content: "Trabalho com festas e agora ofereço essa opção VIP para minhas clientes. A IA gera imagens perfeitas e de altíssima resolução. É o futuro da papelaria." },
|
||||||
|
{ name: "Amanda K.", role: "Mãe do Leo (2 anos)", avatar: "https://i.pravatar.cc/100?img=15", content: "A festinha foi na creche, fiz tudo na minha impressora de casa mesmo. Recortei e colei os rótulos de guaraná e as marmitinhas. Ficou um luxo, muito maravilhoso." },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 relative overflow-hidden bg-white" id="results">
|
||||||
|
<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-bold mb-6 tracking-tight text-indigo-950">
|
||||||
|
Mamães <span className="text-pink-500">encantadas.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-indigo-900/70 font-medium max-w-2xl mx-auto">
|
||||||
|
Veja quem já transformou a festa dos filhos em um verdadeiro universo mágico Pixar!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Text Testimonials */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
||||||
|
{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-2 border-pink-100 bg-pink-50/50 hover:bg-pink-100/50 transition-colors group shadow-sm hover:shadow-md"
|
||||||
|
>
|
||||||
|
<div className="absolute -top-4 -right-4 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-md rotate-12">
|
||||||
|
<Heart className="w-6 h-6 text-pink-500 fill-pink-500" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1 mb-6">
|
||||||
|
{[...Array(5)].map((_, idx) => (
|
||||||
|
<Star key={idx} className="w-5 h-5 text-amber-400 fill-amber-400" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-indigo-900 font-medium leading-relaxed mb-8 italic">
|
||||||
|
"{t.content}"
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-4 mt-auto">
|
||||||
|
<img src={t.avatar} className="w-14 h-14 rounded-full border-2 border-white shadow-sm" alt={t.name}/>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-indigo-950 font-bold text-base">{t.name}</h4>
|
||||||
|
<span className="text-sm text-pink-600 font-medium">{t.role}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
48
src/components/StickyMobileCTA.tsx
Normal file
48
src/components/StickyMobileCTA.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import { Wand2 } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function StickyMobileCTA() {
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
// Show when scrolling down a bit (past the hero)
|
||||||
|
const scrolled = window.scrollY > 400;
|
||||||
|
|
||||||
|
// Hide if near the bottom (where the offer/footer is)
|
||||||
|
const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight - 600;
|
||||||
|
|
||||||
|
setIsVisible(scrolled && !bottom);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isVisible && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: 100, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
exit={{ y: 100, opacity: 0 }}
|
||||||
|
transition={{ type: "spring", stiffness: 260, damping: 20 }}
|
||||||
|
className="fixed bottom-4 left-4 right-4 z-[100] md:hidden"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#oferta"
|
||||||
|
onClick={() => {
|
||||||
|
if (typeof window !== 'undefined' && 'fbq' in window) {
|
||||||
|
(window as any).fbq('track', 'InitiateCheckout');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="w-full h-14 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-lg flex items-center justify-center gap-2 shadow-[0_10px_40px_-10px_rgba(236,72,153,0.8)] border border-white/20 active:scale-95 transition-transform"
|
||||||
|
>
|
||||||
|
Criar Minha Festa <Wand2 className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
49
src/components/VideoDemonstration.tsx
Normal file
49
src/components/VideoDemonstration.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
export default function VideoDemonstration() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-white relative overflow-hidden" id="video">
|
||||||
|
{/* Decorative Elements */}
|
||||||
|
<div className="absolute top-0 right-0 w-96 h-96 bg-pink-300 blur-[100px] rounded-full mix-blend-multiply opacity-20 -z-10 pointer-events-none translate-x-1/2 -translate-y-1/2" />
|
||||||
|
<div className="absolute bottom-0 left-0 w-96 h-96 bg-violet-300 blur-[100px] rounded-full mix-blend-multiply opacity-20 -z-10 pointer-events-none -translate-x-1/2 translate-y-1/2" />
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 max-w-4xl">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-3xl md:text-5xl font-display font-bold mb-6 tracking-tight text-indigo-950"
|
||||||
|
>
|
||||||
|
Veja como é Fácil Criar a <span className="text-gradient">Festa dos Sonhos</span>
|
||||||
|
</motion.h2>
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="text-lg text-indigo-800/80 max-w-2xl mx-auto font-medium"
|
||||||
|
>
|
||||||
|
Nossa Inteligência Artificial cuida de tudo. Dê o play e veja a Mágica acontecer na prática!
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="relative rounded-[2rem] overflow-hidden border-8 border-pink-100 shadow-[0_20px_50px_-20px_rgba(236,72,153,0.3)] bg-indigo-950"
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
src="https://s3.seureview.com.br/festamagica/0510(2).mp4"
|
||||||
|
className="w-full h-auto object-cover"
|
||||||
|
controls
|
||||||
|
preload="metadata"
|
||||||
|
playsInline
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
48
src/hooks/useUTMForwarder.ts
Normal file
48
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
72
src/index.css
Normal file
72
src/index.css
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--color-background: #fdf2f8; /* pink-50 */
|
||||||
|
--color-foreground: #3730a3; /* indigo-800 */
|
||||||
|
|
||||||
|
--color-primary: #ec4899; /* pink-500 */
|
||||||
|
--color-primary-foreground: #ffffff;
|
||||||
|
|
||||||
|
--color-muted: #fce7f3; /* pink-100 */
|
||||||
|
--color-muted-foreground: #6366f1; /* indigo-500 */
|
||||||
|
|
||||||
|
--color-accent: #f87171; /* red-400 */
|
||||||
|
--color-accent-foreground: #ffffff;
|
||||||
|
|
||||||
|
--color-border: #fbcfe8; /* pink-200 */
|
||||||
|
|
||||||
|
--font-sans: "Quicksand", ui-sans-serif, system-ui, sans-serif;
|
||||||
|
--font-display: "Fredoka", ui-sans-serif, system-ui, sans-serif;
|
||||||
|
|
||||||
|
--animate-bounce-slow: bounce-slow 3s ease-in-out infinite;
|
||||||
|
--animate-float: float 4s ease-in-out infinite;
|
||||||
|
--animate-pulse-slow: pulse-slow 3s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
color-scheme: light;
|
||||||
|
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);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.text-gradient {
|
||||||
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-panel {
|
||||||
|
@apply bg-white/70 backdrop-blur-xl border border-white shadow-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce-slow {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-15px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0% { transform: translateY(0px) rotate(0deg); }
|
||||||
|
50% { transform: translateY(-10px) rotate(2deg); }
|
||||||
|
100% { transform: translateY(0px) rotate(0deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-slow {
|
||||||
|
from { opacity: 0.8; transform: scale(1); }
|
||||||
|
to { opacity: 1; transform: scale(1.05); }
|
||||||
|
}
|
||||||
6
src/lib/utils.ts
Normal file
6
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
src/main.tsx
Normal file
10
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>,
|
||||||
|
);
|
||||||
59
src/pages/LandingPage.tsx
Normal file
59
src/pages/LandingPage.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { motion, useScroll, useSpring } from 'framer-motion';
|
||||||
|
import Navbar from '../components/Navbar';
|
||||||
|
import Hero from '../components/Hero';
|
||||||
|
import VideoDemonstration from '../components/VideoDemonstration';
|
||||||
|
import Problem from '../components/Problem';
|
||||||
|
import HowItWorks from '../components/HowItWorks';
|
||||||
|
import Benefits from '../components/Benefits';
|
||||||
|
import Gallery from '../components/Gallery';
|
||||||
|
import Offer from '../components/Offer';
|
||||||
|
import FAQ from '../components/FAQ';
|
||||||
|
import CTA from '../components/CTA';
|
||||||
|
import Footer from '../components/Footer';
|
||||||
|
import Results from '../components/Results';
|
||||||
|
import StickyMobileCTA from '../components/StickyMobileCTA';
|
||||||
|
import { useUTMForwarder } from '../hooks/useUTMForwarder';
|
||||||
|
|
||||||
|
export default function LandingPage() {
|
||||||
|
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();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Fire ViewContent parameter for Meta Pixel
|
||||||
|
if (typeof window !== 'undefined' && 'fbq' in window) {
|
||||||
|
(window as any).fbq('track', 'ViewContent');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-pink-50 text-indigo-900 selection:bg-pink-300 selection:text-indigo-950 font-sans overflow-x-hidden">
|
||||||
|
<motion.div
|
||||||
|
className="fixed top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-pink-400 via-violet-400 to-amber-400 origin-left z-50"
|
||||||
|
style={{ scaleX }}
|
||||||
|
/>
|
||||||
|
<Navbar />
|
||||||
|
<main>
|
||||||
|
<Hero />
|
||||||
|
<VideoDemonstration />
|
||||||
|
<Problem />
|
||||||
|
<HowItWorks />
|
||||||
|
<Benefits />
|
||||||
|
<Gallery />
|
||||||
|
<Results />
|
||||||
|
<Offer />
|
||||||
|
<FAQ />
|
||||||
|
<CTA />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
<StickyMobileCTA />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
80
src/pages/SuccessPage.tsx
Normal file
80
src/pages/SuccessPage.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useSearchParams, useNavigate } from "react-router-dom";
|
||||||
|
import { CheckCircle, Mail, LayoutDashboard, Sparkles } from "lucide-react";
|
||||||
|
import Footer from "../components/Footer";
|
||||||
|
|
||||||
|
export default function SuccessPage() {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [isValid, setIsValid] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// O Stripe passa 'session_id' automaticamente quando redireciona,
|
||||||
|
// Ou podemos checar um parâmetro manual como '?status=approved'
|
||||||
|
const sessionId = searchParams.get("session_id");
|
||||||
|
const status = searchParams.get("status");
|
||||||
|
|
||||||
|
if (sessionId || status === "approved") {
|
||||||
|
setIsValid(true);
|
||||||
|
} else {
|
||||||
|
// Se não tiver nenhum parâmetro válido, joga de volta pra home
|
||||||
|
navigate("/", { replace: true });
|
||||||
|
}
|
||||||
|
}, [searchParams, navigate]);
|
||||||
|
|
||||||
|
if (!isValid) {
|
||||||
|
return null; // Retorna nulo enquanto valida para não piscar a tela
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-pink-50 text-indigo-900 selection:bg-pink-300 font-sans flex flex-col">
|
||||||
|
<main className="flex-1 py-12 px-4 md:px-6 flex items-center justify-center">
|
||||||
|
<div className="max-w-5xl mx-auto w-full">
|
||||||
|
{/* Success Banner */}
|
||||||
|
<section className="text-center bg-white rounded-3xl p-8 md:p-12 shadow-xl border border-pink-100">
|
||||||
|
<CheckCircle className="w-20 h-20 text-emerald-500 mx-auto mb-6" />
|
||||||
|
<h1 className="text-3xl md:text-5xl font-display font-bold text-indigo-950 mb-4">
|
||||||
|
Pagamento Confirmado!
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-indigo-600 md:text-xl max-w-2xl mx-auto mb-12">
|
||||||
|
Tudo certo com o seu pedido! Preparamos tudo para você começar a criar a festa dos sonhos em instantes.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-6 text-left max-w-4xl mx-auto">
|
||||||
|
<div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
|
||||||
|
<div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-pink-500 mb-4">
|
||||||
|
<Mail className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-indigo-950 text-lg mb-2">1. Fique de olho no e-mail</h3>
|
||||||
|
<p className="text-indigo-700/80 text-sm leading-relaxed">
|
||||||
|
Em até 5 minutos, você receberá um e-mail de confirmação com a nota do seu pedido e todos os detalhes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
|
||||||
|
<div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-violet-500 mb-4">
|
||||||
|
<LayoutDashboard className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-indigo-950 text-lg mb-2">2. Acesse o Painel</h3>
|
||||||
|
<p className="text-indigo-700/80 text-sm leading-relaxed">
|
||||||
|
No mesmo e-mail, enviaremos um <strong>link de acesso exclusivo</strong> direto para o nosso Painel de Criação Mágica. Não se preocupe em criar conta!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
|
||||||
|
<div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-amber-500 mb-4">
|
||||||
|
<Sparkles className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-indigo-950 text-lg mb-2">3. Crie a Magia</h3>
|
||||||
|
<p className="text-indigo-700/80 text-sm leading-relaxed">
|
||||||
|
Dentro do painel, siga as instruções rápidas, faça o upload da foto e deixe a inteligência artificial transformar tudo em um kit inesquecível!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
471
src/pages/WhatsAppFunnel.tsx
Normal file
471
src/pages/WhatsAppFunnel.tsx
Normal file
|
|
@ -0,0 +1,471 @@
|
||||||
|
import { useState, useEffect, useRef, type FormEvent } from 'react';
|
||||||
|
import { Loader2, Send } from 'lucide-react';
|
||||||
|
|
||||||
|
type MessageType = 'text' | 'audio' | 'image' | 'video' | 'embed';
|
||||||
|
|
||||||
|
interface MessageConfig {
|
||||||
|
text: string;
|
||||||
|
delay?: number;
|
||||||
|
type?: MessageType;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OptionConfig {
|
||||||
|
text: string;
|
||||||
|
nextId?: string;
|
||||||
|
actionLink?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FunnelNode {
|
||||||
|
id: string;
|
||||||
|
messages: MessageConfig[];
|
||||||
|
options?: OptionConfig[];
|
||||||
|
requireEmail?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RenderedMessage {
|
||||||
|
id: string;
|
||||||
|
sender: 'bot' | 'user';
|
||||||
|
type: MessageType;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const funnelData: FunnelNode[] = [
|
||||||
|
{
|
||||||
|
id: "start",
|
||||||
|
messages: [
|
||||||
|
{ text: "Oi! 👋 Tudo bem? Sou do atendimento da Festa Mágica IA.", delay: 1000, type: "text" },
|
||||||
|
{ text: "Posso te mostrar rapidinho como criar a festa do seu filho gastando muito menos?", delay: 1500, type: "text" }
|
||||||
|
],
|
||||||
|
options: [
|
||||||
|
{ text: "Pode!", nextId: "step2" },
|
||||||
|
{ text: "Como assim?", nextId: "step2" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "step2",
|
||||||
|
messages: [
|
||||||
|
{ text: "Mandar fazer personalizados é caro e demora, né?", delay: 1800, type: "text" },
|
||||||
|
{ text: "Nossa Inteligência Artificial permite que você mesmo faça tudo na hora, do celular.", delay: 2000, type: "text" },
|
||||||
|
{ text: "Assiste esse vídeo aqui embaixo que mostra a ferramenta funcionando e como é fácil criar as imagens e os kits👇", delay: 1500, type: "text" },
|
||||||
|
{ text: "https://s3.seureview.com.br/festamagica/0510(2).mp4", delay: 2000, type: "video" }
|
||||||
|
],
|
||||||
|
options: [
|
||||||
|
{ text: "Que legal!", nextId: "step3" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "step3",
|
||||||
|
messages: [
|
||||||
|
{ text: "Legal né? A IA cria um personagem 3D super realista tipo Disney/Pixar com o rostinho dele(a)!", delay: 1800, type: "text" },
|
||||||
|
{ text: "Ela já gera todos os arquivos em PDF prontinhos. Olha esses exemplos:", delay: 1500, type: "text" },
|
||||||
|
{ text: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/adesivos-redondos.webp", delay: 1500, type: "image" },
|
||||||
|
{ text: "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/convite-digital.webp", delay: 1500, type: "image" },
|
||||||
|
{ text: "Dá para fazer topo de bolo, painel, convite, adesivo... tudo no tema.", delay: 1800, type: "text" }
|
||||||
|
],
|
||||||
|
options: [
|
||||||
|
{ text: "Amei! Quanto custa?", nextId: "step4" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "step4",
|
||||||
|
messages: [
|
||||||
|
{ text: "Bem menos que você imagina! 🥰", delay: 1200, type: "text" },
|
||||||
|
{ text: "Liberamos um Pacote Inicial promocional por apenas R$ 9,99 (pagamento único).", delay: 1500, type: "text" },
|
||||||
|
{ text: "Você já entra com 10 créditos para usar como quiser na nossa plataforma.", delay: 1500, type: "text" },
|
||||||
|
{ text: "Quer garantir agora antes que o lote acabe?", delay: 1200, type: "text" }
|
||||||
|
],
|
||||||
|
options: [
|
||||||
|
{ text: "Eu quero!", nextId: "checkout_step" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "checkout_step",
|
||||||
|
messages: [
|
||||||
|
{ text: "Ótimo! Pra gente gerar o seu acesso seguro, qual é o seu melhor e-mail?", delay: 1000, type: "text" }
|
||||||
|
],
|
||||||
|
requireEmail: true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
let sharedAudioCtx: AudioContext | null = null;
|
||||||
|
function getAudioContext() {
|
||||||
|
if (!sharedAudioCtx) {
|
||||||
|
const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext;
|
||||||
|
if (AudioContextClass) {
|
||||||
|
sharedAudioCtx = new AudioContextClass();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return sharedAudioCtx;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCookie(name: string) {
|
||||||
|
const match = document.cookie.match(
|
||||||
|
new RegExp('(^| )' + name + '=([^;]+)')
|
||||||
|
);
|
||||||
|
return match ? match[2] : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function playMessageSound() {
|
||||||
|
try {
|
||||||
|
const ctx = getAudioContext();
|
||||||
|
if (!ctx) return;
|
||||||
|
if (ctx.state === 'suspended') ctx.resume();
|
||||||
|
const osc = ctx.createOscillator();
|
||||||
|
const gain = ctx.createGain();
|
||||||
|
osc.connect(gain);
|
||||||
|
gain.connect(ctx.destination);
|
||||||
|
osc.type = 'sine';
|
||||||
|
osc.frequency.setValueAtTime(800, ctx.currentTime);
|
||||||
|
osc.frequency.exponentialRampToValueAtTime(300, ctx.currentTime + 0.1);
|
||||||
|
gain.gain.setValueAtTime(0.2, ctx.currentTime);
|
||||||
|
gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1);
|
||||||
|
osc.start(ctx.currentTime);
|
||||||
|
osc.stop(ctx.currentTime + 0.1);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playTypingSound() {
|
||||||
|
try {
|
||||||
|
const ctx = getAudioContext();
|
||||||
|
if (!ctx) return;
|
||||||
|
if (ctx.state === 'suspended') ctx.resume();
|
||||||
|
const osc = ctx.createOscillator();
|
||||||
|
const gain = ctx.createGain();
|
||||||
|
osc.connect(gain);
|
||||||
|
gain.connect(ctx.destination);
|
||||||
|
osc.type = 'triangle';
|
||||||
|
osc.frequency.setValueAtTime(200, ctx.currentTime);
|
||||||
|
gain.gain.setValueAtTime(0.01, ctx.currentTime);
|
||||||
|
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.05);
|
||||||
|
osc.start(ctx.currentTime);
|
||||||
|
osc.stop(ctx.currentTime + 0.05);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WhatsAppFunnel() {
|
||||||
|
const [messages, setMessages] = useState<RenderedMessage[]>([]);
|
||||||
|
const [isTyping, setIsTyping] = useState(false);
|
||||||
|
const [currentOptions, setCurrentOptions] = useState<OptionConfig[]>([]);
|
||||||
|
const [currentRequireEmail, setCurrentRequireEmail] = useState(false);
|
||||||
|
const [emailInput, setEmailInput] = useState('');
|
||||||
|
const [isLoadingCheckout, setIsLoadingCheckout] = useState(false);
|
||||||
|
|
||||||
|
const chatEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const scrollToBottom = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
const playNode = async (nodeId: string) => {
|
||||||
|
setCurrentOptions([]);
|
||||||
|
setCurrentRequireEmail(false);
|
||||||
|
|
||||||
|
const node = funnelData.find((n) => n.id === nodeId);
|
||||||
|
if (!node) return;
|
||||||
|
|
||||||
|
for (let i = 0; i < node.messages.length; i++) {
|
||||||
|
const msg = node.messages[i];
|
||||||
|
|
||||||
|
const delayBefore = msg.delay
|
||||||
|
? msg.delay
|
||||||
|
: ((msg.type && msg.type !== 'text') ? 1500 : Math.min(400 + (msg.text.length * 30), 3000));
|
||||||
|
|
||||||
|
setIsTyping(true);
|
||||||
|
scrollToBottom();
|
||||||
|
|
||||||
|
const typingInterval = setInterval(() => {
|
||||||
|
if (Math.random() > 0.3) playTypingSound();
|
||||||
|
}, 150);
|
||||||
|
|
||||||
|
await new Promise((r) => setTimeout(r, delayBefore));
|
||||||
|
|
||||||
|
clearInterval(typingInterval);
|
||||||
|
setIsTyping(false);
|
||||||
|
|
||||||
|
playMessageSound();
|
||||||
|
setMessages((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
id: Math.random().toString(),
|
||||||
|
sender: 'bot',
|
||||||
|
type: msg.type || 'text',
|
||||||
|
content: msg.text,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
scrollToBottom();
|
||||||
|
|
||||||
|
await new Promise((r) => setTimeout(r, 400));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.options && node.options.length > 0) {
|
||||||
|
setCurrentOptions(node.options);
|
||||||
|
scrollToBottom();
|
||||||
|
}
|
||||||
|
if (node.requireEmail) {
|
||||||
|
setCurrentRequireEmail(true);
|
||||||
|
scrollToBottom();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialized = useRef(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!initialized.current) {
|
||||||
|
initialized.current = true;
|
||||||
|
getAudioContext();
|
||||||
|
playNode('start');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleOptionClick = (opt: OptionConfig) => {
|
||||||
|
const ctx = getAudioContext();
|
||||||
|
if (ctx && ctx.state === 'suspended') {
|
||||||
|
ctx.resume();
|
||||||
|
}
|
||||||
|
|
||||||
|
setMessages((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
id: Math.random().toString(),
|
||||||
|
sender: 'user',
|
||||||
|
type: 'text',
|
||||||
|
content: opt.text,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
setCurrentOptions([]);
|
||||||
|
scrollToBottom();
|
||||||
|
|
||||||
|
if (opt.actionLink) {
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = opt.actionLink!;
|
||||||
|
}, 800);
|
||||||
|
} else if (opt.nextId) {
|
||||||
|
setTimeout(() => {
|
||||||
|
playNode(opt.nextId!);
|
||||||
|
}, 600);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEmailSubmit = async (e: FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!emailInput) return;
|
||||||
|
|
||||||
|
// Add user email message and a bot "loading" message
|
||||||
|
setMessages((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
id: Math.random().toString(),
|
||||||
|
sender: 'user',
|
||||||
|
type: 'text',
|
||||||
|
content: emailInput,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'loading-checkout',
|
||||||
|
sender: 'bot',
|
||||||
|
type: 'text',
|
||||||
|
content: 'Processando seu e-mail e gerando o link de pagamento ⏳...',
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
setCurrentRequireEmail(false);
|
||||||
|
setIsLoadingCheckout(true);
|
||||||
|
scrollToBottom();
|
||||||
|
|
||||||
|
// Fire Meta Pixel event
|
||||||
|
if (typeof window !== 'undefined' && 'fbq' in window) {
|
||||||
|
(window as any).fbq('track', 'InitiateCheckout');
|
||||||
|
}
|
||||||
|
|
||||||
|
const fbp = getCookie('_fbp');
|
||||||
|
const fbc = getCookie('_fbc');
|
||||||
|
|
||||||
|
console.log('FBP:', fbp);
|
||||||
|
console.log('FBC:', fbc);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch('https://n8n.seureview.com.br/webhook/festa-magica-stripe', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
source: 'funil',
|
||||||
|
userEmail: emailInput,
|
||||||
|
fbp: fbp || '',
|
||||||
|
fbc: fbc || ''
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.success && data.url) {
|
||||||
|
// Redireciona para o checkout do stripe
|
||||||
|
window.location.href = data.url;
|
||||||
|
} else {
|
||||||
|
setIsLoadingCheckout(false);
|
||||||
|
setCurrentRequireEmail(true);
|
||||||
|
// Remove loading message
|
||||||
|
setMessages((prev) => prev.filter(m => m.id !== 'loading-checkout'));
|
||||||
|
alert('Ocorreu um erro ao gerar o checkout. Tente novamente.');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setIsLoadingCheckout(false);
|
||||||
|
setCurrentRequireEmail(true);
|
||||||
|
// Remove loading message
|
||||||
|
setMessages((prev) => prev.filter(m => m.id !== 'loading-checkout'));
|
||||||
|
alert('Erro de conexão. Verifique sua internet e tente novamente.');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderMessageContent = (m: RenderedMessage) => {
|
||||||
|
if (m.type === 'image') {
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
src={m.content}
|
||||||
|
className="max-w-full sm:max-w-[240px] rounded-lg object-cover mt-1"
|
||||||
|
alt="Media"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (m.type === 'video') {
|
||||||
|
return (
|
||||||
|
<video
|
||||||
|
controls
|
||||||
|
playsInline
|
||||||
|
className="max-w-full sm:max-w-[240px] rounded-lg mt-1"
|
||||||
|
src={m.content}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (m.type === 'audio') {
|
||||||
|
return (
|
||||||
|
<audio
|
||||||
|
controls
|
||||||
|
className="w-[200px] h-[40px] rounded-full mt-1"
|
||||||
|
src={m.content}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (m.type === 'embed') {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
dangerouslySetInnerHTML={{ __html: m.content }}
|
||||||
|
className="w-[260px] max-w-full sm:max-w-[300px] rounded-lg overflow-hidden mt-1 [&_iframe]:w-full [&_iframe]:aspect-video [&_iframe]:rounded-lg"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// Simple text handling including line breaks if necessary
|
||||||
|
return <span className="whitespace-pre-wrap word-break">{m.content}</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-[100dvh] bg-black w-full flex justify-center font-sans overflow-hidden">
|
||||||
|
<div className="w-full max-w-[450px] bg-[#e5ddd5] flex flex-col relative shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden h-full">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-[#075e54] text-white p-2.5 px-4 flex items-center gap-3 sticky top-0 z-10 shadow-md">
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src="https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/convite-digital.webp"
|
||||||
|
className="w-10 h-10 rounded-full object-cover bg-[#075e54] border border-white/20"
|
||||||
|
alt="Avatar"
|
||||||
|
/>
|
||||||
|
{/* Online indicator */}
|
||||||
|
<div className="absolute bottom-0 right-0 w-3 h-3 bg-[#25d366] border-2 border-[#075e54] rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col flex-1 leading-tight">
|
||||||
|
<span className="font-semibold text-[16px] truncate">Atendimento Festa Mágica</span>
|
||||||
|
<span className="text-[12px] font-normal opacity-90 h-4">
|
||||||
|
{isTyping ? 'digitando...' : 'online'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chat Area */}
|
||||||
|
<div
|
||||||
|
className="flex-1 p-4 flex flex-col gap-2.5 overflow-y-auto pb-8 scroll-smooth"
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url('https://web.whatsapp.com/img/bg-chat-tile-light_04fcacde539c58cca6745483d4858c52.png')",
|
||||||
|
opacity: 1,
|
||||||
|
backgroundSize: 'contain',
|
||||||
|
backgroundRepeat: 'repeat',
|
||||||
|
scrollbarWidth: 'none',
|
||||||
|
msOverflowStyle: 'none'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<style>{`
|
||||||
|
.flex-1::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
{messages.map((m) => (
|
||||||
|
<div
|
||||||
|
key={m.id}
|
||||||
|
className={`max-w-[85%] sm:max-w-[75%] p-2 px-3 rounded-lg text-[15px] leading-snug shadow-sm transform transition-all animate-in fade-in slide-in-from-bottom-2
|
||||||
|
${
|
||||||
|
m.sender === 'bot'
|
||||||
|
? 'bg-white text-[#111111] self-start rounded-tl-sm'
|
||||||
|
: 'bg-[#dcf8c6] text-[#111111] self-end rounded-tr-sm'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{renderMessageContent(m)}
|
||||||
|
{/* Fake timestamp */}
|
||||||
|
<div className="flex justify-end mt-1 opacity-60">
|
||||||
|
<span className="text-[10px]">{new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
|
||||||
|
{m.sender === 'user' && (
|
||||||
|
<svg viewBox="0 0 16 15" width="16" height="15" className="ml-1 text-[#4fc3f7]">
|
||||||
|
<path fill="currentColor" d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.879a.32.32 0 0 1-.484.033l-.358-.325a.319.319 0 0 0-.484.032l-.378.483a.418.418 0 0 0 .036.541l1.32 1.266c.143.14.361.125.484-.033l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.879a.32.32 0 0 1-.484.033L1.891 7.769a.366.366 0 0 0-.515.006l-.423.433a.364.364 0 0 0 .006.514l3.258 3.185c.143.14.361.125.484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z"></path>
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{isTyping && (
|
||||||
|
<div className="bg-white text-gray-500 text-[14px] self-start rounded-lg rounded-tl-sm p-2.5 px-4 shadow-sm italic animate-pulse">
|
||||||
|
digitando...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentOptions.length > 0 && (
|
||||||
|
<div className="flex flex-col gap-2 mt-3 self-end w-full max-w-[300px]">
|
||||||
|
{currentOptions.map((opt, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
onClick={() => handleOptionClick(opt)}
|
||||||
|
className="w-full bg-[#128c7e] text-white font-bold py-3.5 px-4 rounded-full shadow hover:bg-[#075e54] transition-colors text-[15px]"
|
||||||
|
>
|
||||||
|
{opt.text}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div ref={chatEndRef} className="h-4" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email Input Area */}
|
||||||
|
{currentRequireEmail && (
|
||||||
|
<div className="bg-[#f0f0f0] p-2 sm:p-3 pb-8 sm:pb-3 w-full border-t border-gray-300">
|
||||||
|
<form onSubmit={handleEmailSubmit} className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={emailInput}
|
||||||
|
onChange={(e) => setEmailInput(e.target.value)}
|
||||||
|
placeholder="Digite seu melhor e-mail..."
|
||||||
|
className="flex-1 bg-white rounded-full px-4 py-3 outline-none text-[15px] shadow-sm border border-gray-200 focus:border-[#128c7e]"
|
||||||
|
required
|
||||||
|
disabled={isLoadingCheckout}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoadingCheckout}
|
||||||
|
className="bg-[#00a884] hover:bg-[#128c7e] text-white w-12 h-12 rounded-full flex items-center justify-center shrink-0 shadow-sm transition-colors disabled:opacity-70"
|
||||||
|
>
|
||||||
|
{isLoadingCheckout ? <Loader2 className="w-6 h-6 animate-spin" /> : <Send className="w-5 h-5 ml-1" />}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
26
tsconfig.json
Normal file
26
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
|
||||||
|
}
|
||||||
|
}
|
||||||
8
vercel.json
Normal file
8
vercel.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"rewrites": [
|
||||||
|
{
|
||||||
|
"source": "/(.*)",
|
||||||
|
"destination": "/index.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
24
vite.config.ts
Normal file
24
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