From 71cd410a2a74b632da21af83f62fda50a8821fb3 Mon Sep 17 00:00:00 2001
From: yashksaini-coder <ys3853428@gmail.com>
Date: Sat, 11 Jan 2025 15:41:18 +0530
Subject: [PATCH 1/3] feat: add RainbowButton component with dynamic color
 gradients

---
 app/globals.css                  | 10 ++++++++++
 components/ui/rainbow-button.tsx | 33 ++++++++++++++++++++++++++++++++
 tailwind.config.ts               | 18 +++++++++++++++--
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 components/ui/rainbow-button.tsx

diff --git a/app/globals.css b/app/globals.css
index 83a3314..2ea59e0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -37,6 +37,11 @@
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --color-1: 0 100% 63%;
+    --color-2: 270 100% 63%;
+    --color-3: 210 100% 63%;
+    --color-4: 195 100% 63%;
+    --color-5: 90 100% 63%;
   }
 
   .dark {
@@ -72,6 +77,11 @@
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --color-1: 0 100% 63%;
+    --color-2: 270 100% 63%;
+    --color-3: 210 100% 63%;
+    --color-4: 195 100% 63%;
+    --color-5: 90 100% 63%;
   }
 }
  
diff --git a/components/ui/rainbow-button.tsx b/components/ui/rainbow-button.tsx
new file mode 100644
index 0000000..a1f6671
--- /dev/null
+++ b/components/ui/rainbow-button.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+interface RainbowButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export function RainbowButton({
+  children,
+  className,
+  ...props
+}: RainbowButtonProps) {
+  return (
+    <button
+      className={cn(
+        "group relative inline-flex h-11 animate-rainbow cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium text-primary-foreground transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+
+        // before styles
+        "before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))]",
+
+        // light mode colors
+        "bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
+
+        // dark mode colors
+        "dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
+
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9828a30..cffd6a0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -49,7 +49,12 @@ export default {
   				'3': 'hsl(var(--chart-3))',
   				'4': 'hsl(var(--chart-4))',
   				'5': 'hsl(var(--chart-5))'
-  			}
+  			},
+  			'color-1': 'hsl(var(--color-1))',
+  			'color-2': 'hsl(var(--color-2))',
+  			'color-3': 'hsl(var(--color-3))',
+  			'color-4': 'hsl(var(--color-4))',
+  			'color-5': 'hsl(var(--color-5))'
   		},
   		borderRadius: {
   			lg: 'var(--radius)',
@@ -85,12 +90,21 @@ export default {
   					transform: 'rotate(215deg) translateX(-500px)',
   					opacity: '0'
   				}
+  			},
+  			rainbow: {
+  				'0%': {
+  					'background-position': '0%'
+  				},
+  				'100%': {
+  					'background-position': '200%'
+  				}
   			}
   		},
   		animation: {
   			'accordion-down': 'accordion-down 0.2s ease-out',
   			'accordion-up': 'accordion-up 0.2s ease-out',
-  			meteor: 'meteor 5s linear infinite'
+  			meteor: 'meteor 5s linear infinite',
+  			rainbow: 'rainbow var(--speed, 2s) infinite linear'
   		}
   	}
   },

From ad720ccfbd500bde1a0e172aea28d54e17fd252f Mon Sep 17 00:00:00 2001
From: yashksaini-coder <ys3853428@gmail.com>
Date: Sat, 11 Jan 2025 15:41:20 +0530
Subject: [PATCH 2/3] Add Rainbow button

---
 app/FAQ/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/FAQ/page.tsx b/app/FAQ/page.tsx
