My Blog

IMPORTANT: Do NOT include <!DOCTYPE html>, <html>, <head>, <body>, <header>, or <footer> tags. Only output the main content sections.

CONTEXT:
bskt.ai is a modern, high-performance platform for AI tools, tutorials, and news. The homepage needs to be visually striking, highly responsive, and focused on user engagement. The aesthetic is dark mode, with a tech-forward feel, using dark grays, white/light text, and vibrant electric blue/purple gradients for key interactive elements.

REQUIREMENTS:

  1. Tailwind CSS: Use Tailwind CSS utility classes directly within the HTML elements for all styling. Assume Tailwind is already loaded and available.
  2. Modularity: Each major section should be wrapped in a <section> tag with a descriptive id.
  3. Responsiveness: Prioritize mobile-first design. Use Tailwind’s responsive prefixes (e.g., sm:, md:, lg:) for breakpoints where necessary.
  4. Placeholders: Use https://placehold.co/ for all image placeholders (e.g., https://placehold.co/600x400/1e293b/a8a8a8?text=Image).
  5. SEO Semantics: Use appropriate semantic HTML5 tags (e.g., h1, h2, p, a, div, img). Include alt attributes for all images.
  6. Accessibility: Ensure sufficient contrast for text.
  7. Color Palette:
    • Backgrounds: bg-gray-950 (darkest), bg-gray-900, bg-gray-800.
    • Text: text-white, text-gray-300, text-gray-400.
    • Accents/CTAs: bg-gradient-to-r from-blue-500 to-purple-600 (for buttons/highlights), text-blue-400 for links.
    • Borders/Dividers: border-gray-700.

GENERATE THE FOLLOWING HOMEPAGE SECTIONS IN ORDER:

SECTION 1: HERO SECTION (id="hero-section")

  • Container: Full-width, min-h-screen (minimum screen height), flex flex-col items-center justify-center with py-16 md:py-24 px-4 text-center bg-gray-950 relative overflow-hidden.
  • H1: “Your Daily Basket of AI Intelligence” (Large, bold, text-5xl md:text-6xl lg:text-7xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600 leading-tight).
  • Subheadline: “Curating the future. Discover powerful tools, master new skills, and stay ahead with the latest trends.” (text-xl md:text-2xl text-gray-300 mt-4 max-w-3xl).
  • Search Component: (mt-10 w-full max-w-lg relative)
    • Input: p-4 pl-12 rounded-full border border-gray-700 bg-gray-800 text-white w-full focus:outline-none focus:ring-2 focus:ring-blue-500 with placeholder “Find an AI tool, tutorial, or news…”
    • Search Icon: An <i> tag or simple SVG placeholder inside the input field (e.g., absolute left-4 top-1/2 -translate-y-1/2 text-gray-400).
  • Trending Tags: (mt-6 flex flex-wrap justify-center gap-3)
    • Generate 4 example <a> tags for trending topics (e.g., “Generative Art”, “AI Writing”, “Free Tools”, “Productivity AI”). Style them as bg-gray-800 hover:bg-gray-700 text-gray-300 text-sm px-4 py-2 rounded-full transition-colors duration-200.

SECTION 2: FEATURED AI TOOLS PREVIEW (id="featured-tools")

  • Container: py-16 md:py-24 bg-gray-900 px-4.
  • H2: “Handpicked for Your Project: The Smart Basket” (text-4xl md:text-5xl font-bold text-white text-center mb-4).
  • Description: “Explore cutting-edge AI tools, rated and reviewed by the bskt.ai community.” (text-lg text-gray-400 text-center mb-12 max-w-3xl mx-auto).
  • Filter Tabs: (flex flex-wrap justify-center gap-3 mb-10)
    • Generate 4 <a> tags for “All Tools”, “Top Rated”, “New Arrivals”, “Free Tools”. Style them px-6 py-3 rounded-full text-lg font-semibold text-gray-300 bg-gray-800 hover:bg-gradient-to-r from-blue-500 to-purple-600 hover:text-white transition-all duration-300. (Mark “All Tools” as bg-gradient-to-r initially).
  • Tool Cards Grid: (grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto)
    • Generate 4 example tool cards.
    • Each Card Structure:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col items-center text-center border border-gray-700 hover:border-blue-500 transition-all duration-300.
      • Image: https://placehold.co/100x100/374151/d1d5db?text=Tool (w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-gray-600).
      • H3 (Tool Name): text-2xl font-semibold text-white mb-2.
      • Description: text-gray-400 text-sm mb-4.
      • Category Tag: span with bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full mb-3.
      • BSKT Score: div with text-yellow-400 font-medium text-sm mb-4.
      • “Visit Tool” Button: <a> with inline-block px-6 py-3 rounded-full font-bold text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 mt-auto.
      • “Save to Basket” Icon (placeholder <i> tag): absolute top-4 right-4 text-gray-500 hover:text-blue-400 text-xl cursor-pointer.
  • View All Tools Button: (mt-12 text-center) <a> with inline-block px-8 py-4 rounded-full text-xl font-bold text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300. Link to /tools.

