G C E

Design a complete, modern, clean, high-quality user interface for a Gift Card E-commerce Website called “Giftly”. The design should be professional, minimal, easy to navigate, and visually appealing. Use consistent spacing, soft shadows, rounded corners, and a calm, modern color palette. ==================================== STYLE & BRAND DIRECTION ==================================== - Clean, modern, minimalistic, and elegant. - Use soft neutral backgrounds (#F7F7F7 or white). - Primary color: soft coral (#FF6B61) or pastel blue (#4AA8FF). - Accent colors: light gray (#E9E9E9), dark navy (#1A1F36). - Typography: Inter, Poppins, or SF Pro — bold headings, clean readable body text. - Rounded corners on cards, buttons, and inputs. - Light shadows for elevation. - Smooth layout, balanced white space, clear visual hierarchy. - Modern, friendly icons and illustrations. ==================================== PAGE 1: HOMEPAGE ==================================== HEADER: - Left: Logo “Giftly”. - Center: Navigation: Home | Gift Cards | Categories | Brands | How It Works | Support. - Right: Icons: Search | User Account | Cart with counter. - Sticky header on scroll. HERO SECTION: - Large bold headline: “Send Joy Instantly with Digital Gift Cards.” - Subtext explaining fast delivery and easy personalization. - Primary CTA: “Browse Gift Cards” - Secondary CTA: “Send a Gift” - Right side: floating mockup of colorful gift cards, soft shadows. SEARCH SECTION: - Large centered search bar with placeholder: “Search brands, categories, or occasions…” - Quick filter chips: Birthday, Wedding, Gaming, Restaurants, Fashion. FEATURED CATEGORIES: - Grid of 5–6 category cards. - Each card includes icon, pastel background, title, short description. - Hover effect: slight scale, subtle shadow. POPULAR GIFT CARDS: - 3 or 4-column grid. - Product card includes: - Gift card preview image. - Brand logo. - Price range: “From $10–$200” - Buttons: “View Details” + Quick Add. - Clean, premium spacing. HOW IT WORKS SECTION: 4-step horizontal layout: 1. Choose a Gift Card 2. Personalize & Add Amount 3. Choose Delivery Method 4. Send Instantly - Each step has a simple line icon and explanation. TESTIMONIALS SECTION: - 3 review cards with avatars, names, star ratings, and quote text. - Light, minimal cards. FOOTER: - Four columns: 1. About Giftly 2. Help & Support 3. Legal 4. Social Icons - Bottom row: secure payment logos (Visa, PayPal, Mastercard). ==================================== PAGE 2: GIFT CARD LISTING PAGE (Catalog) ==================================== LAYOUT: - Left sidebar filters, right content grid. FILTER SIDEBAR: - Categories (checkbox list) - Price Range slider - Delivery Type (Digital / Physical) - Occasion tags (chips) TOP BAR: - Sort by: Popularity | Price | Newest - Items count displayed. PRODUCT GRID: - Clean card layout. - Each card shows: - Brand logo - Preview image - Short description - Price range - Rating - Buttons: “View Details” + Add to Cart ==================================== PAGE 3: GIFT CARD DETAILS PAGE ==================================== LEFT SIDE: - Large gift card preview with soft shadow. - Additional thumbnails if needed. RIGHT SIDE: - Brand name and rating. - Short description. - Amount selector: - Preset buttons: $10, $25, $50, $100 - Custom amount input. - Delivery method selector: - Email | SMS | Print - Personal message textarea. - Recipient name, sender name fields. - Price total. - Full-width CTA button: “Add to Cart” - Secondary CTA: “Buy Now” TABS BELOW: - Details - Terms & Conditions - Reviews RELATED GIFT CARDS SECTION: - Horizontal card slider. ==================================== PAGE 4: CART PAGE ==================================== CART ITEMS LIST: - Thumbnail of gift card. - Brand name, amount, delivery type. - Editable amount and quantity. - Remove item icon (trash). ORDER SUMMARY PANEL: - Subtotal - Tax - Total price - Promo code input - Checkout button (large primary) ==================================== PAGE 5: CHECKOUT PAGE ==================================== STEP LAYOUT: 1. Contact Information 2. Delivery Details 3. Payment 4. Review & Confirm FORMS: - Clean inputs with labels. - Payment section includes: card number, expiry, CVV, billing address. - Delivery options appear clearly. PRIMARY ACTION: - “Complete Purchase” ==================================== PAGE 6: ORDER CONFIRMATION PAGE ==================================== - Large success icon. - Message: “Your Gift is On the Way!” - Order summary box. - Buttons: “View Orders” and “Send Another Gift.” ==================================== DESIGN COMPONENTS (Design System) ==================================== - Primary Button, Secondary Button, Ghost Button - Input Fields (regular + large) - Search Bar - Category Chip - Price Slider - Product Card (standard component) - Navbar - Footer - Breadcrumbs - Tabs - Review Card - Notification Toast - Modal (for filters on mobile) ==================================== RESPONSIVE RULES ==================================== DESKTOP: - 12-column grid, ample white space. TABLET: - 2-column layouts where appropriate. - Compact navigation. MOBILE: - Single column layout. - Collapsible filter sidebar becomes bottom sheet modal. - Sticky Add-to-Cart button on details page. ==================================== GOAL ==================================== Produce a full, cohesive e-commerce website UI with all pages, components, and states. The design must feel clean, modern, intuitive, visually appealing, and ready for handoff to developers.