Initial commit
This commit is contained in:
Haitham Khalifa
+760
@@ -0,0 +1,760 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const useTypewriter = (words: string[], speed = 110, pause = 1400) => {
|
||||
const [index, setIndex] = useState(0);
|
||||
const [subIndex, setSubIndex] = useState(0);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIndex(0);
|
||||
setSubIndex(0);
|
||||
setDeleting(false);
|
||||
}, [words]);
|
||||
|
||||
useEffect(() => {
|
||||
const current = words[index] ?? "";
|
||||
if (!deleting && subIndex === current.length) {
|
||||
const timeout = setTimeout(() => setDeleting(true), pause);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
if (deleting && subIndex === 0) {
|
||||
setDeleting(false);
|
||||
setIndex((prev) => (prev + 1) % words.length);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const timeout = setTimeout(
|
||||
() => setSubIndex((prev) => prev + (deleting ? -1 : 1)),
|
||||
deleting ? speed * 0.6 : speed
|
||||
);
|
||||
return () => clearTimeout(timeout);
|
||||
}, [words, index, subIndex, deleting, speed, pause]);
|
||||
|
||||
return words[index]?.substring(0, subIndex) ?? "";
|
||||
};
|
||||
|
||||
const fadeUp = {
|
||||
hidden: { opacity: 0, y: 24 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
type Language = "es" | "en";
|
||||
|
||||
const contentByLang = {
|
||||
es: {
|
||||
nav: {
|
||||
services: "Servicios",
|
||||
method: "Método",
|
||||
pricing: "Precios",
|
||||
contact: "Contacto",
|
||||
cta: "Agenda una demo",
|
||||
},
|
||||
hero: {
|
||||
badge:
|
||||
"Agencia de implementación de IA para negocios locales en España",
|
||||
title: "Tu negocio nunca duerme. Nosotros tampoco.",
|
||||
subtitle:
|
||||
"Implementamos IA que responde, vende y fideliza mientras tú descansas. Diseñado para",
|
||||
ctaPrimary: "Quiero automatizar mi negocio",
|
||||
ctaSecondary: "Ver casos reales",
|
||||
highlights: [
|
||||
"Setup en 48 horas",
|
||||
"ROI medible desde el primer mes",
|
||||
"Equipo bilingüe ES / EN",
|
||||
],
|
||||
sectors: ["Restaurantes", "Clínicas", "Salones", "Inmobiliarias"],
|
||||
},
|
||||
services: {
|
||||
eyebrow: "Servicios",
|
||||
title: "IA lista para trabajar en tu negocio.",
|
||||
items: [
|
||||
{
|
||||
title: "Agentes de voz con IA",
|
||||
description:
|
||||
"Atiende llamadas 24/7, confirma reservas y responde preguntas sin perder oportunidades.",
|
||||
},
|
||||
{
|
||||
title: "Chatbots inteligentes",
|
||||
description:
|
||||
"Convierte visitas web en clientes con soporte inmediato y respuestas personalizadas.",
|
||||
},
|
||||
{
|
||||
title: "Webs inteligentes",
|
||||
description:
|
||||
"Sitios modernos y rápidos con IA integrada para captar, convencer y vender.",
|
||||
},
|
||||
{
|
||||
title: "Automatización de negocio",
|
||||
description:
|
||||
"Emails, recordatorios y CRM conectados para que tu equipo se enfoque en lo importante.",
|
||||
},
|
||||
],
|
||||
},
|
||||
method: {
|
||||
eyebrow: "Cómo funciona",
|
||||
title: "Tu IA en marcha en tres pasos.",
|
||||
steps: [
|
||||
{
|
||||
title: "Diagnóstico inteligente",
|
||||
text: "Analizamos tus procesos y detectamos dónde la IA aporta más valor.",
|
||||
},
|
||||
{
|
||||
title: "Implementación exprés",
|
||||
text: "Configuramos agentes y flujos en días, no en meses.",
|
||||
},
|
||||
{
|
||||
title: "Crecimiento continuo",
|
||||
text: "Optimización semanal basada en datos reales de tu negocio.",
|
||||
},
|
||||
],
|
||||
},
|
||||
pricing: {
|
||||
eyebrow: "Precios",
|
||||
title: "Planes claros para resultados medibles.",
|
||||
plans: [
|
||||
{
|
||||
name: "Impulso",
|
||||
price: "390€",
|
||||
desc: "Ideal para empezar con IA en un área clave.",
|
||||
features: [
|
||||
"1 solución IA",
|
||||
"Integración web básica",
|
||||
"Soporte por email",
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Pro",
|
||||
price: "790€",
|
||||
desc: "El plan favorito para negocios en crecimiento.",
|
||||
features: [
|
||||
"2 soluciones IA",
|
||||
"Automatizaciones avanzadas",
|
||||
"Soporte prioritario",
|
||||
],
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "Elite",
|
||||
price: "1390€",
|
||||
desc: "Para operaciones que quieren IA en todo su embudo.",
|
||||
features: [
|
||||
"Soluciones IA ilimitadas",
|
||||
"Integraciones a medida",
|
||||
"Acompañamiento estratégico",
|
||||
],
|
||||
},
|
||||
],
|
||||
popularBadge: "Más popular",
|
||||
cta: "Empezar ahora",
|
||||
},
|
||||
stats: [
|
||||
{ value: "24/7", label: "Atención automática" },
|
||||
{ value: "3x", label: "Más reservas" },
|
||||
{ value: "48h", label: "Tiempo medio de implementación" },
|
||||
{ value: "+120", label: "Negocios locales servidos" },
|
||||
],
|
||||
cta: {
|
||||
title: "Haz que tu negocio responda solo.",
|
||||
text:
|
||||
"Agenda una demo y descubre cómo SiteMente implementa IA real en tu operación diaria.",
|
||||
button: "Hablar con SiteMente",
|
||||
},
|
||||
footer: {
|
||||
tagline: "Parte de la familia HolaCompi.",
|
||||
},
|
||||
},
|
||||
en: {
|
||||
nav: {
|
||||
services: "Services",
|
||||
method: "Method",
|
||||
pricing: "Pricing",
|
||||
contact: "Contact",
|
||||
cta: "Book a demo",
|
||||
},
|
||||
hero: {
|
||||
badge:
|
||||
"AI implementation agency for local businesses in Spain",
|
||||
title: "Your business never sleeps. Neither do we.",
|
||||
subtitle:
|
||||
"We implement AI that responds, sells, and retains while you rest. Built for",
|
||||
ctaPrimary: "Automate my business",
|
||||
ctaSecondary: "See real results",
|
||||
highlights: [
|
||||
"Setup in 48 hours",
|
||||
"Measurable ROI in month one",
|
||||
"Bilingual team ES / EN",
|
||||
],
|
||||
sectors: ["Restaurants", "Clinics", "Salons", "Real Estate"],
|
||||
},
|
||||
services: {
|
||||
eyebrow: "Services",
|
||||
title: "AI ready to work for your business.",
|
||||
items: [
|
||||
{
|
||||
title: "AI Voice Agents",
|
||||
description:
|
||||
"Answer calls 24/7, confirm bookings, and resolve questions without lost opportunities.",
|
||||
},
|
||||
{
|
||||
title: "AI Chat Widgets",
|
||||
description:
|
||||
"Turn website visits into customers with instant, personalized support.",
|
||||
},
|
||||
{
|
||||
title: "Smart Websites",
|
||||
description:
|
||||
"Modern, fast sites with built-in AI to capture, convince, and sell.",
|
||||
},
|
||||
{
|
||||
title: "Business Automation",
|
||||
description:
|
||||
"Emails, reminders, and CRM flows connected so your team stays focused.",
|
||||
},
|
||||
],
|
||||
},
|
||||
method: {
|
||||
eyebrow: "How it works",
|
||||
title: "Your AI live in three steps.",
|
||||
steps: [
|
||||
{
|
||||
title: "Smart audit",
|
||||
text: "We map your workflows and pinpoint where AI adds the most value.",
|
||||
},
|
||||
{
|
||||
title: "Rapid implementation",
|
||||
text: "Agents and automations go live in days, not months.",
|
||||
},
|
||||
{
|
||||
title: "Continuous growth",
|
||||
text: "Weekly optimization based on real business data.",
|
||||
},
|
||||
],
|
||||
},
|
||||
pricing: {
|
||||
eyebrow: "Pricing",
|
||||
title: "Clear plans for measurable results.",
|
||||
plans: [
|
||||
{
|
||||
name: "Starter",
|
||||
price: "€390",
|
||||
desc: "Ideal to launch AI in one key area.",
|
||||
features: [
|
||||
"1 AI solution",
|
||||
"Basic web integration",
|
||||
"Email support",
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Pro",
|
||||
price: "€790",
|
||||
desc: "The go-to plan for growing businesses.",
|
||||
features: [
|
||||
"2 AI solutions",
|
||||
"Advanced automations",
|
||||
"Priority support",
|
||||
],
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "Elite",
|
||||
price: "€1,390",
|
||||
desc: "For operations that want AI across the full funnel.",
|
||||
features: [
|
||||
"Unlimited AI solutions",
|
||||
"Custom integrations",
|
||||
"Strategic guidance",
|
||||
],
|
||||
},
|
||||
],
|
||||
popularBadge: "Most popular",
|
||||
cta: "Get started",
|
||||
},
|
||||
stats: [
|
||||
{ value: "24/7", label: "Automated support" },
|
||||
{ value: "3x", label: "More bookings" },
|
||||
{ value: "48h", label: "Average rollout time" },
|
||||
{ value: "+120", label: "Local businesses served" },
|
||||
],
|
||||
cta: {
|
||||
title: "Make your business respond on its own.",
|
||||
text:
|
||||
"Book a demo and see how SiteMente implements real AI in your daily operations.",
|
||||
button: "Talk to SiteMente",
|
||||
},
|
||||
footer: {
|
||||
tagline: "Part of the HolaCompi family.",
|
||||
},
|
||||
},
|
||||
} as const satisfies Record<Language, object>;
|
||||
|
||||
export default function App() {
|
||||
const [lang, setLang] = useState<Language>("es");
|
||||
const [contactOpen, setContactOpen] = useState(false);
|
||||
const content = useMemo(() => contentByLang[lang], [lang]);
|
||||
const typed = useTypewriter(content.hero.sectors);
|
||||
|
||||
return (
|
||||
<div className="font-sans text-white bg-brand-gradient">
|
||||
<header className="relative min-h-screen overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
<div className="float-slow absolute -top-24 -left-24 h-72 w-72 rounded-full bg-white/20 blur-3xl" />
|
||||
<div className="float-medium absolute top-32 right-10 h-48 w-48 rounded-full bg-white/10 blur-2xl" />
|
||||
<div className="float-fast absolute bottom-0 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-white/10 blur-3xl" />
|
||||
<div className="float-medium absolute bottom-10 right-10 h-36 w-36 rounded-full bg-white/20 blur-2xl" />
|
||||
</div>
|
||||
|
||||
<nav className="relative z-10 mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-6">
|
||||
<div className="text-xl font-bold tracking-wide">SiteMente</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="hidden items-center gap-6 text-sm font-medium md:flex">
|
||||
<a className="hover:text-white/80" href="#services">
|
||||
{content.nav.services}
|
||||
</a>
|
||||
<a className="hover:text-white/80" href="#method">
|
||||
{content.nav.method}
|
||||
</a>
|
||||
<a className="hover:text-white/80" href="#pricing">
|
||||
{content.nav.pricing}
|
||||
</a>
|
||||
<a className="hover:text-white/80" href="#contact">
|
||||
{content.nav.contact}
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex rounded-full border border-white/40 bg-white/10 p-1 text-xs font-semibold">
|
||||
<button
|
||||
onClick={() => setLang("es")}
|
||||
className={`rounded-full px-3 py-1 transition ${
|
||||
lang === "es"
|
||||
? "bg-white text-brand-purple-dark"
|
||||
: "text-white/80 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
ES
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setLang("en")}
|
||||
className={`rounded-full px-3 py-1 transition ${
|
||||
lang === "en"
|
||||
? "bg-white text-brand-purple-dark"
|
||||
: "text-white/80 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
EN
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setContactOpen(true)}
|
||||
className="rounded-lg border border-white/60 px-4 py-2 text-sm font-semibold transition hover:bg-white/10"
|
||||
>
|
||||
{content.nav.cta}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setContactOpen(true)}
|
||||
className="rounded-lg bg-brand-pink px-4 py-2 text-sm font-semibold text-white shadow-purple-soft transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
|
||||
>
|
||||
{lang === "es" ? "Contactar" : "Contact"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="relative z-10 mx-auto flex w-full max-w-6xl flex-col items-start gap-10 px-6 pb-24 pt-10 md:pt-16">
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ duration: 0.8 }}
|
||||
className="inline-flex items-center gap-2 rounded-full bg-white/20 px-4 py-1 text-sm backdrop-blur"
|
||||
>
|
||||
<span className="h-2 w-2 rounded-full bg-brand-pink" />
|
||||
{content.hero.badge}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<h1 className="text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
|
||||
{content.hero.title}
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-white/90 sm:text-xl">
|
||||
{content.hero.subtitle}{" "}
|
||||
<span className="font-semibold text-white">
|
||||
{typed}
|
||||
<span className="ml-1 inline-block h-6 w-1 animate-pulse bg-white align-middle" />
|
||||
</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="flex flex-wrap gap-4"
|
||||
>
|
||||
<button
|
||||
onClick={() => setContactOpen(true)}
|
||||
className="rounded-lg bg-brand-pink px-6 py-3 text-base font-semibold text-white shadow-purple-soft transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
|
||||
>
|
||||
{content.hero.ctaPrimary}
|
||||
</button>
|
||||
<button className="rounded-lg border border-white/80 px-6 py-3 text-base font-semibold text-white transition hover:bg-white/10">
|
||||
{content.hero.ctaSecondary}
|
||||
</button>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="grid w-full gap-4 md:grid-cols-3"
|
||||
>
|
||||
{content.hero.highlights.map((text) => (
|
||||
<div
|
||||
key={text}
|
||||
className="rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm font-medium backdrop-blur"
|
||||
>
|
||||
{text}
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="bg-[#5e4a8a]">
|
||||
<section
|
||||
id="services"
|
||||
className="mx-auto w-full max-w-6xl px-6 py-20"
|
||||
>
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.2em] text-white/70">
|
||||
{content.services.eyebrow}
|
||||
</p>
|
||||
<h2 className="mt-4 text-3xl font-bold sm:text-4xl">
|
||||
{content.services.title}
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="mt-10 grid gap-6 md:grid-cols-2">
|
||||
{content.services.items.map((service, index) => (
|
||||
<motion.div
|
||||
key={service.title}
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="rounded-xl border border-white/20 bg-white/10 p-6 shadow-purple-soft backdrop-blur transition duration-300 hover:-translate-y-2 hover:border-white/50 hover:bg-white/15 hover:shadow-[0_25px_50px_-20px_rgba(118,75,162,0.65)]"
|
||||
>
|
||||
<h3 className="text-xl font-semibold">
|
||||
<span className="text-brand-pink">●</span> {service.title}
|
||||
</h3>
|
||||
<p className="mt-3 text-base text-white/90">
|
||||
{service.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="method"
|
||||
className="mx-auto w-full max-w-6xl px-6 py-20"
|
||||
>
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.2em] text-white/70">
|
||||
{content.method.eyebrow}
|
||||
</p>
|
||||
<h2 className="mt-4 text-3xl font-bold sm:text-4xl">
|
||||
{content.method.title}
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="mt-12 grid gap-8 md:grid-cols-3">
|
||||
{content.method.steps.map((step, index) => (
|
||||
<motion.div
|
||||
key={step.title}
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="rounded-xl border border-white/20 bg-white/10 p-6 backdrop-blur transition duration-300 hover:-translate-y-2 hover:border-white/50 hover:bg-white/15 hover:shadow-[0_25px_50px_-20px_rgba(118,75,162,0.65)]"
|
||||
>
|
||||
<div className="mb-4 h-1 w-12 rounded-full bg-brand-pink" />
|
||||
<h3 className="text-lg font-semibold">{step.title}</h3>
|
||||
<p className="mt-3 text-white/90">{step.text}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="pricing"
|
||||
className="mx-auto w-full max-w-6xl px-6 py-20"
|
||||
>
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.2em] text-white/70">
|
||||
{content.pricing.eyebrow}
|
||||
</p>
|
||||
<h2 className="mt-4 text-3xl font-bold sm:text-4xl">
|
||||
{content.pricing.title}
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="mt-10 grid gap-6 lg:grid-cols-3">
|
||||
{content.pricing.plans.map((plan, index) => (
|
||||
<motion.div
|
||||
key={plan.name}
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className={`rounded-xl border bg-white/10 p-6 backdrop-blur transition duration-300 hover:-translate-y-2 hover:border-white/50 hover:bg-white/15 hover:shadow-[0_25px_50px_-20px_rgba(118,75,162,0.65)] ${
|
||||
plan.popular
|
||||
? "border-brand-pink shadow-purple-soft"
|
||||
: "border-white/20"
|
||||
}`}
|
||||
>
|
||||
{plan.popular && (
|
||||
<div className="mb-4 inline-flex rounded-full bg-brand-pink/20 px-3 py-1 text-xs font-semibold text-white">
|
||||
{content.pricing.popularBadge}
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-xl font-semibold">{plan.name}</h3>
|
||||
<p className="mt-2 text-white/80">{plan.desc}</p>
|
||||
<p className="mt-6 text-3xl font-bold">{plan.price}</p>
|
||||
<ul className="mt-6 space-y-2 text-white/90">
|
||||
{plan.features.map((feature) => (
|
||||
<li key={feature}>• {feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
<button
|
||||
onClick={() => setContactOpen(true)}
|
||||
className="mt-8 w-full rounded-lg bg-brand-pink px-4 py-2 text-sm font-semibold text-white transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
|
||||
>
|
||||
{content.pricing.cta}
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mx-auto w-full max-w-6xl px-6 py-20">
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
className="grid gap-6 rounded-2xl border border-white/20 bg-white/10 p-8 text-center backdrop-blur md:grid-cols-4"
|
||||
>
|
||||
{content.stats.map((stat) => (
|
||||
<div key={stat.label}>
|
||||
<p className="text-3xl font-bold text-brand-pink">
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-white/80">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section id="contact" className="bg-brand-gradient-dark py-20">
|
||||
<motion.div
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
className="mx-auto flex w-full max-w-5xl flex-col items-start gap-6 px-6 md:flex-row md:items-center md:justify-between"
|
||||
>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold sm:text-4xl">
|
||||
{content.cta.title}
|
||||
</h2>
|
||||
<p className="mt-4 max-w-xl text-white/90">
|
||||
{content.cta.text}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setContactOpen(true)}
|
||||
className="rounded-lg bg-brand-pink px-6 py-3 text-base font-semibold text-white shadow-purple-soft transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
|
||||
>
|
||||
{content.cta.button}
|
||||
</button>
|
||||
</motion.div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="bg-brand-purple-dark">
|
||||
<div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-12 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<p className="text-lg font-semibold">SiteMente</p>
|
||||
<p className="text-sm text-white/80">
|
||||
{content.footer.tagline}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-6 text-sm text-white/80">
|
||||
<span>Madrid · Barcelona · Valencia</span>
|
||||
<span>hola@sitemente.ai</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{contactOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center px-4">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
onClick={() => setContactOpen(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="relative z-10 w-full max-w-2xl rounded-2xl border border-white/20 bg-white/10 p-8 text-white shadow-purple-soft backdrop-blur"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm uppercase tracking-[0.3em] text-white/70">
|
||||
{lang === "es" ? "Formulario" : "Contact form"}
|
||||
</p>
|
||||
<h3 className="mt-3 text-2xl font-bold">
|
||||
{lang === "es"
|
||||
? "Cuéntanos sobre tu negocio"
|
||||
: "Tell us about your business"}
|
||||
</h3>
|
||||
<p className="mt-2 text-white/80">
|
||||
{lang === "es"
|
||||
? "Te respondemos en menos de 24 horas."
|
||||
: "We reply within 24 hours."}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setContactOpen(false)}
|
||||
className="rounded-full border border-white/40 px-3 py-1 text-xs font-semibold text-white/80 transition hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
{lang === "es" ? "Cerrar" : "Close"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
action="https://formsubmit.co/hola@sitemente.com"
|
||||
method="POST"
|
||||
className="mt-8 grid gap-4"
|
||||
>
|
||||
<input type="hidden" name="_captcha" value="false" />
|
||||
<input type="hidden" name="_subject" value="Nuevo lead SiteMente" />
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-white/80">
|
||||
{lang === "es" ? "Nombre" : "Name"}
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
name="name"
|
||||
placeholder={
|
||||
lang === "es" ? "Tu nombre" : "Your name"
|
||||
}
|
||||
className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-white/80">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="hola@empresa.com"
|
||||
className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-white/80">
|
||||
{lang === "es" ? "Empresa" : "Company"}
|
||||
</label>
|
||||
<input
|
||||
name="company"
|
||||
placeholder={
|
||||
lang === "es" ? "Nombre del negocio" : "Business name"
|
||||
}
|
||||
className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-white/80">
|
||||
{lang === "es" ? "Teléfono" : "Phone"}
|
||||
</label>
|
||||
<input
|
||||
name="phone"
|
||||
placeholder="+34 600 000 000"
|
||||
className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-white/80">
|
||||
{lang === "es" ? "Mensaje" : "Message"}
|
||||
</label>
|
||||
<textarea
|
||||
required
|
||||
name="message"
|
||||
rows={4}
|
||||
placeholder={
|
||||
lang === "es"
|
||||
? "¿Qué quieres automatizar?"
|
||||
: "What would you like to automate?"
|
||||
}
|
||||
className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-xs text-white/60">
|
||||
{lang === "es"
|
||||
? "Al enviar, aceptas que te contactemos por email."
|
||||
: "By submitting, you agree to be contacted by email."}
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-lg bg-brand-pink px-6 py-3 text-sm font-semibold text-white shadow-purple-soft transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
|
||||
>
|
||||
{lang === "es" ? "Enviar mensaje" : "Send message"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-14px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.float-slow {
|
||||
animation: float 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.float-medium {
|
||||
animation: float 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.float-fast {
|
||||
animation: float 5s ease-in-out infinite;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user