spin

Author: ismellike

app/page.tsx

@@ -13,24 +13,28 @@ export default function Home() {
         <div className="flex flex-col items-center max-w-5xl mx-auto text-center">
           {/* Logo and Brand */}
           <motion.div
-            initial={{ opacity: 0, y: -30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-            className="flex flex-col items-center mb-12"
+            animate={{ rotate: 360 }}
+            className="mb-8 drop-shadow-2xl"
+            transition={{
+              duration: 10,
+              ease: "linear",
+              repeat: Infinity,
+              repeatType: "loop"
+            }}
           >
             <Image
               src="/logo.webp"
               alt="SpinFi Logo"
               width={160}
               height={160}
-              className="mb-8 drop-shadow-2xl"
+              removeWrapper
             />
-            <h1
-              className="neon-text text-6xl md:text-8xl font-bold tracking-wide uppercase font-orbitron whitespace-nowrap"
-            >
-              SPINFI
-            </h1>
           </motion.div>
+          <h1
+            className="neon-text text-6xl md:text-8xl font-bold tracking-wide uppercase font-orbitron whitespace-nowrap"
+          >
+            SPINFI
+          </h1>
 
           {/* Hero Content */}
           <motion.div
@@ -58,7 +62,7 @@ export default function Home() {
               target="_blank"
               rel="noopener noreferrer"
               size="lg"
-              variant="glow"
+              variant="glass"
               startContent={
                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />

components/brand/BrandButton.tsx

@@ -1,49 +1,34 @@
 "use client";
+import { Button as BaseButton } from "@heroui/react";
+import { extendVariants } from "@heroui/react";
 
-import {Button as BaseButton} from "@heroui/button";
-import {extendVariants} from "@heroui/system";
-
-// BrandButton adds a warm orange glow and a glassy variant tailored for the orange background
 export const BrandButton = extendVariants(BaseButton, {
   variants: {
     variant: {
-      glow: [
-        "relative",
-        "text-black",
-        "bg-gradient-to-r from-primary to-secondary",
-        "ring-2 ring-primary/40",
-        "shadow-[0_0_24px_rgba(45,212,191,0.55)]",
-        "before:absolute before:inset-0 before:-z-10 before:rounded-inherit",
-        "before:bg-[radial-gradient(120%_80%_at_50%_0%,rgba(45,212,191,0.35),transparent_70%)]",
-        "hover:brightness-110",
-      ].join(" "),
-      glass: [
-        "relative",
-        "text-white",
-        "bg-black/30",
-        "backdrop-blur-lg backdrop-saturate-150",
-        "border border-white/25",
-        "shadow-none",
-        "hover:bg-black/35 hover:border-white/40",
-        // top highlight
-        "before:absolute before:inset-0 before:rounded-inherit before:pointer-events-none",
-        "before:bg-gradient-to-b before:from-white/15 before:to-transparent",
-      ].join(" "),
+      glow: "relative rounded-lg bg-gradient-to-r from-[#fb923c] to-[#f97316] ring-2 ring-[#fb923c]/40 shadow-[0_0_28px_rgba(251,146,60,0.5)] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:rounded-inherit before:bg-[radial-gradient(120%_80%_at_50%_0%,rgba(251,146,60,0.3),transparent_70%)] hover:shadow-[0_0_40px_rgba(251,146,60,0.7)] hover:ring-[#fb923c]/60 hover:brightness-110 transition-all duration-300 ease-out",
+      glass: "relative rounded-lg bg-black/30 backdrop-blur-xl backdrop-saturate-150 border border-white/20 shadow-[0_0_20px_rgba(251,146,60,0.25)] hover:bg-black/35 hover:border-white/35 hover:shadow-[0_0_32px_rgba(251,146,60,0.4)] before:absolute before:inset-0 before:rounded-lg before:rounded-inherit before:pointer-events-none before:bg-gradient-to-b before:from-white/10 before:to-transparent transition-all duration-300 ease-out",
     },
     color: {
-      flame:
-        "bg-gradient-to-r from-teal-400 to-blue-400 text-black hover:from-teal-300 hover:to-blue-300",
+      orange: "",
+    },
+    size: {
+      sm: "h-8 px-3 text-xs",
+      md: "h-10 px-4 text-sm",
+      lg: "h-12 px-6 text-base",
+    },
+    radius: {
+      sm: "rounded-md",
+      md: "rounded-lg",
+      lg: "rounded-xl",
     },
   },
   defaultVariants: {
-    color: "flame",
+    variant: "shadow",
+    color: "primary",
+    size: "md",
+    radius: "md",
   },
-  compoundVariants: [
-    {
-      variant: "glow",
-      class: "ring-1 ring-primary/20",
-    },
-  ],
 });
 
 export type BrandButtonProps = React.ComponentProps<typeof BrandButton>;
+