[dyad] Enhanced page header design - wrote 1 file(s)

src/app/page.tsx

@@ -1,17 +1,22 @@
 import { Footer } from "@/components/footer";
 import { MetaForm } from "@/components/meta-form";
+import { Tags } from "lucide-react";
 
 export default function Home() {
   return (
     <div className="flex flex-col min-h-screen font-[family-name:var(--font-geist-sans)] bg-background">
       <main className="flex-grow flex items-center justify-center p-4 sm:p-8">
         <div className="flex flex-col gap-8 items-center w-full max-w-6xl">
-          <div className="text-center space-y-2">
-            <h1 className="text-3xl sm:text-4xl font-bold text-foreground">
-              Meta Tag Extractor
-            </h1>
-            <p className="text-muted-foreground">
-              Enter a URL to extract its meta title and description.
+          <div className="text-center space-y-4">
+            <div className="inline-flex items-center justify-center gap-3">
+              <Tags className="h-8 w-8 sm:h-10 sm:w-10 text-primary" />
+              <h1 className="text-3xl sm:text-5xl font-bold text-foreground tracking-tight">
+                Meta Tag Extractor
+              </h1>
+            </div>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              Instantly pull meta titles, descriptions, and preview images from
+              any URL to analyze and optimize your web presence.
             </p>
           </div>
           <MetaForm />