Merge pull request #12 from Eric-Zhang-Developer/feature/beautify-front-end

Feature/beautify front end

Author: Eric-Zhang-Developer

package-lock.json

@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "lucide-react": "^0.515.0",
     "next": "15.2.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package.json

@@ -5,12 +5,6 @@
   --foreground: #171717;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
 
 
 body {

src/app/globals.css

@@ -1,6 +1,13 @@
 import "./globals.css";
 
 
+export const metadata = {
+  title: "Follower Diff - See Who Doesn't Follow You Back",
+  description:
+    "Safely see your Instagram non-followers using your official Instagram data. Your files are processed right in your browser and never uploaded anywhere.",
+}
+
+
 export default function RootLayout({
   children,
 }: Readonly<{

src/app/layout.tsx

@@ -1,27 +1,40 @@
-"use client"
+"use client";
 
+import { Github, Upload } from "lucide-react";
 import Link from "next/link";
 
-
 export default function Home() {
   return (
-    <div className="mx-auto container p-2">
-      <header className="text-3xl text-center mb-8">FollowDiff</header>
-      <main className="flex items-center justify-center flex-col gap-4">
-        <h1 className="text-2xl">Curious Who Doesn&apos;t Follow You Back?</h1>
-        <h2 className="text-xl text-center">Safely see your non-followers using your official Instagram data. Your files are processed right here in your browser and are never uploaded anywhere.</h2>
+    <div className="mx-auto container p-10">
+      <main className="flex items-center justify-center flex-col gap-4 px-12">
+        <h1 className="text-5xl">Curious Who Doesn&apos;t Follow You Back?</h1>
+        <h2 className="text-xl text-center">
+          Safely see your non-followers using your official Instagram data. Your files are processed
+          right here in your browser and are never uploaded anywhere.
+        </h2>
+
         {/* Drop Zone */}
-        <div className="border-2 px-1/2 py-40 flex flex-col gap-8 items-center justify-center w-1/2">
+        <div className="border-2 px-1/2 py-30 flex flex-col gap-8 items-center justify-center w-1/2 border-dashed rounded-3xl mt-12 text-lg hover:cursor-pointer">
+          <Upload size={50}></Upload>
           Drag & drop your followers.json & following.json files here
           <span>or</span>
-          <button className="border-1 p-2">Select Files</button>
+          <button className="border-1 px-4 py-2 text-lg rounded-xl hover:cursor-pointer transition hover:scale-105">Select Files</button>
         </div>
-        <Link href="/tutorial" className="underline"> Don&apos;t have your files? Here&apos;s how to get them.</Link>
+
+        <Link href="/tutorial" className="underline">
+          {" "}
+          Don&apos;t have your files? Here&apos;s how to get them.
+        </Link>
       </main>
-      <footer className="fixed bottom-0 right-0 p-4">
-        Open Source & Privacy-First 
-      </footer>
+
+      <a
+        href="https://github.com/Eric-Zhang-Developer/follow-diff"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="fixed bottom-0 right-0 p-5 flex flex-row gap-2 hover:scale-110 transition"
+      >
+        Open Source & Privacy-First <Github></Github>
+      </a>
     </div>
   );
 }
-