update home page

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@google/generative-ai": "^0.24.1",
+    "lucide-react": "^0.563.0",
     "next": "16.1.6",
     "octokit": "^5.0.5",
     "react": "19.2.4",

src/app/page.tsx

@@ -1,65 +1,31 @@
-import Image from "next/image";
+import { Navbar } from '@/components/layout/Navbar';
+import { Hero } from '@/components/sections/Hero';
+import { Features } from '@/components/sections/Features';
+import { Footer } from '@/components/layout/Footer';
+import { Code, Layout, FileText } from 'lucide-react';
 
 export default function Home() {
+  const navLinks = [
+    { name: 'Home', href: '#' },
+    { name: 'Features', href: '#features' },
+    { name: 'Examples', href: '#examples' },
+    { name: 'Docs', href: '#docs' },
+  ];
+
+  const featureList = [
+    { icon: <Code size={24} />, title: "Context Awareness", desc: "Detects frameworks and dependencies automatically." },
+    { icon: <Layout size={24} />, title: "Clean Templates", desc: "Formatted Markdown following GitHub best practices." },
+    { icon: <FileText size={24} />, title: "AI Optimization", desc: "Optimized for project clarity and searchability." },
+  ];
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
+    <div className="min-h-screen bg-black text-white selection:bg-white/30">
+      <Navbar links={navLinks} />
+      <main>
+        <Hero />
+        <Features items={featureList} />
       </main>
+      <Footer />
     </div>
   );
-}
+}

src/components/layout/Footer.tsx

@@ -0,0 +1,29 @@
+import { Github } from 'lucide-react';
+
+export const Footer = () => (
+  <footer className="py-16 border-t border-white/5 bg-black">
+    <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-8">
+      <div className="flex items-center gap-3">
+        <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
+          <span className="text-black font-black text-sm">R</span>
+        </div>
+        <span className="font-bold text-lg tracking-tighter">ReadmeGenAI</span>
+      </div>
+
+      <p className="text-zinc-500 text-sm">
+        © 2026 ReadmeGenAI. Designed for the high-performance developer.
+      </p>
+
+      <div className="flex gap-6 items-center">
+        <a
+          href="#"
+          aria-label="GitHub"
+          className="text-zinc-500 hover:text-white transition-colors"
+        >
+          <Github size={22} />
+        </a>
+
+      </div>
+    </div>
+  </footer>
+);

src/components/layout/Navbar.tsx

