Replit Agent Prompt — Add “Domains”, “Web Hosting”, and Optional Tiles

Goal: Update the Home page feature grid by adding Domains and Web Hosting tiles (matching existing style), and prepare optional tiles for Stock Images and Brand Assets (disabled by default).

Tech

React + TypeScript + Tailwind

Follow the existing card component style (icon, title, stat line, description, CTA)

Tasks

Extend the feature tiles data
Create or update src/data/featureTiles.ts to include the new items in the same shape as existing ones:

export type FeatureTile = {
  id: string;
  title: string;
  stat: string;
  description: string;
  cta: { label: string; href: string };
  icon?: string; // optional, use existing icon mapping if present
  enabled?: boolean; // for optional future tiles
};

export const featureTiles: FeatureTile[] = [
  // existing 4 tiles…
  {
    id: "business-name-wizard",
    title: "Business Name Wizard",
    stat: "10K+ names generated",
    description:
      "Generate unique, memorable business names powered by AI. Perfect for startups and rebrands.",
    cta: { label: "Get Started", href: "/name-wizard" },
  },
  {
    id: "brand-kit",
    title: "Create Brand Kit",
    stat: "5K+ brands created",
    description:
      "Complete brand identity packages with logos, colors, and typography guidelines.",
    cta: { label: "Get Started", href: "/brand-kits" },
  },
  {
    id: "website-templates",
    title: "Website Templates",
    stat: "500+ templates",
    description:
      "Professional, responsive website templates for every industry and business size.",
    cta: { label: "Get Started", href: "/templates" },
  },
  {
    id: "social-kits",
    title: "Social Media Kits",
    stat: "1K+ templates",
    description:
      "Cohesive social media templates and graphics for all major platforms.",
    cta: { label: "Get Started", href: "/social-kits" },
  },

  // 🔹 NEW: Domains
  {
    id: "domains",
    title: "Domains",
    stat: "50K+ domains registered",
    description:
      "Find and secure the perfect domain for your business, powered by GoDaddy’s API.",
    cta: { label: "Search Domains", href: "/domains" },
  },

  // 🔹 NEW: Web Hosting
  {
    id: "web-hosting",
    title: "Web Hosting",
    stat: "Unlimited storage options",
    description:
      "Fast, reliable hosting with built-in security and 24/7 uptime for your site.",
    cta: { label: "Get Hosting", href: "/hosting" },
  },

  // Optional (future): keep enabled:false so they don’t render yet
  {
    id: "stock-images",
    title: "Stock Images",
    stat: "High-quality photography",
    description:
      "High-quality stock photography to power your brand visuals.",
    cta: { label: "Browse Images", href: "/stock" },
    enabled: false,
  },
  {
    id: "brand-assets",
    title: "Brand Assets",
    stat: "Business-ready templates",
    description:
      "Business-ready templates to support presentations, marketing, and operations.",
    cta: { label: "Explore Assets", href: "/brand-assets" },
    enabled: false,
  },
];


Render logic
In the feature grid component (e.g., src/components/FeatureTiles.tsx), filter out disabled items:

import { featureTiles } from "@/data/featureTiles";

const tiles = featureTiles.filter(t => t.enabled !== false);


Routing stubs
Add placeholder routes/pages so CTAs don’t 404:

/domains (existing or stub)

/hosting (new stub page with hosting plan cards placeholder)

/stock (stub, disabled link OK)

/brand-assets (stub, disabled link OK)

Icons (optional)
If the icon system exists, map:

domains → globe/earth icon

web-hosting → server/cloud icon

stock-images → image icon

brand-assets → briefcase/file-stack icon

Grid layout
Ensure the grid gracefully handles 6 tiles (2 rows of 3 on desktop, 2×2 on tablet, 1×N on mobile). Keep spacing and hover states consistent with existing cards.

Acceptance Criteria

Home shows 6 tiles: the original 4 + Domains + Web Hosting.

Optional tiles (Stock Images, Brand Assets) are present in data but not rendered until enabled is set true.

All visible CTAs link to non-404 routes.

Visual style matches existing cards (padding, rounded corners, shadow, icon chip, CTA link with arrow).