Eman Dabour

byMo Mon

Build a React + TypeScript + Tailwind CSS single-page portfolio website. Install and use "framer-motion" for ALL animations — this is mandatory, do not skip animation implementation. CRITICAL: This must NOT look like a generic template. Reference aesthetic: think Aman Resorts website, Nobu Restaurant Group, or a high-end design agency portfolio (like a boutique branding studio in Milan or Tokyo). Every section needs visible motion — if a section has no animation when it loads or on scroll, that is a failure. === COLOR SYSTEM (use Tailwind custom colors, exact hex codes) === - background-primary: #0A2422 (very dark teal, almost black) - background-secondary: #123936 (card backgrounds, slightly lighter) - text-primary: #F5F1E8 (warm cream, NOT pure white) - text-muted: #A8BDB9 (muted sage for secondary text) - accent-bronze: #C08552 (primary accent - buttons, borders, highlights) - accent-bronze-light: #D4A574 (hover states) - Add a subtle radial gradient in the hero background going from #123936 to #0A2422, positioned top-right, low opacity (15-20%) === TYPOGRAPHY === - Headings: Use a serif font like "Playfair Display" (import from Google Fonts) — large sizes, font-weight 600-700, letter-spacing slightly tight (-0.02em) - Body text: "Inter" or "Poppins" — clean, readable - Hero headline should be MASSIVE: text-6xl on mobile, text-8xl on desktop, with serif font === MANDATORY ANIMATIONS (implement every single one) === 1. Hero section, on page load (use framer-motion's `motion.div` with `initial` and `animate` props): - Headline: fade in + move up from y:30 to y:0, opacity 0 to 1, duration 0.8s, ease "easeOut" - Subheadline: same animation but with delay: 0.3 - CTA buttons: same animation with delay: 0.5, plus scale from 0.9 to 1 - Use framer-motion's `staggerChildren` if animating multiple text lines 2. Scroll-triggered animations (use framer-motion's `whileInView` prop, with `viewport={{ once: true }}`): - EVERY section heading: fade up from y:40, opacity 0 to 1 - Service cards and portfolio cards: use `staggerChildren` in a parent container so cards animate in sequence (card 1, then 0.15s later card 2, then card 3...) - Implement this with a parent motion.div with variants containing staggerChildren: 0.15 3. Hover interactions (use Tailwind transition classes AND framer-motion `whileHover`): - Portfolio cards: `whileHover={{ y: -8, transition: { duration: 0.3 } }}` plus increased box-shadow via Tailwind class change - Buttons: `whileHover={{ scale: 1.05 }}` `whileTap={{ scale: 0.98 }}` - Portfolio card images: scale from 1 to 1.08 on hover using Tailwind `group-hover:scale-105 transition-transform duration-500` 4. Page load sequence: - Add a 1-second loading screen: brand name "Eman Dabour Design" in bronze, centered, fades in then fades out (use framer-motion AnimatePresence) before revealing the hero section 5. Floating background element in hero: - Add one large blurred circular shape (bronze color, opacity 10%, blur-3xl via Tailwind) positioned absolutely in the hero background - Animate it with framer-motion: slow continuous movement using `animate={{ y: [0, 20, 0] }}` with `transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}` === SECTIONS === 1. HERO - Headline: "Websites That Feel As Premium As Your Brand" - Subheadline: "We design high-converting websites for restaurants, cafés, and luxury brands across Egypt and the Gulf" - Trust line (small, bronze text): "Design approach inspired by world-class hospitality brands" - Two buttons: "Get a Quote" (filled bronze background) and "View Our Work" (outlined, bronze border, transparent background) - Stat row below buttons: "4+ Projects" | "Bilingual EN/AR" | "Fast Turnaround" — separated by thin vertical bronze lines 2. SERVICES (3 cards in a grid, grid-cols-1 md:grid-cols-3) - Each card: dark background (#123936), rounded-2xl, p-8, border border-bronze/20 - Icon at top (use lucide-react icons: Palette, Globe, ShoppingCart) - "Custom Design" / "Bilingual Ready" / "Order & Booking Systems" - Below cards: large centered text "Your competitors have a website. Your customers deserve an experience." with a bronze underline accent below it 3. PORTFOLIO (4 project cards, grid-cols-1 md:grid-cols-2) - Each card: image placeholder (use a gradient div as placeholder), overlay on hover with dark gradient + "View Details →" text sliding up from bottom - Small "Concept Project" tag, subtle, top-right corner of card - Projects: ELORIA Café, Harry's Pizza, The Bloom, Al-Dawood (use one-line descriptions for each as provided in project context) 4. WHY US (4 points, 2x2 grid) - Icon + short text for each, same dark card style 5. CONTACT - Headline: "Let's Build Something Premium Together" - Subtext: "Spots are limited each month to ensure every project gets full attention" - WhatsApp button: large, bronze filled, prominent - Simple form: Name, Brand Name, Budget Range (dropdown), Message === TECHNICAL REQUIREMENTS === - Install framer-motion: this is required, not optional - Install lucide-react for icons - Fully responsive, mobile-first - Smooth scroll behavior (CSS: scroll-behavior: smooth, or use anchor links with smooth scroll) - All animation durations between 0.3s-0.8s, easing "easeOut" or cubic-bezier, never linear - Test that animations actually trigger — if whileInView animations don't fire, check viewport margin settings