@@ -0,0 +1,89 @@
+"use client";
+import React, { useState, useEffect } from 'react';
+import { Menu, X, Github } from 'lucide-react';
+import { Button } from '../ui/Button';
+
+export const Navbar = ({ links }: { links: { name: string; href: string }[] }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${
+      scrolled ? 'bg-black/80 backdrop-blur-md border-b border-white/10 py-3' : 'bg-transparent py-5'
+    }`}>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center">
+          {/* Brand Logo */}
+          <div className="flex items-center gap-3 group cursor-pointer">
+            <div className="relative w-9 h-9 bg-white rounded-lg flex items-center justify-center overflow-hidden transition-transform group-hover:rotate-3">
+              <span className="text-black font-black text-xl">R</span>
+            </div>
+            <span className="font-bold text-xl tracking-tighter">ReadmeGenAI</span>
+          </div>
+
+          {/* Desktop Menu */}
+          <div className="hidden md:flex items-center space-x-1">
+            {links.map((link) => (
+              <a 
+                key={link.name} 
+                href={link.href} 
+                className="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white transition-colors"
+              >
+                {link.name}
+              </a>
+            ))}
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex items-center gap-3">
+            {/* Using an anchor tag with button styling for the GitHub Link */}
+            <a
+              href="https://github.com/your-username/ReadmeGenAI"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hidden sm:flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 hover:border-white/30 hover:bg-white/10 transition-all text-xs font-medium"
+            >
+              <Github size={14} />
+              <span>Star on GitHub</span>
+            </a>
+
+            {/* Mobile Menu Toggle using your custom Button component (Ghost variant) */}
+            <Button 
+              variant="ghost" 
+              className="md:hidden p-2 px-2" 
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              aria-label="Toggle Menu"
+            >
+              {isMenuOpen ? <X size={20} /> : <Menu size={20} />}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu Drawer */}
+      {isMenuOpen && (
+        <div className="md:hidden bg-black border-b border-white/10 px-4 py-6 space-y-4 animate-in slide-in-from-top duration-300">
+          {links.map((link) => (
+            <a 
+              key={link.name} 
+              href={link.href} 
+              className="block text-lg font-medium text-gray-400 hover:text-white"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              {link.name}
+            </a>
+          ))}
+          <Button variant="primary" className="w-full justify-center mt-4">
+            <Github size={18} /> Star our Repo
+          </Button>
+        </div>
+      )}
+    </nav>
+  );
+};

src/components/sections/Features.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface FeatureItem {
+  icon: React.ReactNode;
+  title: string;
+  desc: string;
+}
+
+export const Features = ({ items }: { items: FeatureItem[] }) => (
+  <section id="features" className="py-24 border-t border-white/5 bg-black">
+    <div className="max-w-7xl mx-auto px-4">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {items.map((feature, idx) => (
+          <div 
+            key={idx} 
+            className="group p-8 rounded-3xl bg-zinc-950 border border-white/5 hover:border-blue-500/50 hover:bg-zinc-900/50 transition-all duration-300 shadow-2xl"
+          >
+            <div className="mb-6 p-4 rounded-2xl bg-white/5 w-fit group-hover:bg-blue-600 group-hover:text-white transition-all duration-500 text-blue-400">
+              {feature.icon}
+            </div>
+            <h3 className="text-xl font-bold mb-3 text-white tracking-tight">
+              {feature.title}
+            </h3>
+            <p className="text-gray-400 leading-relaxed text-sm">
+              {feature.desc}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+);

src/components/sections/Hero.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Zap, ArrowRight } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { TerminalMockup } from './TerminalMockup';
+
+export const Hero = () => (
+  <section className="relative pt-40 pb-20 overflow-hidden">
+    <div className="absolute top-0 left-1/2 -translate-x-1/2 w-250 h-150 bg-blue-500/10 blur-[120px] rounded-full pointer-events-none" />
+    <div className="max-w-5xl mx-auto px-4 text-center relative z-10">
+      <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-blue-400 mb-8">
+        <Zap size={12} fill="currentColor" />
+        <span>v2.0: Now with real-time codebase context</span>
+      </div>
+      <h1 className="text-5xl md:text-8xl font-extrabold tracking-tighter mb-8 leading-[1.1]">
+        Ship documentation <br />
+        <span className="bg-clip-text text-transparent bg-linear-to-b from-white to-white/40">as fast as your code.</span>
+      </h1>
+      <p className="max-w-2xl mx-auto text-gray-400 text-lg md:text-xl mb-10 leading-relaxed">
+        ReadmeGenAI scans your repository and crafts professional README files automatically.
+      </p>
+      <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+        <Button className="w-full sm:w-auto px-10 py-4 text-base">
+          Get Started <ArrowRight size={18} />
+        </Button>
+        <Button variant="outline" className="w-full sm:w-auto px-10 py-4 text-base">
+          View Examples
+        </Button>
+      </div>
+      <TerminalMockup />
+    </div>
+  </section>
+);

src/components/sections/TerminalMockup.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export const TerminalMockup = () => (
+  <div className="mt-20 relative p-px rounded-2xl bg-linear-to-b from-white/20 via-white/5 to-transparent shadow-2xl max-w-4xl mx-auto">
+    <div className="rounded-2xl bg-black border border-white/5 overflow-hidden">
+      {/* Terminal Header */}
+      <div className="flex items-center justify-between px-5 py-4 bg-zinc-900/40 border-b border-white/5">
+        <div className="flex gap-2">
+          <div className="w-3 h-3 rounded-full bg-[#FF5F56] opacity-80" />
+          <div className="w-3 h-3 rounded-full bg-[#FFBD2E] opacity-80" />
+          <div className="w-3 h-3 rounded-full bg-[#27C93F] opacity-80" />
+        </div>
+        <div className="text-[10px] text-gray-500 font-mono uppercase tracking-widest">
+          bash — readme-generator
+        </div>
+      </div>
+
+      {/* Terminal Content */}
+      <div className="p-8 text-left font-mono text-sm md:text-base leading-relaxed">
+        <div className="flex gap-3">
+          <span className="text-blue-500 font-bold">➜</span>
+          <span className="text-zinc-300">npx readmegenai init</span>
+        </div>
+
+        <div className="mt-4 space-y-1">
+          <p className="text-blue-400 flex items-center gap-2">
+            <span className="animate-pulse">●</span> Analyzing codebase...
+          </p>
+          <p className="text-zinc-500">✓ Detected Next.js 15 & TailwindCSS</p>
+          <p className="text-zinc-500">✓ Parsed 14 API endpoints</p>
+          <p className="text-zinc-500">✓ Metadata successfully pulled from Octokit</p>
+        </div>
+
+        <div className="mt-6 p-3 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
+          <p className="text-emerald-400 font-bold">✨ README.md generated successfully!</p>
+        </div>
+
+        <div className="mt-6 flex gap-3">
+          <span className="text-blue-500 font-bold">➜</span>
+          <span className="w-2 h-5 bg-white/40 animate-pulse" />
+        </div>
+      </div>
+    </div>
+  </div>
+);

src/components/ui/Button.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'outline' | 'ghost';
+  children: React.ReactNode;
+}
+
+export const Button = ({ children, variant = 'primary', className = '', ...props }: ButtonProps) => {
+  const variants = {
+    primary: 'bg-white text-black hover:bg-gray-200',
+    outline: 'bg-transparent border border-white/10 hover:bg-white/5 text-white',
+    ghost: 'bg-transparent hover:text-white text-gray-400',
+  };
+
+  return (
+    <button 
+      className={`px-6 py-2.5 rounded-full font-medium transition-all flex items-center justify-center gap-2 group ${variants[variant]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};