Eman Dabour
Mo MonBuild 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
Comments (0)
Sign in to leave a comment
System Requirements
Eman Dabour
Introduction
The Eman Dabour project is focused on building a luxury bilingual (EN/AR) single-page application (SPA) portfolio website for Eman Dabour Design. The website will be developed using React, TypeScript, and Tailwind CSS, with mandatory framer-motion animations across all sections. The design will feature a dark burgundy color scheme, serif typography, RTL support, skills progress bars, and a loading screen.
System Overview
The Eman Dabour Design portfolio website aims to showcase the brand's high-end design capabilities. It will provide a visually appealing and interactive experience for users, emphasizing luxury and sophistication. The website will support both English and Arabic languages, ensuring accessibility for a diverse audience across Egypt and the Gulf region. The use of framer-motion will enhance the user experience with smooth animations and transitions.
Functional Requirements
- As a User, I should be able to view the website in both English and Arabic, with a toggle to switch languages instantly.
- As a User, I should see a cinematic hero animation sequence that introduces "Eman Dabour" with elegant transitions.
- As a User, I should experience smooth animations on page load and scroll, enhancing the visual appeal of each section.
- As a User, I should see a hero section with animated text transitions showcasing "Designer", "Creative Developer", and "UI/UX Specialist".
- As a User, I should be able to navigate through sections using a fixed/sticky top navbar with smooth scroll behavior.
- As a User, I should see a services section with animated cards that describe the services offered.
- As a User, I should see a skills section with animated progress bars that display expertise levels.
- As a User, I should be able to view a portfolio section with cinematic project reveals and horizontal scrolling.
- As a User, I should see a "Why Us" section with points highlighting the brand's unique selling propositions.
- As a User, I should be able to contact the brand through a contact form with fields for name, brand name, budget range, and message.
- As a User, I should experience hover interactions on portfolio cards and buttons, enhancing interactivity.
- As a User, I should see a floating background element in the hero section that animates continuously.
User Personas
- Visitor: A potential client or partner interested in exploring Eman Dabour Design's portfolio and services.
- Admin: The website administrator responsible for updating content and managing the bilingual feature.
Core User Flows
- Visitor navigates to the website -> experiences cinematic hero animation -> views hero section -> explores services -> checks skills -> browses portfolio with horizontal scrolling -> reads "Why Us" section -> fills contact form.
- Admin logs in -> updates content in both English and Arabic -> manages animations and interactions -> ensures smooth functionality across devices.
Visuals Colors and Theme
- primary: #0E090B (dark burgundy)
- primary_light: #120A0D (slightly lighter burgundy)
- secondary: #170D11 (darker burgundy for surfaces)
- accent: #F4EDE3 (soft cream for text and highlights)
- highlight: #EDE3D5 (light cream for hover states)
- bg: #0E090B (page background)
- surface: rgba(27, 17, 21, 0.8) (card/panel background)
- text: #F4EDE3 (primary text color)
- text_muted: #BBAFA5 (muted warm gray for secondary text)
- border: rgba(187, 175, 165, 0.2) (subtle border color)
Signature Design Concept
The homepage will feature an interactive "Luxury Journey" concept. As users scroll, they will embark on a visual journey through a series of animated sections that mimic the experience of exploring a high-end design studio. Each section will reveal itself with smooth, elegant animations powered by framer-motion. The hero section will include a massive headline that fades in and moves up, accompanied by a floating gold element that gently oscillates. The portfolio section will feature cards that flip and reveal project details on hover, creating a dynamic and engaging experience. The navigation bar will transform as users scroll, becoming more opaque and solidifying the brand's presence. This concept will be brought to life using framer-motion for animations and lucide-react for icons, ensuring a seamless and captivating user experience.
Interaction Model & Motion Direction
The landing page will utilize a "parallax" interaction model, with layered depth via scroll. Decorative elements will translate at different speeds, creating a sense of depth and immersion. Each section will have distinctive animations, such as fade-ins, hover effects, and scroll-triggered reveals, ensuring a visually rich and engaging first impression. Internal pages will maintain a "static" interaction model for clarity and readability.
Non-Functional Requirements
- The website must be fully responsive and mobile-first, ensuring compatibility across devices.
- All animations should have durations between 0.3s and 0.8s, using "easeOut" or cubic-bezier easing.
- The website should support smooth scroll behavior for a seamless navigation experience.
- The bilingual feature should allow instant language switching without page reloads.
Tech Stack
- Frontend: React, TypeScript, Tailwind CSS
- Animations: framer-motion
- Icons: lucide-react
Assumptions and Constraints
- The website will primarily target users in Egypt and the Gulf region, necessitating bilingual support.
- The design must reflect a luxury aesthetic, differentiating it from generic templates.
- All animations and interactions must be implemented using framer-motion.
Glossary
- SPA: Single Page Application
- RTL: Right-to-Left text direction
- EN/AR: English/Arabic language support
- CTA: Call to Action
- UX/UI: User Experience/User Interface
Where Luxury Meets
Creative Vision
Crafting exquisite brand identities, elegant spaces, and unforgettable visual experiences for discerning clients across the region.
Our Services
Elevating brands through thoughtful design across every touchpoint — from identity to environment.
Brand Identity
Crafting cohesive visual identities that capture the essence of your brand and leave a lasting impression on your audience.
Interior Design
Transforming spaces into luxurious environments that blend aesthetics with functionality for an elevated living experience.
Graphic Design
Delivering striking visual communications that tell your story with clarity, elegance, and creative precision.
Web Design
Building immersive digital experiences with refined typography, seamless interactions, and pixel-perfect layouts.
Print Design
Designing premium print collateral — from business cards to editorial layouts — with meticulous attention to detail.
Packaging Design
Creating packaging concepts that captivate on the shelf and embody the luxury and quality of your product.
Our Expertise
Years of refined craft distilled into core disciplines, each mastered through dedication to the art of design.
Our Work
A curated selection of our finest design projects, each crafted with meticulous attention to detail and timeless elegance.
Why Choose Us
Discover what sets Eman Dabour Design apart — where luxury meets precision, and every detail tells your story.
Luxury Aesthetic
Every design element is curated to embody elegance, sophistication, and the highest standards of visual refinement.
Bilingual Experience
Fluent in both English and Arabic — your brand communicates seamlessly across cultures and regions.
Attention to Detail
From typography to spacing, every pixel is intentional. We obsess over the details that elevate exceptional design.
Client-Centric Approach
Your vision drives the process. We listen, collaborate, and craft solutions that reflect your unique identity.
Innovative Solutions
Blending creativity with cutting-edge technology to deliver designs that are both timeless and forward-thinking.
Let's Create Together
Ready to elevate your brand? Share your vision with us and let's bring extraordinary design to life.
Start Your Project
Every great design begins with a conversation. Share your ideas, and we'll craft a tailored approach that brings your brand's story to life.
No comments yet. Be the first!