Prompt for Replit Agent — IBrandBiz Home Page (v0.2)

Goal: Create a responsive Home page for IBrandBiz that mirrors the current design but upgrades it with live HTML text over a slider, a search bar, quick-start tiles, and a global header/footer. Use React + TypeScript + Tailwind.

Requirements
1) Global layout

Add a Header with logo + nav: Home, Services, Products, Domains, Website Templates, Social Media Kits, Login.

Add a Footer with links: About Us, Services, Products, Terms, Privacy, and social (LinkedIn, Facebook).

Use Tailwind; keep styles clean and minimal.

2) Home page structure (/)

Hero slider at the top:

Use a placeholder background image for now (no embedded text in the image).

Overlay real HTML: headline, subhead, and a CTA button.

Auto-rotate 5 slides (data-driven from a JSON array).

Global search bar under hero: placeholder text "Search domains, templates, or kits…".

Feature tiles (4 cards): Business Name Wizard, Create Brand Kit, Website Templates, Social Media Kits.

Recent Projects section:

If logged in, show a placeholder list; if logged out, show a “Create Your First Project” CTA.

3) Slides data (use this JSON)

Create src/data/homeSlides.ts exporting an array (image can point to a placeholder for now):

export const homeSlides = [
  {
    id: "first-impression",
    title: "Make Your First Impression Your Best!",
    subtitle: "We are here to help you make your first impression your best!",
    cta: { label: "Read More", href: "/services" },
    imageUrl: "/assets/hero/placeholder-1.jpg"
  },
  {
    id: "mockups",
    title: "Mockups",
    subtitle: "We have various mockups for you to highlight your icons and designs for advertising.",
    cta: { label: "Read More", href: "/products" },
    imageUrl: "/assets/hero/placeholder-2.jpg"
  },
  {
    id: "stock",
    title: "Stock Image",
    subtitle: "We have hundreds of stock images for you to choose from.",
    cta: { label: "Read More", href: "/stock" },
    imageUrl: "/assets/hero/placeholder-3.jpg"
  },
  {
    id: "branding",
    title: "Branding",
    subtitle: "Contact us for all of your branding needs.",
    cta: { label: "Read More", href: "/services" },
    imageUrl: "/assets/hero/placeholder-4.jpg"
  },
  {
    id: "templates",
    title: "Templates",
    subtitle: "Find custom, editable logo and presentation templates.",
    cta: { label: "See Templates", href: "/templates" },
    imageUrl: "/assets/hero/placeholder-5.jpg"
  }
  // Note: We'll add the Website Development banner later when the final art is ready.
];

4) Components to create

src/components/HeaderNav.tsx

src/components/GlobalSlider.tsx

Props: slides, autoPlay=true, interval=6000

Overlay: title, subtitle, CTA button (from slide data)

Pagination dots + prev/next arrows

src/components/SearchBar.tsx

src/components/FeatureTiles.tsx

src/components/Footer.tsx

src/pages/Home.tsx (or src/app/page.tsx if Next.js)

5) Brand & UI

Use IBrandBiz palette for accents:
#5cccdc, #f99f1b, #05445e, #189ab4, #75e6da, #d4f1f4, #03222e

CTA buttons: green style used in screenshots (Tailwind bg-emerald-500 hover:bg-emerald-600).

Typography: system stack or Inter; large, readable headings.

6) Behavior

Slider should be text-over-image (no text baked into images).

Responsive: desktop, tablet, mobile.

Accessible: alt text on images, buttons have aria-labels.

7) Acceptance Criteria

Home loads with header, slider (5 slides), search bar, tiles, and footer present.

Live HTML text overlays on slider; CTAs link to correct routes.

No console errors; passes basic Lighthouse accessibility checks.

8) Nice-to-haves (if quick)

Sticky header on scroll.

Blur/fade animation on slide transitions.

Light/dark-safe overlay for text legibility.

File placement

Put placeholder images in public/assets/hero/placeholder-*.jpg.

Export Home as default route.

Deliverable: Commit the components above, wire them into the Home page, and confirm all links render (even if target pages are placeholders).