Build a modern, professional, responsive website for **Panda Delivery**, a Bahrain-based delivery service for supermarkets and hypermarkets. I have attached a reference image of the current marketing flyer/design. **Use the attached image as the primary visual reference for the website's branding, colors, layout hierarchy, typography style, imagery, and content. Do NOT simply place the flyer image on the page. Recreate the design as a real responsive website using HTML/CSS/components.** ## 1. Overall Design Direction The website should feel like a professional logistics/delivery company website rather than a generic template. Brand personality: - Fast - Reliable - Safe - Professional - Friendly - Modern - Family/business friendly Primary visual style: - Strong Panda Delivery branding - Blue, red, yellow and white color palette - Rounded cards and sections - Bold headings - Clean white backgrounds - Yellow accent elements - Blue CTA sections - Subtle shadows - Professional delivery/transport imagery - Modern responsive layout - Avoid excessive gradients - Avoid overly flashy animations The attached flyer should be treated as the visual source of truth. --- # 2. Technology Build the website using: - React - TypeScript - Tailwind CSS - Modern component-based architecture - Responsive design - Clean reusable components - Semantic HTML - Mobile-first CSS If the project already has an existing framework, preserve the existing project structure and integrate the website into it rather than unnecessarily replacing the setup. Do not use a heavy UI library unless already installed. --- # 3. Website Structure Create a single-page marketing website with these sections: 1. Sticky Navigation 2. Hero Section 3. About / Introduction 4. Services 5. Delivery Fleet 6. Why Partner With Us 7. Partner / Register Section 8. How It Works 9. Service Coverage / Bahrain 10. Contact / Partnership CTA 11. Footer The page should feel like a complete corporate landing page. --- # 4. Header / Navigation Create a clean sticky navigation bar. Left: - Panda Delivery logo - Use the branding from the reference image. - If the actual logo asset is unavailable, create a clean temporary logo treatment that can easily be replaced later. Navigation links: - Home - About - Services - Fleet - Why Us - Partners - Contact Right side: - WhatsApp/contact CTA - "Partner With Us" button Desktop: - Horizontal navigation - Sticky header - White background - Subtle shadow when scrolling Mobile: - Logo - Hamburger menu - Slide-down/mobile navigation --- # 5. HERO SECTION Create a visually strong hero section inspired by the top portion of the reference flyer. Main headline: "From Store to Your Doorstep" Supporting headline: "Fast • Reliable • Safe" Description: "Your trusted delivery partner for supermarkets and hypermarkets." Primary CTA: "Partner With Us" Secondary CTA: "Contact Us" Hero visual: - Use a professional supermarket/delivery image - Show grocery shopping/delivery context - Ideally show a delivery rider or delivery vehicle - Maintain the visual feeling of the reference flyer Add subtle decorative brand curves/lines using: - Red - Yellow - Blue Do not make the hero look cluttered. Desktop: - Two-column layout - Text on one side - Large visual on the other Mobile: - Text first - Image below - Buttons stacked or side-by-side depending on screen width --- # 6. ABOUT / INTRODUCTION Heading: "We Deliver Your Everyday Needs" Use this copy: "Panda Delivery Services provides fast, reliable and professional delivery solutions for supermarkets and hypermarkets. We help you reach your customers directly at their doorstep with our bike and car delivery network." Create a visually appealing two-column section. Left: - Heading - Description - CTA Right: - Delivery rider / vehicle / supermarket imagery Add small trust indicators such as: - Reliable Delivery Team - Professional Drivers & Riders - Same-Day Delivery - Real-Time Order Updates --- # 7. SERVICES SECTION Heading: "Our Services" Create attractive service cards. Services: ### Supermarket & Hypermarket Product Delivery Reliable delivery of grocery and retail orders directly to customers. ### Same-Day & Scheduled Deliveries Flexible delivery options based on customer requirements. ### Wide Coverage Area Delivery operations designed to serve customers across Bahrain. ### Safe & Secure Handling Careful handling of customer orders from pickup to doorstep. ### Professional Drivers & Riders Experienced delivery personnel focused on reliable service. ### Real-Time Order Updates Keep customers informed throughout the delivery process. Each service card should include: - Modern icon - Heading - Short description - Subtle hover animation Use the brand colors for icons/accent elements. --- # 8. DELIVERY FLEET SECTION Create a visually prominent section called: "Our Delivery Fleet" Split into two large cards. ## Bike Delivery Label: "BIKE DELIVERY" Description: "Fast • Economical • Ideal for small & medium orders" Features: - Fast delivery - Cost effective - Ideal for smaller orders - Suitable for city deliveries Image: Professional delivery rider on a branded motorcycle. ## Car Delivery Label: "CAR DELIVERY" Description: "Spacious • Safe • Perfect for large & bulky orders" Features: - More storage capacity - Suitable for larger orders - Safe transportation - Ideal for bulky supermarket orders Image: Professional branded delivery car. The two cards should visually resemble the bike/car presentation shown in the reference flyer. --- # 9. WHY PARTNER WITH US Create a large light-blue/white section. Heading: "Why Partner With Us?" Create a checklist/grid containing: ✓ Reliable Delivery Team ✓ Flexible Fleet (Bike & Car) ✓ Cost-Effective Solution ✓ Professional Service ✓ Scalable Operations ✓ Focus on Customer Satisfaction Add a large decorative statement: "Together for a Better Delivery Experience" Make this section visually premium. --- # 10. PARTNER / REGISTER SECTION Create a section: "Our Register Partners" The reference flyer contains: - Jasmis - talabat - Arabian Taxi Create a professional partner-logo area. IMPORTANT: Do not fabricate official logos if actual assets are unavailable. Use placeholder partner-logo containers that allow the real logos to be inserted later. The layout should look like: [Jasmis] | [talabat] | [Arabian Taxi] Add CTA: "Become Our Partner" Button: "Register Your Business" --- # 11. HOW IT WORKS Add a simple 4-step process. Heading: "How Our Delivery Works" Steps: 01 — Receive Order 02 — Pick Up From Store 03 — Deliver Safely 04 — Customer Receives Order Use numbered cards/icons and a connecting visual line on desktop. On mobile, stack vertically. --- # 12. SERVICE COVERAGE Create a Bahrain-focused section. Heading: "Delivery Across Bahrain" Content: "We provide reliable delivery solutions for supermarkets and hypermarkets across Bahrain." Use a subtle Bahrain map/location visual if an appropriate asset is available. Show small statistics/cards such as: "Bike & Car Fleet" "Same-Day Delivery" "Professional Riders" "Real-Time Updates" Do not invent numerical claims such as number of riders, orders, customers or delivery locations unless actual data is provided. --- # 13. CONTACT / CTA SECTION Create a strong blue CTA section. Heading: "Ready to Grow Your Delivery Network?" Description: "Partner with Panda Delivery for reliable, flexible and professional supermarket delivery solutions." Buttons: "Partner With Us" "Contact Us" Contact details from the reference: Phone / WhatsApp: +973 36243931 Location: Bahrain Make WhatsApp clickable using the appropriate WhatsApp URL format. Phone number should also be clickable on mobile. --- # 14. FOOTER Create a professional footer. Include: Panda Delivery logo "Your Store. Our Delivery." Quick Links: - Home - About - Services - Fleet - Partners - Contact Services: - Supermarket Delivery - Hypermarket Delivery - Same-Day Delivery - Scheduled Delivery Contact: +973 36243931 Bahrain Social media icons: - WhatsApp - Instagram - Facebook - LinkedIn Only link social profiles if actual URLs are provided. Otherwise use placeholder links that are easy to replace. Bottom: © 2026 Panda Delivery. All Rights Reserved. --- # 15. BRAND COLORS Use the reference image to establish the visual palette. Suggested starting palette: Primary Blue: #0057A8 Dark Blue: #003B73 Red: #E51B23 Yellow: #FFD200 White: #FFFFFF Light Blue: #EAF5FF Dark Text: #172033 Gray: #667085 Do not force these values if extracting the colors from the reference image produces better matching colors. The overall website should visually match the attached reference. --- # 16. TYPOGRAPHY Use a modern professional sans-serif font. Recommended: - Poppins or - Inter or - Montserrat Use: - Bold/ExtraBold for major headings - Semi-bold for section headings - Regular for body text Headings should be strong and highly readable. Avoid decorative fonts except for very small accent text if necessary. --- # 17. IMAGES The reference flyer contains: - Panda mascot - Delivery motorcycle - Delivery car - Supermarket - Delivery rider - Customer receiving package Use high-quality commercial-style images. If the exact images from the reference are available, reuse them. Otherwise use visually similar images. Do not use low-quality stock images. All images should: - Have rounded corners where appropriate - Be properly cropped - Maintain consistent aspect ratios - Use object-fit: cover - Have appropriate responsive behavior Add meaningful alt text. --- # 18. ANIMATIONS Keep animations professional and subtle. Add: - Fade-up on section entrance - Slight card hover elevation - Button hover transition - Image subtle scale on hover - Navigation transition - Smooth scrolling Do NOT use: - Excessive bouncing - Flashing effects - Overly aggressive parallax - Continuous distracting animations The website should feel corporate and premium. --- # 19. RESPONSIVE DESIGN This is extremely important. The website must work properly on: - 320px mobile - 375px mobile - 390px mobile - 430px mobile - Tablet - 1024px desktop - 1280px desktop - 1440px desktop - Large desktop screens Mobile requirements: - Hamburger navigation - No horizontal scrolling - Cards become one column - Fleet cards stack vertically - Hero becomes single column - Buttons become mobile friendly - Contact details remain easily clickable - Typography scales appropriately - Images never overflow containers --- # 20. UI DETAILS Use: - Border radius: 16–24px for major cards - Soft shadows - Generous whitespace - Consistent section spacing - Strong visual hierarchy Avoid: - Generic Bootstrap-looking components - Excessive rounded pills - Excessive gradients - Too many colors in one component - Crowded layouts - Huge empty spaces - Poor contrast The final result should look like a professionally designed logistics company website. --- # 21. IMPORTANT: REFERENCE IMAGE The attached image is the primary design reference. Analyze it carefully before implementation. Pay attention to: - Panda Delivery logo placement - Red/yellow/blue brand colors - Curved graphic elements - Typography hierarchy - Delivery imagery - Bike/car presentation - Service icons - Partner section - Blue bottom CTA/contact area - Overall visual rhythm Translate the flyer into a **modern website**, rather than reproducing the flyer as a flat image. The website should feel like: "Premium Bahrain supermarket delivery company" rather than: "Digital version of a flyer." --- # 22. COMPONENT ARCHITECTURE Create reusable components such as: Navbar Hero AboutSection ServicesSection ServiceCard FleetSection FleetCard WhyPartnerSection PartnerSection HowItWorks CoverageSection ContactCTA Footer Keep components clean and maintainable. Do not put the entire website into one large component. --- # 23. CODE QUALITY Requirements: - TypeScript types where appropriate - Reusable data arrays for services/fleet/features - No unnecessary duplicated markup - Semantic HTML - Accessible buttons - Accessible navigation - Proper image alt attributes - Responsive Tailwind classes - Clean component naming - No console errors - No broken links - No layout overflow --- # 24. SEO Add: Title: "Panda Delivery | Fast, Reliable & Safe Delivery in Bahrain" Meta description: "Panda Delivery provides fast, reliable and professional supermarket and hypermarket delivery services across Bahrain." Use proper: - H1 - H2 - H3 hierarchy. Add appropriate Open Graph metadata if the project supports it. --- # 25. FINAL REQUIREMENT Before considering the implementation complete: 1. Compare the website visually against the attached reference. 2. Ensure the Panda Delivery branding is immediately recognizable. 3. Ensure the blue/red/yellow color language is consistent. 4. Ensure the hero section has the same visual impact as the flyer. 5. Ensure bike and car delivery are prominently represented. 6. Ensure the services are easy to understand. 7. Ensure the partner section is clearly visible. 8. Ensure the contact number +973 36243931 is prominent. 9. Ensure the website looks excellent on mobile. 10. Ensure the website looks like a real production website rather than an AI-generated template. Build the complete working website, not just a mockup. Use the attached image as the visual design reference throughout the implementation.