fix: fix issue in ui (improvement)

Author: jadonamite

src/app/page.tsx

@@ -1,11 +1,11 @@
 "use client"
 
 import { useRef } from "react"
-import { Navbar } from "@/components/fundx/Navbar"
-import { Hero } from "@/components/fundx/hero/index"
-import { LogoStrip } from "@/components/fundx/LogoStrip"
-import { Footer } from "@/components/fundx/Footer"
-import { CampaignFan } from "@/components/fundx/CampaignFan"
+import { Navbar } from "@/components_/fundx/Navbar"
+import { Hero } from "@/components_/fundx/hero/index"
+import { LogoStrip } from "@/components_/fundx/LogoStrip"
+import { Footer } from "@/components_/fundx/Footer"
+import { CampaignFan } from "@/components_/fundx/CampaignFan"
 
 export default function Home() {
   const deckSlotRef = useRef<HTMLDivElement | null>(null)

src/components/fundx/CampaignFan.tsx

@@ -1,11 +1,11 @@
 "use client"
 
 import { useRef, useEffect, useState } from "react"
-import { useScroll, useTransform, motion, useSpring } from "framer-motion"
-import Link from "next/link"
-import Image from "next/image"
-import { Button } from "@/components/ui/button"
 import { Campaign, getHeroCampaign, getSideCampaigns } from "@/lib/data"
+import { Button } from "@/components/ui/button"
+import Image from "next/image"
+import Link from "next/link"
+import { useScroll, useTransform, motion, useSpring } from "framer-motion"
 
 interface CampaignFanProps {
   deckSlotRef: React.RefObject<HTMLDivElement | null>

src/components/fundx/TrustStrips.tsx

@@ -1,7 +1,7 @@
 export function TrustStrip() {
   return (
     <div className="mt-12 relative">
-      <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-indigo-500/10 to-pink-500/10 blur-2xl opacity-70 rounded-3xl" />
+      <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-indigo_-500/10 to-pink-500/10 blur-2xl opacity-70 rounded-3xl" />
 
       <div className="relative backdrop-blur-xl border border-white/40 bg-white/70 rounded-3xl px-8 py-5 shadow-lg">
         <div className="flex flex-wrap justify-center gap-8 text-sm font-semibold text-slate-700 tracking-wide">
@@ -11,7 +11,7 @@ export function TrustStrip() {
           </span>
 
           <span className="flex items-center gap-2">
-            <span className="h-2 w-2 rounded-full bg-indigo-500 animate-pulse" />
+            <span className="h-2 w-2 rounded-full bg-indigo_-500 animate-pulse" />
             On-chain Escrow
           </span>
 

src/components/fundx/cards/RightCard.tsx

@@ -1,7 +1,7 @@
-import { ArrowRight } from "lucide-react"
-import { Campaign } from "@/lib/data"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
+import { Campaign } from "@/lib/data"
+import { ArrowRight } from "lucide-react"
 
 interface SideCardProps {
   campaign: Campaign

src/components/fundx/hero/ChainToggleIcon.tsx

@@ -22,8 +22,8 @@ export function ChainToggleIcon({
     boxShadow: displayStacks ? "0 4px 24px 0 rgba(0,0,0,0.18)" : "0 4px 24px 0 rgba(0,0,0,0.07)",
     opacity: glitchOpacity,
     ...(glitching
-      ? { transform: `translate_(${glitchOffset.x}px, ${glitchOffset.y}px) skewX(${glitchSkew}deg) rotate(${displayStacks ? "6deg" : "-6deg"})`, transition: "none" }
-      : { transform: `translate_(0px, 0px) skewX(0deg) rotate(${isStacksMode ? "6deg" : "-6deg"})`, transition: "transform 700ms cubic-bezier(0.4,0,0.2,1), background-color 600ms ease, box-shadow 600ms ease, opacity 300ms ease" }),
+      ? { transform: `translate(${glitchOffset.x}px, ${glitchOffset.y}px) skewX(${glitchSkew}deg) rotate(${displayStacks ? "6deg" : "-6deg"})`, transition: "none" }
+      : { transform: `translate(0px, 0px) skewX(0deg) rotate(${isStacksMode ? "6deg" : "-6deg"})`, transition: "transform 700ms cubic-bezier(0.4,0,0.2,1), background-color 600ms ease, box-shadow 600ms ease, opacity 300ms ease" }),
     willChange: "transform, opacity",
   }
 

src/components/fundx/hero/HeroBackground.tsx

@@ -112,8 +112,8 @@ export function HeroBackground({ isStacksMode }: { isStacksMode: boolean }) {
       targetOpacityRef.current = isStacks ? 1 : 0
       currentOpacityRef.current += (targetOpacityRef.current - currentOpacityRef.current) * 0.03
 
-      const stacksAlpha_ = currentOpacityRef.current
-      const bitcoinAlpha = 1 - stacksAlpha_
+      const stacksAlpha = currentOpacityRef.current
+      const bitcoinAlpha = 1 - stacksAlpha
 
       // Spawn new streams
       if (frame % 45 === 0 && streams.length < 18) {
@@ -151,7 +151,7 @@ export function HeroBackground({ isStacksMode }: { isStacksMode: boolean }) {
         }
 
         drawStream(BITCOIN_COLORS.stream, bitcoinAlpha)
-        drawStream(STACKS_COLORS.stream, stacksAlpha_)
+        drawStream(STACKS_COLORS.stream, stacksAlpha)
 
         // Occasionally spawn block at convergence zone
         if (s.y > height * 0.4 && s.y < height * 0.85 && Math.random() < 0.004) {
@@ -204,7 +204,7 @@ export function HeroBackground({ isStacksMode }: { isStacksMode: boolean }) {
         }
 
         drawBlock(BITCOIN_COLORS.block, bitcoinAlpha)
-        drawBlock(STACKS_COLORS.block, stacksAlpha_)
+        drawBlock(STACKS_COLORS.block, stacksAlpha)
 
         // Chain lines between nearby blocks
         for (let j = i - 1; j >= 0; j--) {
@@ -224,7 +224,7 @@ export function HeroBackground({ isStacksMode }: { isStacksMode: boolean }) {
             }
 
             drawLine(BITCOIN_COLORS.block, bitcoinAlpha)
-            drawLine(STACKS_COLORS.block, stacksAlpha_)
+            drawLine(STACKS_COLORS.block, stacksAlpha)
           }
         }