This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
import React from “react”;
import { Calendar, MapPin, ArrowRight, Users, ChevronRight } from “lucide-react”;
import { motion } from “framer-motion”;
export default function AsambleaCitroenLanding() {
return (
{/* HERO /} {/ subtle top line */}
{/* monumental chevrons */}
<div className="absolute inset-y-0 right-[-18%] md:right-[-8%] w-[75%] pointer-events-none flex items-center justify-center opacity-95">
<div className="relative w-full h-[70vh]">
<div className="absolute right-0 top-[8%] w-[95%] h-[34%] bg-red-700 rotate-[-38deg] origin-right rounded-sm" />
<div className="absolute right-0 top-[8%] w-[95%] h-[34%] bg-red-700 rotate-[38deg] origin-right rounded-sm" />
<div className="absolute right-[16%] top-[39%] w-[68%] h-[26%] bg-neutral-500 rotate-[-38deg] origin-right rounded-sm opacity-90" />
<div className="absolute right-[16%] top-[39%] w-[68%] h-[26%] bg-neutral-500 rotate-[38deg] origin-right rounded-sm opacity-90" />
</div>
</div>
<div className="relative z-10 max-w-2xl">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7 }}
>
<div className="mb-16">
<p className="uppercase tracking-[0.35em] text-sm font-semibold text-neutral-500 mb-3">
Asamblea Anual
</p>
<p className="uppercase tracking-[0.18em] text-sm font-medium text-neutral-500">
Asociación Nacional de Concesionarios
</p>
</div>
<h1 className="text-6xl md:text-7xl lg:text-8xl font-black leading-[0.9] tracking-tight uppercase">
<span className="block text-red-700">Volver</span>
<span className="block text-neutral-600">a lo</span>
<span className="block text-neutral-700">Esencial</span>
</h1>
<div className="mt-10 w-20 h-1 bg-red-700" />
<p className="mt-8 text-lg md:text-xl max-w-xl text-neutral-600 leading-relaxed">
Una red sólida, conectada y preparada para seguir construyendo el futuro desde la identidad, la fuerza y la esencia Citroën.
</p>
<div className="mt-10 flex flex-col sm:flex-row gap-4">
<button className="group inline-flex items-center justify-center gap-3 bg-red-700 text-white px-7 py-4 rounded-full font-bold shadow-lg shadow-red-900/10 hover:bg-red-800 transition">
Confirmar asistencia
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition" />
</button>
<button className="inline-flex items-center justify-center gap-3 border border-neutral-300 text-neutral-700 px-7 py-4 rounded-full font-bold hover:border-red-700 hover:text-red-700 transition bg-white/70 backdrop-blur">
Ver programa
</button>
</div>
</motion.div>
</div>
</section>
{/* INFO BAND */}
<section className="relative z-10 px-8 md:px-16 lg:px-24 pb-20 -mt-10">
<div className="grid md:grid-cols-3 gap-5 max-w-6xl">
<div className="bg-white rounded-2xl shadow-xl shadow-neutral-900/5 border border-neutral-100 p-7">
<Calendar className="w-7 h-7 text-red-700 mb-5" />
<h3 className="font-extrabold text-xl mb-2">Fecha</h3>
<p className="text-neutral-600">Jueves, 12 de junio</p>
</div>
<div className="bg-white rounded-2xl shadow-xl shadow-neutral-900/5 border border-neutral-100 p-7">
<MapPin className="w-7 h-7 text-red-700 mb-5" />
<h3 className="font-extrabold text-xl mb-2">Lugar</h3>
<p className="text-neutral-600">Madrid · Sede por confirmar</p>
</div>
<div className="bg-white rounded-2xl shadow-xl shadow-neutral-900/5 border border-neutral-100 p-7">
<Users className="w-7 h-7 text-red-700 mb-5" />
<h3 className="font-extrabold text-xl mb-2">Encuentro</h3>
<p className="text-neutral-600">Concesionarios, marca y futuro común.</p>
</div>
</div>
</section>
{/* CONTENT */}
<section className="px-8 md:px-16 lg:px-24 py-24 bg-neutral-50 relative overflow-hidden">
<div className="absolute right-[-10%] top-[-15%] w-[45%] h-[70%] border-[48px] border-neutral-200 rotate-45 opacity-40" />
<div className="max-w-6xl grid lg:grid-cols-2 gap-16 items-center relative z-10">
<div>
<p className="uppercase tracking-[0.3em] text-sm font-bold text-red-700 mb-5">Concepto 2025</p>
<h2 className="text-4xl md:text-5xl font-black leading-tight mb-6">
Una estructura sólida que conecta toda la red.
</h2>
<p className="text-lg text-neutral-600 leading-relaxed mb-6">
Las líneas rectas conectadas representan una red organizada, fuerte y orientada al futuro. Una imagen sobria y moderna que recupera la esencia visual de Citroën sin caer en una estética antigua.
</p>
<p className="text-lg text-neutral-600 leading-relaxed">
El rojo corporativo actúa como eje de identidad, mientras el gris aporta estabilidad, profesionalidad y equilibrio institucional.
</p>
</div>
<div className="bg-white rounded-[2rem] p-8 shadow-2xl shadow-neutral-900/5 border border-neutral-100">
<div className="flex items-center justify-between border-b border-neutral-100 pb-5 mb-6">
<span className="text-sm font-bold uppercase tracking-[0.2em] text-neutral-400">Programa</span>
<ChevronRight className="w-5 h-5 text-red-700" />
</div>
{[
["10:00", "Recepción de asistentes"],
["11:00", "Apertura institucional"],
["12:00", "Mesa de red y marca"],
["14:00", "Almuerzo networking"],
].map(([time, title]) => (
<div key={time} className="flex gap-6 py-5 border-b border-neutral-100 last:border-b-0">
<span className="font-black text-red-700 min-w-16">{time}</span>
<span className="font-semibold text-neutral-700">{title}</span>
</div>
))}
</div>
</div>
</section>
</main>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!