Updates: hero & footer

src/app/(home)/_components/footer.tsx

@@ -2,20 +2,30 @@ import Link from "next/link";
 
 export function Footer() {
   return (
-    <footer className="w-full px-6 py-6 border-t border-border/40">
-      <div className="mx-auto max-w-5xl flex items-center justify-between text-xs text-muted-foreground">
-        <span>
-          Built by{" "}
-          <a
-            href="https://github.com/AnmolSaini16"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="font-medium text-foreground hover:underline"
+    <footer className="w-full px-6 py-8 border-t border-border/40 bg-muted/20">
+      <div className="mx-auto max-w-5xl flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-muted-foreground">
+        <div className="flex items-center gap-2 flex-wrap justify-center sm:justify-start">
+          <span>© {new Date().getFullYear()} mapcn</span>
+          <span className="text-border">•</span>
+          <span>
+            Built by{" "}
+            <a
+              href="https://github.com/AnmolSaini16"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-foreground hover:underline underline-offset-4"
+            >
+              Anmol
+            </a>
+          </span>
+        </div>
+        <div className="flex items-center gap-6">
+          <Link
+            href="/docs"
+            className="hover:text-foreground transition-colors"
           >
-            Anmol
-          </a>
-        </span>
-        <div className="flex items-center gap-4">
+            Documentation
+          </Link>
           <a
             href="https://github.com/AnmolSaini16/mapcn"
             target="_blank"
@@ -24,12 +34,6 @@ export function Footer() {
           >
             GitHub
           </a>
-          <Link
-            href="/docs"
-            className="hover:text-foreground transition-colors"
-          >
-            Docs
-          </Link>
         </div>
       </div>
     </footer>

src/app/(home)/_components/hero.tsx

@@ -40,18 +40,19 @@ export function Hero() {
           Beautiful maps, made simple.
         </h1>
         <p className="text-foreground/80 text-lg max-w-xl mx-auto leading-relaxed animate-fade-up delay-100">
-          Beautiful, ready to use, and customizable map components built on
-          MapLibre. Styled with Tailwind. Zero config. One command setup.
+          Ready-to-use, customizable map components for React. Built on
+          MapLibre, styled with Tailwind. Zero config. One command setup.
         </p>
       </div>
-      <div className="animate-fade-up delay-200 text-center">
-        <div className="inline-flex items-center gap-3 bg-secondary/60 border border-border/40 rounded-full px-4 py-2.5 font-mono text-sm max-w-full overflow-x-auto">
-          <span className="text-muted-foreground/60 shrink-0">$</span>
+
+      <div className="animate-fade-up delay-200 flex justify-center">
+        <div className="inline-flex items-center gap-3 bg-secondary/60 border border-border/40 rounded-full px-4 py-2.5 font-mono text-sm max-w-full overflow-hidden shadow">
+          <span className="text-emerald-400 shrink-0">$</span>
           <code className="text-foreground/90 truncate">{installCommand}</code>
           <CopyButton text={installCommand} />
         </div>
       </div>
-      {/* CTA Buttons */}
+
       <div className="flex flex-wrap justify-center items-center gap-3 animate-fade-up delay-300">
         <Button asChild>
           <Link href="/docs">
@@ -63,7 +64,7 @@ export function Hero() {
             View Examples
           </Link>
         </Button>
-      </div>{" "}
+      </div>
     </div>
   );
 }

src/app/(home)/page.tsx

@@ -6,10 +6,10 @@ import { Footer } from "./_components/footer";
 export default function Page() {
   return (
     <div className="min-h-screen bg-background flex flex-col overflow-x-hidden">
-      <Header className="max-w-5xl mx-auto w-full" />
+      <Header className="max-w-5xl mx-auto w-full xl:px-0" />
 
       <main className="flex-1 px-6 py-20 mx-auto w-full">
-        <section className="max-w-5xl w-full mx-auto space-y-20">
+        <section className="max-w-5xl mx-auto flex flex-col gap-20">
           <Hero />
           <Examples />
         </section>

src/app/docs/page.tsx

@@ -1,4 +1,4 @@
-import { Zap, Moon, Puzzle, Code } from "lucide-react";
+import { Zap, Moon, Puzzle, Code, Box, Palette } from "lucide-react";
 import { DocsLayout, DocsSection, DocsLink } from "./_components/docs";
 import { Metadata } from "next";
 
@@ -7,12 +7,12 @@ const features = [
     icon: Zap,
     title: "Zero Config",
     description:
-      "Works out of the box with free map tiles. No API keys required.",
+      "Works out of the box with free map tiles. No API keys needed.",
   },
   {
     icon: Moon,
     title: "Theme Aware",
-    description: "Automatically adapts to light and dark mode.",
+    description: "Automatically switches between light and dark map styles.",
   },
   {
     icon: Puzzle,
@@ -24,6 +24,16 @@ const features = [
     title: "TypeScript",
     description: "Full type safety with comprehensive TypeScript support.",
   },
+  {
+    icon: Box,
+    title: "Copy & Paste",
+    description: "Own your code. No dependencies, just copy into your project.",
+  },
+  {
+    icon: Palette,
+    title: "Customizable",
+    description: "Styled with Tailwind. Easy to customize and extend.",
+  },
 ];
 
 export const metadata: Metadata = {