pages/Home.jsx

import HeroSection from '../components/landing/HeroSection';
import SiteHeader from '../components/landing/SiteHeader';
import IntroSection from '../components/landing/IntroSection';
import TestimonialSection from '../components/landing/TestimonialSection';
import EBookSection from '../components/landing/EBookSection';
import FooterSection from '../components/landing/FooterSection';
import FloatingNav from '../components/landing/FloatingNav';
import WhySection from '../components/landing/WhySection';

export default function Home() {
return (
<div className="bg-background text-foreground min-h-screen font-body">
<SiteHeader />
<FloatingNav />
<HeroSection />
<IntroSection />
<WhySection />
<TestimonialSection />
<EBookSection />
<FooterSection />
</div>
);
}
components/landing/HeroSection.jsx

import { motion } from 'framer-motion';

const HERO_IMAGE = 'https://media.base44.com/images/public/69d2f71f265164ba16bfecf7/94402920c_IMG_7363.jpg';
const VIDEO_URL = 'https://www.youtube-nocookie.com/embed/QEWCgMz7kQM?autoplay=1&mute=1&loop=1&playlist=QEWCgMz7kQM&controls=0&showinfo=0&rel=0&modestbranding=1&enablejsapi=1';

export default function HeroSection() {
return (
<section className="relative min-h-screen overflow-hidden">
<iframe
src={VIDEO_URL}
className="absolute inset-0 w-full h-full pointer-events-none hidden md:block"
style={{ border: 'none', transform: 'scale(1.5)', transformOrigin: 'center center' }}
allow="autoplay; fullscreen; encrypted-media"
allowFullScreen
title="Hero background video"
/>
<div
className="absolute inset-0 md:hidden"
style={{ backgroundImage: url(${HERO_IMAGE}), backgroundSize: 'cover', backgroundPosition: 'center top' }}
/>
<div
className="absolute inset-0 -z-10 hidden md:block"
style={{ backgroundImage: url(${HERO_IMAGE}), backgroundSize: 'cover', backgroundPosition: 'center' }}
/>
<div className="absolute inset-0 bg-foreground/50" />
<div className="relative z-10 min-h-screen flex flex-col lg:flex-row">
<div className="flex-1 flex flex-col justify-end p-8 lg:p-16 pb-16 lg:pb-24">
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3, duration: 0.8 }}
className="font-body text-xs tracking-widest text-background/70 uppercase mb-4"
>
Certified Life Coach
</motion.p>
<motion.h1
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5, duration: 1 }}
className="font-heading text-4xl md:text-6xl lg:text-7xl font-light text-background leading-none mb-8"
>
Real connection.
<br />
<span className="italic">Real change.</span>
</motion.h1>
</div>
</div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.5, duration: 1 }}
className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 z-10"
>
<motion.div
animate={{ y: [0, 8, 0] }}
transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
className="w-px h-12 bg-background/40"
/>
</motion.div>
<div className="absolute bottom-0 left-0 right-0 h-px bg-border z-10" />
</section>
);
}
components/landing/SiteHeader.jsx

const LOGO = 'https://media.base44.com/images/public/69d2f71f265164ba16bfecf7/61af5994b_IMG_7418.jpg';

export default function SiteHeader() {
return (
<header className="fixed top-0 left-0 right-0 z-50 px-8 py-5 flex items-center justify-between">
<img
src={LOGO}
alt="Aware by Ahmed"
className="h-12 w-auto object-contain opacity-90 rounded-lg border border-primary"
/>
</header>
);
}
components/landing/IntroSection.jsx

import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import LogoWatermark from './LogoWatermark';

const INTRO_IMAGE = 'https://media.base44.com/images/public/69d2f71f265164ba16bfecf7/0e6554f0f_DSC02647.jpg';

export default function IntroSection() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });

return (
<section id="intro" className="relative py-24 md:py-32 px-6 md:px-16 overflow-hidden">
<LogoWatermark />
<div ref__={ref} className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 1, delay: 0.2 }}
>
<p className="font-body text-xs tracking-widest text-muted-foreground uppercase mb-4">About</p>
<div className="w-16 h-px bg-primary mb-10" />
<h2 className="font-heading text-3xl md:text-5xl lg:text-6xl font-light leading-tight mb-12">
I'm Ahmed, I help you
<br />
<span className="italic text-primary">achieve more and need less.</span>
</h2>
<div className="space-y-6 max-w-xl">
<p className="font-body text-base leading-relaxed text-muted-foreground">
I'm a certified life coach at the intersection of mental health and real-world action.
My work isn't about hype or motivation, it's about building the inner clarity and
practical tools that make growth feel sustainable, not exhausting.
</p>
<p className="font-body text-base leading-relaxed text-muted-foreground">
Most people chase success and arrive feeling empty. I work with you on both sides of
that equation, the ambition that drives you forward, and the awareness that helps you
actually feel what you've built.
</p>
<p className="font-body text-base leading-relaxed text-foreground font-medium">
Because success is one thing. Feeling content with it, that's the real goal.
</p>
</div>
<motion.a
href__="mailto:contact@awarebyahmed.com"
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : {}}
transition={{ duration: 0.8, delay: 0.6 }}
className="inline-block mt-12 px-8 py-4 bg-primary text-primary-foreground
font-body text-xs tracking-widest uppercase transition-all duration-300
hover:bg-foreground hover:text-background
focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
min-h-[44px]"
>
Work With Me
</motion.a>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 40 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 1, delay: 0.4 }}
className="relative"
>
<img src={INTRO_IMAGE} alt="Coach portrait" className="w-full h-auto object-contain rounded-2xl shadow-xl" />
<div className="absolute -bottom-4 -left-4 w-24 h-24 border border-primary/30 -z-10" />
<div className="absolute -top-4 -right-4 w-24 h-24 border border-primary/30 -z-10" />
</motion.div>
</div>
</section>
);
}
components/landing/WhySection.jsx

import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import LogoWatermark from './LogoWatermark';

const WHY_IMAGE = 'https://media.base44.com/images/public/69d2f71f265164ba16bfecf7/7b569f8b2_DSC02730.jpg';

export default function WhySection() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });

return (
<section id="why" className="relative py-24 md:py-40 overflow-hidden px-4 md:px-8">
<LogoWatermark />
<div className="max-w-7xl mx-auto rounded-3xl overflow-hidden py-20 px-8 md:px-16">
<div ref__={ref} className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 1, delay: 0.4 }}
>
<p className="font-body text-xs tracking-widest text-muted-foreground uppercase mb-4">Why I Coach</p>
<div className="w-16 h-px bg-primary mb-10" />
<h2 className="font-heading text-3xl md:text-5xl font-light leading-tight mb-10">
Why I do
<br />
<span className="italic text-primary">what I do.</span>
</h2>
<div className="space-y-6 max-w-xl">
<p className="font-body text-base leading-relaxed text-muted-foreground">
I know what it feels like to be in that place. Alone, hopeless, convinced that this is just how things are.
</p>
<p className="font-body text-base leading-relaxed text-muted-foreground">
I found my way out, and it was simpler than I ever expected.
</p>
<p className="font-body text-base leading-relaxed text-foreground font-medium">
Now I show up for the people still in that place, to remind them the light is real, and closer than they think.
</p>
<div className="pt-4">
<a
href__="mailto:contact@awarebyahmed.com"
className="inline-block px-8 py-4 bg-primary text-primary-foreground
font-body text-xs tracking-widest uppercase transition-all duration-300
hover:bg-foreground hover:text-primary
focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background
min-h-[44px]"
>
Contact Me
</a>
</div>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 40 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 1, delay: 0.2 }}
className="relative"
>
<img src={WHY_IMAGE} alt="Ahmed pondering" className="w-full h-auto object-contain rounded-2xl shadow-xl" />
<div className="absolute -bottom-4 -left-4 w-24 h-24 border border-primary/30 -z-10" />
<div className="absolute -top-4 -right-4 w-24 h-24 border border-primary/30 -z-10" />
</motion.div>
</div>
</div>
</section>
);
}
components/landing/TestimonialSection.jsx

import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import LogoWatermark from './LogoWatermark';