SECTION 3: MASTER THE AI LANDSCAPE (LEARN & TUTORIALS PREVIEW) (id="learn-ai-preview")

  • Container: py-16 md:py-24 bg-gray-950 px-4.
  • H2: “Master the AI Landscape: Unlock Your Potential” (text-4xl md:text-5xl font-bold text-white text-center mb-4).
  • Description: “Dive into comprehensive guides, practical tutorials, and expert insights to harness the power of AI.” (text-lg text-gray-400 text-center mb-12 max-w-3xl mx-auto).
  • Layout: (max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8)
    • Featured Tutorial Card (Left on Desktop):bg-gray-800 rounded-xl shadow-lg border border-gray-700 overflow-hidden.
      • Image: https://placehold.co/800x450/374151/d1d5db?text=Featured+Tutorial (w-full h-auto object-cover).
      • Content Box: p-6.
      • Category: span with bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full mb-2 inline-block.
      • H3 (Title): text-3xl font-semibold text-white mb-3.
      • Excerpt: text-gray-400 mb-5.
      • “Read Tutorial” Button: <a> with inline-block px-6 py-3 rounded-full font-bold text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300.
    • Smaller Recent Tutorials (Right on Desktop):grid grid-cols-1 gap-6.
      • Generate 3 smaller tutorial cards.
      • Each Small Card:bg-gray-800 rounded-xl shadow-md border border-gray-700 p-4 flex gap-4 items-center hover:border-blue-500 transition-all duration-300.
        • Image: https://placehold.co/120x80/374151/d1d5db?text=Guide (w-24 h-16 object-cover rounded-md flex-shrink-0).
        • Content: flex-grow.
        • H4 (Title): text-xl font-semibold text-white mb-1.
        • “Read More” Link: <a> with text-blue-400 hover:text-blue-300 text-sm.
  • View All Tutorials Button: (mt-12 text-center) <a> with inline-block px-8 py-4 rounded-full text-xl font-bold text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300. Link to /learn.

SECTION 4: AI PULSE CHECK (NEWS & TRENDS PREVIEW) (id="news-trends")

  • Container: py-16 md:py-24 bg-gray-900 px-4.
  • H2: “AI Pulse Check: Latest News & Breakthroughs” (text-4xl md:text-5xl font-bold text-white text-center mb-4).
  • Description: “Stay informed with daily updates, industry analysis, and new AI launches from around the globe.” (text-lg text-gray-400 text-center mb-12 max-w-3xl mx-auto).
  • News Cards Grid: (max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8)
    • Generate 3 example news cards.
    • Each Card Structure:bg-gray-800 rounded-xl shadow-lg border border-gray-700 overflow-hidden hover:border-blue-500 transition-all duration-300.
      • Image: https://placehold.co/600x337/374151/d1d5db?text=News (w-full h-48 object-cover).
      • Content Box: p-6.
      • Date: div with text-gray-500 text-xs mb-2.
      • H3 (Title): text-xl font-semibold text-white mb-3.
      • Snippet: text-gray-400 text-sm mb-4.
      • “Read Article” Link: <a> with text-blue-400 hover:text-blue-300 text-sm font-semibold.
  • View All News Button: (mt-12 text-center) <a> with inline-block px-8 py-4 rounded-full text-xl font-bold text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300. Link to /news.

SECTION 5: JOIN THE BASKET COMMUNITY (NEWSLETTER CTA) (id="newsletter-cta")

  • Container: py-16 md:py-24 bg-gray-950 px-4 text-center.
  • H2: “Don’t Miss a Beat: Get the bskt.ai Daily Brief” (text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600 mb-4).
  • Subheadline: “Join our growing community and receive curated AI news, tool updates, and exclusive insights directly in your inbox.” (text-lg text-gray-400 mb-10 max-w-3xl mx-auto).
  • Subscription Form: (flex flex-col sm:flex-row gap-4 justify-center max-w-xl mx-auto)
    • Email Input: input type="email" with placeholder “Enter your email” and p-4 rounded-full border border-gray-700 bg-gray-800 text-white flex-grow focus:outline-none focus:ring-2 focus:ring-blue-500.
    • Button: button type="submit" with “Subscribe Now” and px-8 py-4 rounded-full font-bold text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 flex-shrink-0.
Act as a Senior UI/UX Developer. Your task is to generate the complete HTML structure and inline Tailwind CSS classes for the main content area of the bskt.ai homepage. IMPORTANT: Do NOT include ``, ``, ``, ``, `
`, or `