update github badge

Author: chenxin-yan

apps/web/package.json

@@ -36,6 +36,7 @@
     "cmdk": "^1.1.1",
     "convex": "^1.29.0",
     "date-fns": "^4.1.0",
+    "framer-motion": "^12.23.24",
     "lucide-react": "^0.553.0",
     "next": "16.0.1",
     "next-themes": "^0.4.6",

apps/web/src/app/(landing)/page.tsx

@@ -1,5 +1,5 @@
 import { auth } from "@clerk/nextjs/server";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, ChevronRight, Sparkles } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
@@ -10,6 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import HeroBadge from "@/components/ui/hero-badge";
 
 export default async function Home() {
   const { userId } = await auth();
@@ -21,13 +22,16 @@ export default async function Home() {
   return (
     <div className="min-h-screen bg-background">
       {/* Hero Section */}
-      <section className="max-w-6xl mx-auto px-4 py-32 sm:py-32 w-full bg-background">
+      <section className="max-w-6xl mx-auto px-4 py-28 w-full bg-background">
         <div className="text-center space-y-8">
-          {/* <Badge variant="outline" className="mx-auto">
-            Albert Plus
-          </Badge> */}
+          <HeroBadge
+            href="https://github.com/TechAtNYU/AlbertPlus"
+            text="Open source on GitHub"
+            icon={<Sparkles className="h-4 w-4" />}
+            endIcon={<ChevronRight className="h-4 w-4" />}
+          />
 
-          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-foreground mt-10">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-foreground mt-6">
             Plan better. Track easier. <br />
             Graduate smarter.
           </h1>
@@ -47,10 +51,6 @@ export default async function Home() {
                 <ArrowRight className="w-4 h-4" />
               </Link>
             </Button>
-
-            <Button asChild variant="outline" size="lg">
-              <Link href="https://github.com/TechAtNYU/AlbertPlus">View on GitHub</Link>
-            </Button>
           </div>
         </div>
       </section>
@@ -282,7 +282,7 @@ export default async function Home() {
               asChild
               size="lg"
               variant="outline"
-            // className="gap-2 text-black dark:text-white bg-[#F8F8F8] dark:bg-gray-700 hover:bg-[#DFDFDF] dark:hover:bg-gray-600"
+              // className="gap-2 text-black dark:text-white bg-[#F8F8F8] dark:bg-gray-700 hover:bg-[#DFDFDF] dark:hover:bg-gray-600"
             >
               <Link href="/sign-in">
                 Get Extension

apps/web/src/components/ui/hero-badge.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { motion, useAnimation, type Variants } from "framer-motion";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+const ease = [0.16, 1, 0.3, 1];
+
+interface HeroBadgeProps {
+  href?: string;
+  text: string;
+  icon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  variant?: "default" | "outline" | "ghost";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onClick?: () => void;
+}
+
+const badgeVariants: Record<string, string> = {
+  default: "bg-background hover:bg-muted",
+  outline: "border-2 hover:bg-muted",
+  ghost: "hover:bg-muted/50",
+};
+
+const sizeVariants: Record<string, string> = {
+  sm: "px-3 py-1 text-xs gap-1.5",
+  md: "px-4 py-1.5 text-sm gap-2",
+  lg: "px-5 py-2 text-base gap-2.5",
+};
+
+const iconAnimationVariants: Variants = {
+  initial: { rotate: 0 },
+  hover: { rotate: -10 },
+};
+
+export default function HeroBadge({
+  href,
+  text,
+  icon,
+  endIcon,
+  variant = "default",
+  size = "md",
+  className,
+  onClick,
+}: HeroBadgeProps) {
+  const controls = useAnimation();
+
+  const BadgeWrapper = href ? Link : motion.button;
+  const wrapperProps = href ? { href } : { onClick };
+
+  const baseClassName = cn(
+    "inline-flex items-center rounded-full border transition-colors",
+    badgeVariants[variant],
+    sizeVariants[size],
+    className
+  );
+
+  return (
+    <BadgeWrapper
+      {...wrapperProps}
+      className={cn("group", href && "cursor-pointer")}
+    >
+      <motion.div
+        className={baseClassName}
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease }}
+        onHoverStart={() => controls.start("hover")}
+        onHoverEnd={() => controls.start("initial")}
+      >
+        {icon && (
+          <motion.div
+            className="text-foreground/60 transition-colors group-hover:text-primary"
+            variants={iconAnimationVariants}
+            initial="initial"
+            animate={controls}
+            transition={{ type: "spring", stiffness: 300, damping: 10 }}
+          >
+            {icon}
+          </motion.div>
+        )}
+        <span>{text}</span>
+        {endIcon && (
+          <motion.div className="text-foreground/60">{endIcon}</motion.div>
+        )}
+      </motion.div>
+    </BadgeWrapper>
+  );
+}

bun.lock

@@ -88,6 +88,7 @@
         "cmdk": "^1.1.1",
         "convex": "^1.29.0",
         "date-fns": "^4.1.0",
+        "framer-motion": "^12.23.24",
         "lucide-react": "^0.553.0",
         "next": "16.0.1",
         "next-themes": "^0.4.6",
@@ -1523,6 +1524,8 @@
 
     "formdata-polyfill": ["[email protected]", "", { "dependencies": { "fetch-blob": "^3.1.2" } }, "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g=="],
 
+    "framer-motion": ["[email protected]", "", { "dependencies": { "motion-dom": "^12.23.23", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w=="],
+
     "fs-extra": ["[email protected]", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ=="],
 
     "fsevents": ["[email protected]", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
@@ -1927,6 +1930,10 @@
 
     "mnemonic-id": ["[email protected]", "", {}, "sha512-kysx9gAGbvrzuFYxKkcRjnsg/NK61ovJOV4F1cHTRl9T5leg+bo6WI0pWIvOFh1Z/yDL0cjA5R3EEGPPLDv/XA=="],
 
+    "motion-dom": ["[email protected]", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA=="],
+
+    "motion-utils": ["[email protected]", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="],
+
     "mrmime": ["[email protected]", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
 
     "ms": ["[email protected]", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],