const TESTIMONIALS = [
{
quote: "I had the career, the title, the life everyone wanted. Ahmed helped me realize why I still felt empty, and more importantly, what to actually do about it. That shift changed everything.",
title: "Section Head, Sharjah Youth"
},
{
quote: "What sets Ahmed apart is that he doesn't let you hide behind productivity. He pushes you to feel your wins, not just chase the next one. I finally feel like I'm living my life, not running from it.",
name: "Sara M.",
title: "Entrepreneur"
},
];

export default function TestimonialSection() {
const sectionRef = useRef(null);
const isInView = useInView(sectionRef, { once: true, margin: '-100px' });

return (
<section id="testimonials" className="relative py-32 md:py-48 bg-foreground text-background overflow-hidden">
<LogoWatermark invert />
<div className="px-6 md:px-16 mb-16 md:mb-24">
<motion.div
ref__={sectionRef}
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
>
<p className="font-body text-xs tracking-widest text-background/50 uppercase mb-4">Testimonials</p>
<h2 className="font-heading text-3xl md:text-5xl font-light">
Words from those
<br />
<span className="italic">who chose to feel it.</span>
</h2>
</motion.div>
</div>
<div className="px-6 md:px-16">
<div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
{TESTIMONIALS.map((t, i) => (
<motion.div
key={i}
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.15 * i }}
>
<div className="h-full bg-background/5 border border-background/10 p-8 md:p-12 flex flex-col justify-between">
<div>
<div className="w-8 h-px bg-primary mb-8" />
<p className="font-heading text-xl md:text-2xl font-light italic leading-relaxed mb-8">"{t.quote}"</p>
</div>
<div>
<p className="font-body text-sm font-medium text-background">{t.name}</p>
<p className="font-body text-xs text-background/50 tracking-wider uppercase mt-1">{t.title}</p>
</div>
</div>
</motion.div>
))}
</div>
</div>
</section>
);
}
components/landing/EBookSection.jsx

import { useState, useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { base44 } from '@/api/base44Client';
import { useQuery } from '@tanstack/react-query';
import EBookDrawer from './EBookDrawer';
import LogoWatermark from './LogoWatermark';

export default function EBookSection() {
const [selectedBook, setSelectedBook] = useState(null);
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });

const { data: books = [] } = useQuery({
queryKey: ['ebooks'],
queryFn: () => base44.entities.EBook.list(),
});

return (
<section id="library" className="relative py-32 md:py-48 px-6 md:px-16">
<LogoWatermark />
<div className="absolute top-0 left-0 right-0 h-px bg-border" />
<div ref__={ref} className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16 md:mb-24">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
className="lg:col-span-3"
>
<p className="font-body text-xs tracking-widest text-muted-foreground uppercase mb-4">Library</p>
<div className="w-16 h-px bg-primary" />
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.2 }}
className="lg:col-span-8 lg:col-start-5"
>
<h2 className="font-heading text-3xl md:text-5xl lg:text-6xl font-light leading-tight">
The Library
<br />
<span className="italic text-primary">of Growth.</span>
</h2>
</motion.div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 max-w-3xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.1 }}
className="group cursor-pointer"
onClick={() => setSelectedBook(books[0] || { title: 'Life Reset Starter Pack', price: 19.99 })}
>
<div className="relative aspect-[3/4] bg-secondary rounded overflow-hidden mb-6 transition-transform duration-500 ease-out group-hover:scale-[1.02] group-hover:shadow-2xl">
<img
src="https://media.base44.com/images/public/69d2f71f265164ba16bfecf7/d8dce012d_generated_image.png"
alt="Life Reset Starter Pack Cover"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-foreground/0 group-hover:bg-foreground/20 transition-colors duration-500 flex items-center justify-center">
<span className="font-body text-xs tracking-widest text-background uppercase opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-foreground/80 px-6 py-3">
Quick View
</span>
</div>
</div>
<h3 className="font-heading text-xl md:text-2xl font-light mb-1">Life Reset Starter Pack</h3>
<p className="font-heading text-lg text-primary">19.99 AED</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.2 }}
className="group"
>
<div className="relative aspect-[3/4] bg-foreground rounded overflow-hidden mb-6 flex flex-col items-center justify-center p-8 text-center">
<div className="w-8 h-px bg-primary mb-8" />
<h3 className="font-heading text-2xl md:text-3xl font-light text-background leading-tight mb-6">
The Art of<br /><span className="italic text-primary">Wanting Less</span>
</h3>
<div className="w-8 h-px bg-primary mt-4" />
<p className="font-body text-xs tracking-widest text-background/40 uppercase mt-8">Aware by Ahmed</p>
</div>
<h3 className="font-heading text-xl md:text-2xl font-light mb-1 text-muted-foreground">The Art of Wanting Less</h3>
<p className="font-body text-sm text-primary tracking-widest uppercase">Coming Soon</p>
</motion.div>
</div>
</div>
<EBookDrawer book={selectedBook} onClose={() => setSelectedBook(null)} />
</section>
);
}
components/landing/EBookDrawer.jsx — read from context:

