add: banner ; change: logo

package.json

@@ -18,6 +18,7 @@
     "canvas": "^2.11.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.11.11",
     "lucide-react": "^0.427.0",
     "next": "14.2.5",
     "next-themes": "^0.3.0",

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { Toaster } from "@/components/ui/toaster";
 import "./globals.css";
 import Navbar from "@/components/navbar";
 import { ThemeProvider } from "@/components/theme-provider";
+import StarBanner from "@/components/star-banner";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -27,7 +28,10 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <Navbar />
-          <div className="pt-16">{children}</div>
+          <div className="pt-16">
+            <StarBanner />
+            {children}
+          </div>
           <Toaster />
         </ThemeProvider>
       </body>

src/app/page.tsx

@@ -1,12 +1,11 @@
 "use client";
-import ImageTextForm from '@/components/image-text-form'
-import Navbar from '@/components/navbar';
+import ImageTextForm from "@/components/image-text-form";
 
 export default function Home() {
   return (
-    <main className="p-4 flex flex-col items-center">
+    <main className="mt-8 p-4 flex flex-col items-center">
       <h1 className="text-2xl font-bold mb-4">GSSoC Stats Generator</h1>
       <ImageTextForm />
     </main>
-  )
+  );
 }

src/components/navbar.tsx

@@ -13,10 +13,10 @@ export default function Navbar() {
       >
         <Image
           alt="GSSoC Logo"
-          src="/images/logo.png"
-          width={10}
-          height={10}
-          className="h-12 w-12 text-white"
+          src="/images/gssoc-logo.png"
+          width={130}
+          height={130}
+          className="h-full w-full text-white"
         />
       </Link>
       <div className="ml-auto flex items-center justify-center gap-4">

src/components/star-banner.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import StarRepoButton from "./star-repo-button";
+
+const StarBanner = () => {
+  return (
+    <>
+      <div
+        className={`w-full left-0 right-0 top-0 z-50 transition-all duration-300 ease-in-out`}
+      >
+        <div className="flex w-full items-center justify-center gap-x-6 bg-orange-500 px-6 py-3 sm:px-3.5">
+          <div className="flex flex-col md:flex-row gap-y-4 items-center gap-x-4 text-sm font-medium leading-6 text-white">
+            <p className="font-bold md:text-lg text-center">
+              Generate your GSSoC certificate and support us with a star!
+            </p>
+            <StarRepoButton />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default StarBanner;

src/components/star-repo-button.tsx

@@ -0,0 +1,52 @@
+import { motion } from "framer-motion";
+import { Star } from "lucide-react";
+import Link from "next/link";
+
+const StarRepoButton = () => {
+  return (
+    <motion.button
+      className="inline-flex overflow-hidden rounded-lg bg-[linear-gradient(120deg,#FF7F50_calc(var(--shimmer-button-x)-25%),#f6f6f6_var(--shimmer-button-x),#FF7F50_calc(var(--shimmer-button-x)+25%))] [--shimmer-button-x:0%]"
+      initial={
+        {
+          scale: 1,
+          "--shimmer-button-x": "-100%",
+        } as any
+      }
+      animate={
+        {
+          "--shimmer-button-x": "200%",
+        } as any
+      }
+      transition={{
+        stiffness: 500,
+        damping: 20,
+        type: "spring",
+        "--shimmer-button-x": {
+          duration: 3,
+          repeat: Infinity,
+          ease: [0.445, 0.05, 0.55, 0.95],
+        },
+      }}
+      whileTap={{
+        scale: 0.95,
+      }}
+      whileHover={{
+        scale: 1.05,
+      }}
+    >
+      <span className="m-[0.125rem] rounded-[calc(0.5rem-0.125rem)] bg-gray-500 px-4 py-1 text-xs text-white backdrop-blur-sm">
+        <Link
+          href="https://github.com/Shobhit-Nagpal/gssoc-stats-gen"
+          target="_blank"
+        >
+          <div className="flex items-center justify-center">
+            <Star className="h-5 w-5 mr-2" />
+            <span className="font-bold md:text-base">Star Repo</span>
+          </div>
+        </Link>
+      </span>
+    </motion.button>
+  );
+};
+
+export default StarRepoButton;