From 5d7585c575923cc91d27d437d69b77d38776e477 Mon Sep 17 00:00:00 2001
From: ikramBagban <107988060+IkramBagban@users.noreply.github.com>
Date: Thu, 27 Feb 2025 20:54:03 +0530
Subject: [PATCH] design: update style of footer and appbar. and minimal but
 cool transition & animations

---
 apps/web/components/Appbar.tsx | 217 ++++++++++++++++------------
 apps/web/components/Footer.tsx | 252 +++++++++++++++------------------
 2 files changed, 244 insertions(+), 225 deletions(-)

diff --git a/apps/web/components/Appbar.tsx b/apps/web/components/Appbar.tsx
index 0da92c93..1ab952d2 100644
--- a/apps/web/components/Appbar.tsx
+++ b/apps/web/components/Appbar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
 import { Button } from "./ui/button";
 import { Credits } from "./navbar/Credits";
@@ -7,105 +8,141 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 
 export function Appbar() {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 0) {
+        setIsScrolled(true);
+      } else {
+        setIsScrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
-    <div className="bg-black">
-      <motion.header
-        initial={{ y: -20, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.5, ease: "easeOut" }}
-        className="fixed top-0 z-50 w-full p-2"
+    <motion.header
+      initial={{ y: -20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+      className="fixed top-0 z-50 w-full p-2"
+    >
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+        className={`mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 backdrop-blur-xl rounded-2xl transition-all duration-300 ${
+          isScrolled
+            ? "bg-white/80 border border-neutral-200 shadow-lg dark:bg-neutral-900/80 dark:border-neutral-800"
+            : "bg-transparent border-transparent"
+        }`}
       >
-        <motion.div
-          initial={{ opacity: 0, scale: 0.95 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.4, ease: "easeOut" }}
-          className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 backdrop-blur-xl rounded-2xl bg-background/50 border border-neutral-200 dark:border-neutral-700 shadow-lg"
-        >
-          <div className="flex h-16 items-center justify-between">
-            {/* Logo */}
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-              <Link
-                href="/"
-                className="flex items-center space-x-2 transition-opacity hover:opacity-90"
+        <div className="flex h-16 items-center justify-between">
+          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+            <Link
+              href="/"
+              className="flex items-center space-x-2 transition-opacity hover:opacity-90"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-6 w-6"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="h-6 w-6"
-                >
-                  <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
-                </svg>
-                <span className="hidden font-bold font-mono text-xl sm:inline-block">
-                  100xPhoto
-                </span>
-              </Link>
-            </motion.div>
+                <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+              </svg>
+              <span
+                className={`hidden font-bold font-mono text-xl sm:inline-block ${
+                  isScrolled
+                    ? "text-neutral-900 dark:text-neutral-100"
+                    : "text-neutral-900 dark:text-neutral-100"
+                }`}
+              >
+                100xPhoto
+              </span>
+            </Link>
+          </motion.div>
 
-            {/* Auth & Pricing */}
-            <div className="flex items-center gap-4">
-              <SignedIn>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition"
-                  asChild
-                >
-                  <Link href="/dashboard">Dashboard</Link>
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition"
-                  asChild
-                >
-                  <Link href="/purchases">My Purchases</Link>
-                </Button>
-                <Credits />
-                <UserButton
-                  afterSignOutUrl="/"
-                  appearance={{
-                    elements: {
-                      avatarBox:
-                        "h-8 w-8 rounded-full ring-2 ring-primary/10 transition-all hover:ring-primary/30",
-                      userButtonPopover: "right-0 mt-2",
-                    },
-                  }}
-                />
-              </SignedIn>
-              <SignedOut>
+          {/* Auth & Pricing */}
+          <div className="flex items-center gap-4">
+            <SignedIn>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={`${
+                  isScrolled
+                    ? "text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
+                    : "text-neutral-700 hover:bg-neutral-100/50 dark:text-neutral-300 dark:hover:bg-neutral-800/30"
+                } transition`}
+                asChild
+              >
+                <Link href="/dashboard">Dashboard</Link>
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={`${
+                  isScrolled
+                    ? "text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
+                    : "text-neutral-700 hover:bg-neutral-100/50 dark:text-neutral-300 dark:hover:bg-neutral-800/30"
+                } transition`}
+                asChild
+              >
+                <Link href="/purchases">My Purchases</Link>
+              </Button>
+              <Credits />
+              <UserButton
+                afterSignOutUrl="/"
+                appearance={{
+                  elements: {
+                    avatarBox:
+                      "h-8 w-8 rounded-full ring-2 ring-primary/10 transition-all hover:ring-primary/30",
+                    userButtonPopover: "right-0 mt-2",
+                  },
+                }}
+              />
+            </SignedIn>
+            <SignedOut>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={`${
+                  isScrolled
+                    ? "text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
+                    : "text-neutral-700 hover:bg-neutral-100/50 dark:text-neutral-300 dark:hover:bg-neutral-800/30"
+                } transition`}
+                asChild
+              >
+                <Link href="/pricing">Pricing</Link>
+              </Button>
+              <motion.div
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
                 <Button
-                  variant="ghost"
+                  variant="default"
                   size="sm"
-                  className="dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition"
+                  className={`relative overflow-hidden bg-gradient-to-r from-neutral-800 to-neutral-900 text-white dark:from-neutral-700 dark:to-neutral-800 border ${
+                    isScrolled ? "border-neutral-300" : "border-neutral-700/50"
+                  } rounded-lg shadow-md shadow-neutral-800/20 dark:shadow-black/30 px-4 py-2 font-medium tracking-wide transition-all duration-300 ease-in-out hover:shadow-lg hover:scale-[1.02]`}
                   asChild
                 >
-                  <Link href="/pricing">Pricing</Link>
+                  <SignInButton mode="modal">
+                    <span>Sign In</span>
+                  </SignInButton>
                 </Button>
-                <motion.div
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                >
-                  <Button
-                    variant="default"
-                    size="sm"
-                    className="relative overflow-hidden bg-gradient-to-r from-neutral-800 to-neutral-900 text-white dark:from-neutral-700 dark:to-neutral-800 border border-neutral-600 dark:border-neutral-700 rounded-lg shadow-md shadow-neutral-800/20 dark:shadow-black/30 px-4 py-2 font-medium tracking-wide transition-all duration-300 ease-in-out hover:shadow-lg hover:scale-[1.02] hover:from-neutral-700 hover:to-neutral-900 dark:hover:from-neutral-600 dark:hover:to-neutral-750"
-                    asChild
-                  >
-                    <SignInButton mode="modal">
-                      <span>Sign In</span>
-                    </SignInButton>
-                  </Button>
-                </motion.div>
-              </SignedOut>
-            </div>
+              </motion.div>
+            </SignedOut>
           </div>
-        </motion.div>
-      </motion.header>
-    </div>
+        </div>
+      </motion.div>
+    </motion.header>
   );
 }
diff --git a/apps/web/components/Footer.tsx b/apps/web/components/Footer.tsx
index 06a5f209..d26977cf 100644
--- a/apps/web/components/Footer.tsx
+++ b/apps/web/components/Footer.tsx
@@ -3,12 +3,12 @@ import { Button } from "./ui/button";
 
 export function Footer() {
   return (
-    <footer className="w-full border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="mx-auto max-w-screen-xl px-4 pb-8 pt-16 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+    <footer className="w-full border-t border-border/30 bg-background/95 backdrop-blur-md transition-all duration-500 ease-in-out">
+      <div className="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 pt-16 pb-8">
+        <div className="grid grid-cols-1 gap-12 sm:gap-8 lg:grid-cols-3">
           {/* Brand Section */}
-          <div>
-            <div className="flex items-center space-x-2">
+          <div className="flex flex-col space-y-6 transform transition-all duration-700 ease-out animate-in slide-in-from-bottom-10">
+            <div className="group flex items-center space-x-3">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -17,157 +17,139 @@ export function Footer() {
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                className="h-6 w-6"
+                className="h-6 w-6 text-primary transition-transform duration-300 group-hover:rotate-12 group-hover:scale-110"
               >
                 <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
               </svg>
-              <span className="font-bold font-mono text-xl">100xPhoto</span>
+              <span className="font-bold font-mono text-xl bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent transition-all duration-300 group-hover:tracking-wide">
+                100xPhoto
+              </span>
             </div>
 
-            <p className="mt-4 max-w-sm text-muted-foreground">
-              Transform your photos with AI-powered editing tools. Create
-              stunning visuals with just a few clicks.
+            <p className="max-w-xs text-sm text-muted-foreground leading-relaxed transition-opacity duration-500 hover:opacity-80">
+              Transform your photos with AI-powered editing tools. Create stunning visuals with just a few clicks.
             </p>
 
-            <div className="mt-6 flex gap-4">
-              <Button variant="ghost" size="icon" asChild>
-                <Link
-                  href="https://x.com/100xdevs"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
-                  </svg>
-                  <span className="sr-only">Twitter</span>
-                </Link>
-              </Button>
-              <Button variant="ghost" size="icon" asChild>
-                <Link
-                  href="https://github.com/code100x/photo-ai"
-                  target="_blank"
-                  rel="noopener noreferrer"
+            <div className="flex gap-4">
+              {[
+                {
+                  href: "https://x.com/100xdevs",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
+                    </svg>
+                  ),
+                  label: "Twitter",
+                },
+                {
+                  href: "https://github.com/code100x/photo-ai",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+                    </svg>
+                  ),
+                  label: "GitHub",
+                },
+              ].map((social, index) => (
+                <Button
+                  key={index}
+                  variant="ghost"
+                  size="icon"
+                  className="relative rounded-full p-2 overflow-hidden transition-all duration-300 ease-in-out hover:bg-primary/10 hover:scale-110 group"
+                  asChild
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
-                  </svg>
-                  <span className="sr-only">GitHub</span>
-                </Link>
-              </Button>
+                  <Link href={social.href} target="_blank" rel="noopener noreferrer">
+                    <span className="absolute inset-0 bg-gradient-to-r from-primary/0 via-primary/20 to-primary/0 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-center" />
+                    {social.icon}
+                    <span className="sr-only">{social.label}</span>
+                  </Link>
+                </Button>
+              ))}
             </div>
           </div>
 
           {/* Quick Links */}
           <div className="grid grid-cols-2 gap-8 lg:col-span-2">
-            <div className="space-y-4">
-              <p className="font-medium">Company</p>
-              <nav className="flex flex-col space-y-2">
-                <Link
-                  href="/"
-                  className="text-sm text-muted-foreground hover:text-foreground"
-                >
-                  About
-                </Link>
-                <Link
-                  href="/"
-                  className="text-sm text-muted-foreground hover:text-foreground"
-                >
-                  Pricing
-                </Link>
-                <Link
-                  href="/"
-                  className="text-sm text-muted-foreground hover:text-foreground"
-                >
-                  Blog
-                </Link>
-                <Link
-                  href="/"
-                  className="text-sm text-muted-foreground hover:text-foreground"
-                >
-                  Careers
-                </Link>
-              </nav>
-            </div>
-
-            <div className="space-y-4">
-              <p className="font-medium">Help</p>
-              <nav className="flex flex-col space-y-2">
-                <Link
-                  href="/"
-                  className="text-sm text-muted-foreground hover:text-foreground"
-                >
-                  FAQ
-                </Link>
-                <Link
-                  href="/"
-                  className="text-sm text-muted-foreground hover:text-foreground"
-                >
-                  Contact
-                </Link>
-                <Link
-                  href="/"
-                  className="text-sm text-muted-foreground hover:text-foreground"
-                >
-                  Privacy
-                </Link>
-                <Link
-                  href="/"
-                  className="text-sm text-muted-foreground hover:text-foreground"
-                >
-                  Terms
-                </Link>
-              </nav>
-            </div>
+            {[
+              {
+                title: "Company",
+                links: ["About", "Pricing", "Blog", "Careers"],
+              },
+              {
+                title: "Help",
+                links: ["FAQ", "Contact", "Privacy", "Terms"],
+              },
+            ].map((section, index) => (
+              <div
+                key={index}
+                className="space-y-5 transform transition-all duration-700 ease-out animate-in slide-in-from-bottom-10"
+                style={{ animationDelay: `${index * 100}ms` }}
+              >
+                <p className="font-medium text-foreground uppercase text-sm tracking-wider transition-colors duration-300 hover:text-primary">
+                  {section.title}
+                </p>
+                <nav className="flex flex-col space-y-3">
+                  {section.links.map((link, linkIndex) => (
+                    <Link
+                      key={linkIndex}
+                      href="/"
+                      className="relative text-sm text-muted-foreground group overflow-hidden transition-all duration-300 ease-in-out hover:text-foreground"
+                    >
+                      <span className="relative z-10">{link}</span>
+                      <span className="absolute inset-x-0 bottom-0 h-[2px] w-[2rem] bg-gradient-to-r from-primary/0 via-primary to-primary/0 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out" />
+                    </Link>
+                  ))}
+                </nav>
+              </div>
+            ))}
           </div>
         </div>
 
-        <div className="mt-12 border-t pt-8">
-          <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
-            <p className="text-xs text-muted-foreground">
-              &copy; {new Date().getFullYear()} PhotoAI. All rights reserved.
+        {/* Bottom Section */}
+        <div className="mt-12 pt-8 border-t border-border/30 transform transition-all duration-700 ease-out animate-in slide-in-from-bottom-10">
+          <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
+            <p className="text-xs text-muted-foreground tracking-wide transition-opacity duration-300 hover:opacity-75">
+              © {new Date().getFullYear()} PhotoAI. All rights reserved.
             </p>
-
-            <div className="flex gap-4">
-              <Button variant="ghost" size="sm" asChild>
-                <Link
-                  href="/"
-                  className="text-xs text-muted-foreground hover:text-foreground"
-                >
-                  Privacy Policy
-                </Link>
-              </Button>
-              <Button variant="ghost" size="sm" asChild>
-                <Link
-                  href="/"
-                  className="text-xs text-muted-foreground hover:text-foreground"
+            <div className="flex gap-6">
+              {["Privacy Policy", "Terms of Service"].map((item, index) => (
+                <Button
+                  key={index}
+                  variant="ghost"
+                  size="sm"
+                  className="relative text-xs text-muted-foreground transition-all duration-300 ease-in-out hover:text-foreground hover:bg-transparent group"
+                  asChild
                 >
-                  Terms of Service
-                </Link>
-              </Button>
+                  <Link href="/">
+                    <span className="relative z-10">{item}</span>
+                    <span className="absolute inset-x-0 bottom-0 h-[1px] bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-center" />
+                  </Link>
+                </Button>
+              ))}
             </div>
           </div>
         </div>
       </div>
     </footer>
   );
-}
+}
\ No newline at end of file