Read
landing/EBook Drawer
components/landing/EBookDrawer.jsx

import { motion, AnimatePresence } from 'framer-motion';
import { X } from 'lucide-react';

export default function EBookDrawer({ book, onClose }) {
if (!book) return null;

return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm"
onClick={onClose}
>
<motion.div
initial={{ x: '100%' }}
animate={{ x: 0 }}
exit={{ x: '100%' }}
transition={{ type: 'spring', damping: 30, stiffness: 300 }}
className="absolute right-0 top-0 bottom-0 w-full max-w-md bg-background shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<div className="h-full flex flex-col">
<div className="flex items-center justify-between p-6 border-b border-border">
<p className="font-body text-xs tracking-widest text-muted-foreground uppercase">Quick View</p>
<button onClick={onClose} className="w-11 h-11 flex items-center justify-center rounded-full hover:bg-secondary transition-colors focus:outline-none focus:ring-2 focus:ring-primary">
<X className="w-5 h-5" />
</button>
</div>
<div className="flex-1 overflow-y-auto p-6 space-y-8">
{book.cover_image && (
<div className="aspect-[3/4] max-w-[240px] mx-auto bg-secondary rounded overflow-hidden shadow-lg">
<img src={book.cover_image} alt={book.title} className="w-full h-full object-cover" />
</div>
)}
<div>
<h3 className="font-heading text-2xl md:text-3xl font-light mb-2">{book.title}</h3>
{book.subtitle && <p className="font-body text-sm text-muted-foreground mb-4">{book.subtitle}</p>}
<p className="font-heading text-3xl text-primary font-light">${book.price?.toFixed(2)}</p>
</div>
{book.description && <p className="font-body text-sm leading-relaxed text-muted-foreground">{book.description}</p>}
</div>
<div className="p-6 border-t border-border space-y-3">
{book.purchase_url ? (
<a href__={book.purchase_url} target="_blank" rel="noopener noreferrer"
className="block w-full py-4 bg-primary text-primary-foreground text-center font-body text-xs tracking-widest uppercase transition-all duration-300 hover:bg-foreground hover:text-background focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 min-h-[44px]">
Purchase Now
</a>
) : (
<div className="block w-full py-4 bg-muted text-muted-foreground text-center font-body text-xs tracking-widest uppercase">Coming Soon</div>
)}
{book.sample_chapter_url && (
<a href__={book.sample_chapter_url} target="_blank" rel="noopener noreferrer"
className="block w-full py-4 border border-border text-center font-body text-xs tracking-widest uppercase transition-all duration-300 hover:border-primary hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 min-h-[44px]">
Read Sample Chapter
</a>
)}
</div>
</div>
</motion.div>
</motion.div>
</AnimatePresence>
);
}
components/landing/FooterSection.jsx

import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

export default function FooterSection() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-50px' });