index 5e8ad1d..15fba4e 100644
--- a/app/FAQ/page.tsx
+++ b/app/FAQ/page.tsx
@@ -52,7 +52,7 @@ export default function FAQPage() {
               <SocialLinks />
             </div>
           </div>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
+          {/* <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
             <div>
               <h3 className="font-semibold mb-3 text-lg">Product</h3>
               <ul className="space-y-2">
@@ -174,7 +174,7 @@ export default function FAQPage() {
             <p className="text-sm text-muted-foreground mb-4 md:mb-0">
               © 2023 LeetCode Journal. All rights reserved.
             </p>
-          </div>
+          </div> */}
         </div>
       </footer>
     </div>

From 520b83908c8e02f7d50487f9180941775cbc8fc7 Mon Sep 17 00:00:00 2001
From: yashksaini-coder <ys3853428@gmail.com>
Date: Sat, 11 Jan 2025 18:16:29 +0530
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20UI=20Enhancement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/FAQ/page.tsx               | 157 +--------------------------
 app/learn-more/page.tsx        | 192 +++------------------------------
 app/page.tsx                   | 167 +---------------------------
 components/footer.tsx          |  46 ++++++++
 components/navbar.tsx          |   5 +-
 components/ui/shiny-button.tsx |  73 +++++++++++++
 package-lock.json              |  54 +++++++---
 package.json                   |   1 +
 8 files changed, 182 insertions(+), 513 deletions(-)
 create mode 100644 components/footer.tsx
 create mode 100644 components/ui/shiny-button.tsx

diff --git a/app/FAQ/page.tsx b/app/FAQ/page.tsx
index 15fba4e..362bd42 100644
--- a/app/FAQ/page.tsx
+++ b/app/FAQ/page.tsx
@@ -2,10 +2,7 @@ import { Metadata } from 'next'
 import FAQComponent from './component/faq-component'
 import ContactSection from './component/contact-section'
 import Navbar1 from '@/components/navbar'
-import { Github, BookOpen } from 'lucide-react'
-import {Button} from '@/components/ui/button'
-import { SocialLinks } from '@/components/SocialLinks'
-import Link from 'next/link'
+import Footer from '@/components/footer'
 
 export const metadata: Metadata = {
   title: 'FAQ - Your Company Name',
@@ -26,157 +23,7 @@ export default function FAQPage() {
           <ContactSection />
         </div>
       </div>
-      <footer className="w-full py-12 px-4 md:px-6 border-t bg-secondary">
-        <div className="container mx-auto">
-          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
-            <div className="flex items-center space-x-4 mb-4 md:mb-0">
-              <BookOpen className="h-6 w-6 text-primary" />
-              <span className="font-bold text-lg">LeetCode Journal</span>
-            </div>
-            <div className="flex items-center space-x-4 -ml-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="hidden md:flex"
-                asChild
-              >
-                <a
-                  href="https://github.com/yashksaini-coder/leetcode-journal"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Github className="mr-2 h-4 w-4" />
-                  Star on GitHub
-                </a>
-              </Button>
-              <SocialLinks />
-            </div>
-          </div>
-          {/* <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Product</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#features"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Features
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#pricing"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Pricing
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    FAQ
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Company</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    About
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Blog
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Careers
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Resources</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Documentation
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Community
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Support
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Legal</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Privacy Policy
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Terms of Service
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Cookie Policy
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-border">
-            <p className="text-sm text-muted-foreground mb-4 md:mb-0">
-              © 2023 LeetCode Journal. All rights reserved.
-            </p>
-          </div> */}
-        </div>
-      </footer>
+      <Footer />
     </div>
   )
 }
diff --git a/app/learn-more/page.tsx b/app/learn-more/page.tsx
index 200e794..5937662 100644
--- a/app/learn-more/page.tsx
+++ b/app/learn-more/page.tsx
@@ -2,42 +2,25 @@
 
 import Link from 'next/link'
 import { motion } from 'framer-motion'
-import { Button } from "@/components/ui/button"
 import { TabContainer } from './components/TabContainer'
 import Navbar1 from '@/components/navbar'
-import {SocialLinks} from '@/components/SocialLinks'
-import { BookOpen, Github } from 'lucide-react'
+import Footer from '@/components/footer'
+import ShinyButton from '@/components/ui/shiny-button'
 
 export default function LearnMorePage() {
   return (
     <div className="">
       <Navbar1 />
-      <div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-purple-100 dark:from-gray-900 dark:via-gray-800 dark:to-purple-900 bg-texture">
-        <div className="container mx-auto px-4 py-16">
+      <div className="min-h-screen bg-grey-500 bg-texture">
+        <div className="container mx-auto px-32 py-16">
           <motion.h1 
-            className="text-5xl font-bold text-center mb-8 text-purple-800 dark:text-purple-300"
+            className="text-5xl font-bold text-center mb-8 text-white-800 dark:text-grey-300"
             initial={{ y: -20, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ duration: 0.5 }}
           >
             Discover LeetCode Journal
           </motion.h1>
-          
-          <motion.div 
-            className="max-w-3xl mx-auto mb-16"
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ delay: 0.2, duration: 0.5 }}
-          >
-            <p className="text-xl text-center mb-8 text-purple-700 dark:text-purple-200">
-              Elevate your coding practice and ace technical interviews with LeetCode Journal - your ultimate companion for mastering coding challenges.
-            </p>
-            <div className="flex justify-center">
-              <Button asChild size="lg" className="bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white dark:from-purple-500 dark:to-purple-600 dark:hover:from-purple-600 dark:hover:to-purple-700">
-                <Link href="/signup">Start Your Coding Journey</Link>
-              </Button>
-            </div>
-          </motion.div>
 
           <TabContainer />
 
@@ -47,165 +30,18 @@ export default function LearnMorePage() {
             animate={{ y: 0, opacity: 1 }}
             transition={{ delay: 0.4, duration: 0.5 }}
           >
-            <h2 className="text-3xl font-bold mb-4 text-purple-800 dark:text-purple-300">Ready to Elevate Your Coding Journey?</h2>
-            <p className="text-xl mb-8 text-purple-700 dark:text-purple-200">Join thousands of developers who have transformed their LeetCode experience with LeetCode Journal.</p>
-            <Button asChild size="lg" className="bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white dark:from-purple-500 dark:to-purple-600 dark:hover:from-purple-600 dark:hover:to-purple-700">
-              <Link href="/signup">Start Your Free Trial</Link>
-            </Button>
+            <h2 className="text-3xl font-bold mb-4 text-grey-800 dark:text-grey-300">Want to Contribute ?</h2>
+            <p className="text-xl mb-8 text-grey-700 dark:text-grey-200">Join hundreds of developers who have contributed to making LeetCode Journal better for everyone.</p>
+            <ShinyButton>
+              <Link
+                href='https://github.com/yashksaini-coder/Leetcode-Journal'
+                target='_blank'
+              >Contribute Now</Link>
+              </ShinyButton>
           </motion.div>
         </div>
       </div>
-      <footer className="w-full py-12 px-4 md:px-6 border-t bg-secondary">
-        <div className="container mx-auto">
-          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
-            <div className="flex items-center space-x-4 mb-4 md:mb-0">
-              <BookOpen className="h-6 w-6 text-primary" />
-              <span className="font-bold text-lg">LeetCode Journal</span>
-            </div>
-            <div className="flex items-center space-x-4 -ml-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="hidden md:flex"
-                asChild
-              >
-                <a
-                  href="https://github.com/yashksaini-coder/leetcode-journal"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Github className="mr-2 h-4 w-4" />
-                  Star on GitHub
-                </a>
-              </Button>
-              <SocialLinks />
-            </div>
-          </div>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Product</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#features"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Features
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#pricing"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Pricing
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    FAQ
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Company</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    About
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Blog
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Careers
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Resources</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Documentation
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Community
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Support
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Legal</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Privacy Policy
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Terms of Service
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Cookie Policy
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-border">
-            <p className="text-sm text-muted-foreground mb-4 md:mb-0">
-              © 2023 LeetCode Journal. All rights reserved.
-            </p>
-          </div>
-        </div>
-      </footer>
+      <Footer/>
     </div>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
index afb2f73..07652b2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -10,22 +10,12 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { BookOpen, Github } from "lucide-react";
-import { SocialLinks } from "@/components/SocialLinks";
 import { Highlight } from "@/components/ui/hero-hihglight";
 import PricingCard from "@/components/LandingComponents/PriceCard";
 import Navbar1 from "@/components/navbar";
-import { useEffect, useState } from "react";
+import Footer from "@/components/footer";
 
 export default function LandingPage() {
-  const [currentYear, setCurrentYear] = useState<number>(
-    new Date().getFullYear()
-  );
-
-  useEffect(() => {
-    // Set the current year dynamically on mount
-    setCurrentYear(new Date().getFullYear());
-  }, []);
   return (
     <div className="flex flex-col min-h-screen bg-background">
       <Navbar1 />
@@ -232,160 +222,7 @@ export default function LandingPage() {
           </div>
         </section>
       </main>
-      <footer className="w-full pt-8 pb-4 px-4 md:px-6 border-t bg-secondary">
-        {/* <-- Changed pt-12 into pt-8 and pb-4 to reduce unnecessary padding */}
-
-        <div className="container mx-auto">
-          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
-            <div className="flex items-center space-x-4 mb-4 md:mb-0">
-              <BookOpen className="h-6 w-6 text-primary" />
-              <span className="font-bold text-lg">LeetCode Journal</span>
-            </div>
-            <div className="flex items-center space-x-4 -ml-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="hidden md:flex"
-                asChild
-              >
-                <a
-                  href="https://github.com/yashksaini-coder/leetcode-journal"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Github className="mr-2 h-4 w-4" />
-                  Star on GitHub
-                </a>
-              </Button>
-              <SocialLinks />
-            </div>
-          </div>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Product</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#features"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Features
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#pricing"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Pricing
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    FAQ
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Company</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    About
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Blog
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Careers
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Resources</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Documentation
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Community
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Support
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3 text-lg">Legal</h3>
-              <ul className="space-y-2">
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Privacy Policy
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Terms of Service
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="text-sm hover:text-primary transition-colors"
-                  >
-                    Cookie Policy
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="flex flex-col md:flex-row justify-center items-center pt-8 border-t border-border">
-            {/* <-- Changed justify-between into justify-center to center the copyright statement*/}
-            <p className="text-sm text-muted-foreground mb-4 md:mb-0">
-              © {currentYear} LeetCode Journal. All rights reserved.
-            </p>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..50816db
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { RainbowButton } from "@/components/ui/rainbow-button";
+import { SocialLinks } from "@/components/SocialLinks";
+import { BookOpen, Github } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export default function Footer() {
+    const [currentYear, setCurrentYear] = useState<number>(new Date().getFullYear());
+
+    useEffect(() => {
+        setCurrentYear(new Date().getFullYear());
+    }, []);
+
+    return (
+        <footer className="w-full pt-8 pb-4 px-4 md:px-6 border-t bg-secondary">
+            <div className="container mx-auto">
+                <div className="flex flex-col md:flex-row justify-between items-center mb-8">
+                    <div className="flex items-center space-x-4 mb-4 md:mb-0">
+                        <BookOpen className="h-6 w-6 text-primary" />
+                        <span className="font-bold text-lg">LeetCode Journal</span>
+                    </div>
+                    <div className="flex items-center space-x-4 -ml-2">
+                        <RainbowButton className="hidden md:inline-flex items-center space-x-2">
+                            <a
+                                href="https://github.com/yashksaini-coder/leetcode-journal"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center"
+                            >
+                                <Github className="mr-2 h-4 w-4" />
+                                <span>Star on GitHub</span>
+                            </a>
+                        </RainbowButton>
+                        <SocialLinks />
+                    </div>
+                </div>
+                <div className="flex flex-col md:flex-row justify-center items-center pt-8 border-t border-border">
+                    <p className="text-sm text-muted-foreground mb-4 md:mb-0">
+                        © {currentYear} LeetCode Journal. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </footer>
+    );
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 521826d..ed3a340 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -9,10 +9,10 @@ import { Menu, X } from 'lucide-react'
 
 const navItems = [
   { href: "/", label: "Home" },
-  { href: "#features", label: "Features" },
+  // { href: "features", label: "Features" },
   { href: "/learn-more", label: "How it Works" },
   { href: "/FAQ", label: "FAQs" },
-  { href: "/blog", label: "Blog" },
+  // { href: "/blog", label: "Blog" },
 ]
 
 const Navbar1 = () => {
@@ -95,6 +95,5 @@ const Navbar1 = () => {
     </header>
   )
 }
-
 export default Navbar1
 
diff --git a/components/ui/shiny-button.tsx b/components/ui/shiny-button.tsx
new file mode 100644
index 0000000..bd8455f
--- /dev/null
+++ b/components/ui/shiny-button.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+import {
+  motion,
+  type AnimationProps,
+  type HTMLMotionProps,
+} from "motion/react";
+import { cn } from "@/lib/utils";
+
+const animationProps = {
+  initial: { "--x": "100%", scale: 0.8 },
+  animate: { "--x": "-100%", scale: 1 },
+  whileTap: { scale: 0.95 },
+  transition: {
+    repeat: Infinity,
+    repeatType: "loop",
+    repeatDelay: 1,
+    type: "spring",
+    stiffness: 20,
+    damping: 15,
+    mass: 2,
+    scale: {
+      type: "spring",
+      stiffness: 200,
+      damping: 5,
+      mass: 0.5,
+    },
+  },
+} as AnimationProps;
+
+interface ShinyButtonProps extends HTMLMotionProps<"button"> {
+  children: React.ReactNode;
+  className?: string;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+const ShinyButton = React.forwardRef<HTMLButtonElement, ShinyButtonProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <motion.button
+        ref={ref}
+        {...animationProps}
+        {...props}
+        className={cn(
+          "relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]",
+          className,
+        )}
+      >
+        <span
+          className="relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]"
+          style={{
+            maskImage:
+              "linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))",
+          }}
+        >
+          {children}
+        </span>
+        <span
+          style={{
+            mask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
+            maskComposite: "exclude",
+          }}
+          className="absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px"
+        ></span>
+      </motion.button>
+    );
+  },
+);
+
+ShinyButton.displayName = "ShinyButton";
+
+export default ShinyButton;
diff --git a/package-lock.json b/package-lock.json
index 72801a3..bd49acb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "embla-carousel-react": "^8.5.1",
         "framer-motion": "^11.15.0",
         "lucide-react": "^0.469.0",
+        "motion": "^11.17.0",
         "next": "15.1.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -3949,13 +3950,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.15.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz",
-      "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
+      "version": "11.17.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.17.0.tgz",
+      "integrity": "sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^11.14.3",
-        "motion-utils": "^11.14.3",
+        "motion-dom": "^11.16.4",
+        "motion-utils": "^11.16.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -5090,16 +5091,45 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion": {
+      "version": "11.17.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.17.0.tgz",
+      "integrity": "sha512-mWZhIOWH2slNXPUWhr6cEu98bl9NMX7u9r7vdNI+Bm3/jrOEa3e44GmyUuwXr9hWR+rWII27YTnKb6CDD1vU2g==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^11.17.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/motion-dom": {
-      "version": "11.14.3",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
-      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==",
-      "license": "MIT"
+      "version": "11.16.4",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz",
+      "integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^11.16.0"
+      }
     },
     "node_modules/motion-utils": {
-      "version": "11.14.3",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
-      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==",
+      "version": "11.16.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz",
+      "integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==",
       "license": "MIT"
     },
     "node_modules/ms": {
diff --git a/package.json b/package.json
index 2324d94..5a773fc 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "embla-carousel-react": "^8.5.1",
     "framer-motion": "^11.15.0",
     "lucide-react": "^0.469.0",
+    "motion": "^11.17.0",
     "next": "15.1.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",