**export default function La3zawiMediaKit() { const stats = [ { label: 'Total Followers', value: '5.35M+' }, { label: 'Total Views', value: '3.3B+' }, { label: 'Engagement Rate', value: '8.5%' }, { label: 'Average Impressions', value: '95%' }, ]; const platforms = [ { name: 'YouTube', views: '105M Views', likes: '120M Likes', shares: '48K Shares', }, { name: 'Instagram', views: '4.7M Views', likes: '120K Likes', shares: '25K Shares', }, ]; return ( <div className="min-h-screen bg-[#f7f1e8] text-[#3d2b1f] font-sans"> {/* Hero Section */} <section className="relative overflow-hidden px-6 py-20 md:px-16 lg:px-24"> <div className="absolute top-0 right-0 w-96 h-96 bg-[#e5d4c0] rounded-full blur-3xl opacity-40"></div> <div className="relative max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center"> <div> <p className="uppercase tracking-[0.3em] text-sm mb-4 text-[#8a6b52]"> Media Kit 2026 </p> <h1 className="text-5xl md:text-7xl font-bold leading-tight mb-6"> Btissam <span className="block text-[#8a6b52]">La3zawi</span> </h1> <p className="text-lg md:text-xl leading-relaxed text-[#5a4637] mb-8 max-w-xl"> Moroccan family & lifestyle content creator inspiring millions of families through authentic storytelling, entertainment, and everyday moments. </p> <div className="flex flex-wrap gap-4"> <a href="https://www.instagram.com/btissam_la3zawi/" target="_blank" className="px-6 py-3 rounded-2xl bg-[#3d2b1f] text-white font-medium shadow-lg hover:scale-105 transition" > Instagram </a> <a href="mailto:infomrxtra@gmail.com" className="px-6 py-3 rounded-2xl border border-[#3d2b1f] font-medium hover:bg-[#3d2b1f] hover:text-white transition" > Contact </a> </div> </div> <div className="flex justify-center"> <div className="bg-white p-6 rounded-[2rem] shadow-2xl max-w-md w-full"> <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=1200&auto=format&fit=crop" alt="Btissam La3zawi" className="rounded-[1.5rem] h-[420px] w-full object-cover" /> </div> </div> </div> </section> {/* Stats */} <section className="px-6 pb-20 md:px-16 lg:px-24"> <div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6"> {stats.map((stat, index) => ( <div key={index} className="bg-white rounded-3xl p-8 shadow-lg text-center hover:-translate-y-1 transition" > <div className="text-3xl md:text-4xl font-bold mb-3 text-[#3d2b1f]"> {stat.value} </div> <div className="text-sm uppercase tracking-wide text-[#8a6b52]"> {stat.label} </div> </div> ))} </div> </section> {/* About */} <section className="px-6 py-20 bg-white md:px-16 lg:px-24"> <div className="max-w-5xl mx-auto text-center"> <p className="uppercase tracking-[0.25em] text-sm text-[#8a6b52] mb-4"> About </p> <h2 className="text-4xl md:text-5xl font-bold mb-8"> Creating authentic moments that inspire families every day </h2> <p className="text-lg leading-relaxed text-[#5a4637] max-w-3xl mx-auto"> Btissam La3zawi collaborates with brands to create impactful family-oriented campaigns that resonate with audiences across Morocco and the Arab world. Her content blends lifestyle, entertainment, parenting, and everyday inspiration in a trusted and engaging environment. </p> </div> </section> {/* Audience */} <section className="px-6 py-20 md:px-16 lg:px-24"> <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-8"> <div className="bg-white rounded-[2rem] p-10 shadow-xl"> <h3 className="text-3xl font-bold mb-8">Audience Profile</h3> <div className="space-y-6 text-lg"> <div className="flex justify-between border-b pb-3"> <span>Age Range</span> <span className="font-semibold">18 - 44 Years</span> </div> <div className="flex justify-between border-b pb-3"> <span>Main Audience</span> <span className="font-semibold">Families & Kids</span> </div> <div className="flex justify-between border-b pb-3"> <span>Location</span> <span className="font-semibold">Morocco & MENA</span> </div> <div className="flex justify-between border-b pb-3"> <span>Male Audience</span> <span className="font-semibold">54.1%</span> </div> <div className="flex justify-between"> <span>Female Audience</span> <span className="font-semibold">45.7%</span> </div> </div> </div> <div className="bg-[#3d2b1f] text-white rounded-[2rem] p-10 shadow-xl flex flex-col justify-center"> <p className="uppercase tracking-[0.25em] text-sm mb-4 text-[#d8c1ad]"> Why Brands Choose Us </p> <h3 className="text-4xl font-bold leading-tight mb-6"> Trusted family-safe content with massive engagement </h3> <p className="text-lg text-[#f0e5da] leading-relaxed"> Our audience connects deeply with authentic stories, making La3zawi Family an ideal partner for lifestyle, parenting, entertainment, travel, and family-oriented campaigns. </p> </div> </div> </section> {/* Platforms */} <section className="px-6 py-20 bg-white md:px-16 lg:px-24"> <div className="max-w-6xl mx-auto"> <div className="text-center mb-14"> <p className="uppercase tracking-[0.25em] text-sm text-[#8a6b52] mb-4"> Performance </p> <h2 className="text-4xl md:text-5xl font-bold"> Social Media Performance </h2> </div> <div className="grid md:grid-cols-2 gap-8"> {platforms.map((platform, index) => ( <div key={index} className="rounded-[2rem] border border-[#e8ddd2] p-10 shadow-md" > <h3 className="text-3xl font-bold mb-8">{platform.name}</h3> <div className="space-y-5 text-lg"> <div className="flex justify-between border-b pb-3"> <span>Views</span> <span className="font-semibold">{platform.views}</span> </div> <div className="flex justify-between border-b pb-3"> <span>Likes</span> <span className="font-semibold">{platform.likes}</span> </div> <div className="flex justify-between"> <span>Shares</span> <span className="font-semibold">{platform.shares}</span> </div> </div> </div> ))} </div> </div> </section> {/* Contact */} <section className="px-6 py-24 md:px-16 lg:px-24"> <div className="max-w-4xl mx-auto bg-[#3d2b1f] text-white rounded-[2.5rem] p-12 text-center shadow-2xl"> <p className="uppercase tracking-[0.25em] text-sm mb-4 text-[#d8c1ad]"> Contact </p> <h2 className="text-4xl md:text-5xl font-bold mb-6"> Let’s Build Something Amazing Together </h2> <p className="text-lg text-[#f0e5da] mb-10 max-w-2xl mx-auto"> Interested in collaborations, sponsorships, or branded campaigns? Get in touch and let’s create impactful content for your audience. </p> <div className="flex flex-col md:flex-row gap-4 justify-center items-center"> <a href="mailto:infomrxtra@gmail.com" className="px-8 py-4 rounded-2xl bg-white text-[#3d2b1f] font-semibold hover:scale-105 transition" > infomrxtra@gmail.com </a> <a href="tel:+212606103148" className="px-8 py-4 rounded-2xl border border-white font-semibold hover:bg-white hover:text-[#3d2b1f] transition" > +212 606 103 148 </a> </div> </div> </section> </div> ); }** blank chat created. Start coding or ask v0 to help build something.