return (
<footer id="footer" className="relative bg-foreground text-background">
<div ref__={ref} className="px-6 md:px-16 py-32 md:py-48">
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 1 }}
className="lg:col-span-8"
>
<h2 className="font-heading text-4xl md:text-6xl lg:text-7xl font-light leading-tight mb-8">
Ready to achieve
<br />
<span className="italic text-primary">and actually feel it?</span>
</h2>
<p className="font-body text-base text-background/60 max-w-lg leading-relaxed mb-12">
The next step is your journey. No pressure, no script, just an honest talk about where you are and where you want to be.
</p>
<a href__="mailto:contact@awarebyahmed.com"
className="inline-block px-10 py-5 bg-primary text-primary-foreground font-body text-xs tracking-widest uppercase transition-all duration-300 hover:bg-background hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-foreground min-h-[44px]">
Start Your Journey
</a>
</motion.div>
<motion.div
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : {}}
transition={{ duration: 1, delay: 0.4 }}
className="lg:col-span-3 lg:col-start-10 flex flex-col justify-end"
>
<div className="space-y-6">
<div>
<p className="font-body text-xs tracking-widest text-background/40 uppercase mb-2">Email</p>
<a href__="mailto:contact@awarebyahmed.com" className="font-body text-sm text-background/80 hover:text-primary transition-colors focus:outline-none focus:ring-2 focus:ring-primary">
contact@awarebyahmed.com
</a>
</div>
<div>
<p className="font-body text-xs tracking-widest text-background/40 uppercase mb-2">Social</p>
<div className="space-y-1">
<a href__="https://instagram.com/ajunaibi505" target="_blank" rel="noopener noreferrer" className="block font-body text-sm text-background/80 hover:text-primary transition-colors focus:outline-none focus:ring-2 focus:ring-primary">Instagram</a>
<a href__="https://tiktok.com/@ajunaibi505" target="_blank" rel="noopener noreferrer" className="block font-body text-sm text-background/80 hover:text-primary transition-colors focus:outline-none focus:ring-2 focus:ring-primary">TikTok</a>
</div>
</div>
</div>
</motion.div>
</div>
</div>
<div className="border-t border-background/10 px-6 md:px-16 py-8">
<div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
<img src="https://media.base44.com/images/public/69d2f71f265164ba16bfecf7/61af5994b_IMG_7418.jpg" alt="Aware by Ahmed" className="h-12 w-auto object-contain opacity-70 rounded-lg border border-primary" />
<div className="flex items-center gap-6">
<a href__="#" className="font-body text-xs tracking-wider text-background/40 hover:text-background/70 transition-colors focus:outline-none focus:ring-2 focus:ring-primary">Privacy Policy</a>
<a href__="#" className="font-body text-xs tracking-wider text-background/40 hover:text-background/70 transition-colors focus:outline-none focus:ring-2 focus:ring-primary">Terms of Service</a>
<p className="font-body text-xs text-background/30">© {new Date().getFullYear()}</p>
</div>
</div>
</div>
</footer>
);
}
components/landing/FloatingNav.jsx

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const NAV_ITEMS = [
{ label: 'INTRO', href: '#intro' },
{ label: 'TESTIMONIALS', href: '#testimonials' },
{ label: 'LIBRARY', href: '#library' },
{ label: 'CONNECT', href: '#footer' },
];

export default function FloatingNav() {
const [visible, setVisible] = useState(false);

useEffect(() => {
const handleScroll = () => setVisible(window.scrollY > 400);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);

const scrollTo = (href) => {
const el = document.querySelector(href);
if (el) el.scrollIntoView({ behavior: 'smooth' });
};

return (
<AnimatePresence>
{visible && (
<motion.nav
initial={{ y: 80, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: 80, opacity: 0 }}
transition={{ duration: 0.4, ease: 'easeOut' }}
className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-foreground/90 backdrop-blur-md rounded-full px-2 py-2 flex items-center gap-1 shadow-2xl"
>
{NAV_ITEMS.map((item) => (
<button
key={item.href}
onClick={() => scrollTo(item.href)}
className="px-5 py-2.5 rounded-full text-background font-body text-xs font-medium tracking-widest transition-all duration-300 hover:bg-primary hover:text-primary-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 min-w-[44px] min-h-[44px]"
>
{item.label}
</button>
))}
</motion.nav>
)}
</AnimatePresence>
);
}
components/landing/LogoWatermark.jsx

const LOGO = 'https://media.base44.com/images/public/69d2f71f265164ba16bfecf7/04e4f7166_AWAREBYAHMED-02jpg.jpg';

export default function LogoWatermark({ invert = false }) {
return (
<div className="absolute bottom-8 right-8 z-10 pointer-events-none select-none">
<img
src={LOGO}
alt=""
aria-hidden="true"
className={h-10 w-auto object-contain opacity-10 ${invert ? 'brightness-0 invert' : 'brightness-0'}}
/>
</div>
);
}