diff --git a/components/HeroButtons.tsx b/components/HeroButtons.tsx
index 4b1a4fd..8bc6724 100644
--- a/components/HeroButtons.tsx
+++ b/components/HeroButtons.tsx
@@ -30,7 +30,7 @@ export default function HeroButtons() {
     >
       {/* .component-82 - Start Investing Button */}
       <button
-        className="bg-white flex flex-row gap-2 items-center justify-center flex-shrink-0 h-[60px] relative overflow-hidden hover:bg-[#f3f4f6] transition-colors"
+        className="bg-white flex flex-row gap-2 items-center justify-center flex-shrink-0 h-[60px] relative overflow-hidden hover:bg-[#f3f4f6] transition-colors select-none"
         style={{
           borderRadius: '4px',
           padding: '0px 32px'
@@ -61,7 +61,7 @@ export default function HeroButtons() {
 
       {/* .component-9 - Read the Whitepaper Button */}
       <button
-        className="border border-white/20 flex flex-row gap-2 items-center justify-center self-stretch flex-shrink-0 relative overflow-hidden hover:bg-white/70 hover:border-white/60 transition-all"
+        className="border border-white/20 flex flex-row gap-2 items-center justify-center self-stretch flex-shrink-0 relative overflow-hidden hover:bg-white/70 hover:border-white/60 transition-all select-none"
         style={{
           background: 'rgba(255, 255, 255, 0.1)',
           borderRadius: '4px',
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index 093e172..ce9d0f2 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -14,7 +14,14 @@ export default function HeroSection() {
         muted
         playsInline
         className="absolute inset-0 w-full h-full object-cover"
-        style={{ zIndex: 0 }}
+        style={{
+          zIndex: 0,
+          objectFit: 'cover',
+          objectPosition: 'center center',
+          minWidth: '100%',
+          minHeight: '100%',
+          transform: 'scale(1.1)'
+        }}
       >
         <source src="/hero-background.mp4" type="video/mp4" />
       </video>
diff --git a/components/HowItWorksSection.tsx b/components/HowItWorksSection.tsx
index 9fb337b..9988e67 100644
--- a/components/HowItWorksSection.tsx
+++ b/components/HowItWorksSection.tsx
@@ -270,8 +270,8 @@ export default function HowItWorksSection() {
             boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
             transformOrigin: '0 0',
             transform: animate && activeStep === 1
-              ? 'rotate(6.535deg) scale(1, 1) translateY(0)'
-              : 'rotate(6.535deg) scale(1, 1) translateY(3rem)',
+              ? 'rotate(6.535deg) scale(1, 1) translateX(0)'
+              : 'rotate(6.535deg) scale(1, 1) translateX(3rem)',
             transitionDelay: activeStep === 1 ? '200ms' : '0ms',
             pointerEvents: activeStep === 1 ? 'auto' : 'none'
           }}
@@ -305,8 +305,8 @@ export default function HowItWorksSection() {
             }`}
             style={{
               transform: animate && activeStep === 1
-                ? 'rotate(-3deg) translateY(0)'
-                : 'rotate(-3deg) translateY(3rem)',
+                ? 'rotate(-3deg) translateX(0)'
+                : 'rotate(-3deg) translateX(3rem)',
               transformOrigin: 'center center',
               transitionDelay: activeStep === 1 ? '200ms' : '0ms',
               pointerEvents: activeStep === 1 ? 'auto' : 'none'
@@ -420,8 +420,8 @@ export default function HowItWorksSection() {
             style={{
               boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
               transform: animate && activeStep === 2
-                ? 'rotate(3deg) translateY(0)'
-                : 'rotate(3deg) translateY(3rem)',
+                ? 'rotate(3deg) translateX(0)'
+                : 'rotate(3deg) translateX(3rem)',
               transformOrigin: '0 0',
               transitionDelay: activeStep === 2 ? '200ms' : '0ms',
               pointerEvents: activeStep === 2 ? 'auto' : 'none'
@@ -493,8 +493,8 @@ export default function HowItWorksSection() {
             style={{
               boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
               transform: animate && activeStep === 3
-                ? 'rotate(3deg) translateY(0)'
-                : 'rotate(3deg) translateY(3rem)',
+                ? 'rotate(3deg) translateX(0)'
+                : 'rotate(3deg) translateX(3rem)',
               transformOrigin: '0 0',
               transitionDelay: activeStep === 3 ? '200ms' : '0ms',
               overflow: 'hidden',
@@ -545,7 +545,7 @@ export default function HowItWorksSection() {
                       +10% APY
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -578,7 +578,7 @@ export default function HowItWorksSection() {
                       +10% APY
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -611,7 +611,7 @@ export default function HowItWorksSection() {
                       +10% APY
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -644,7 +644,7 @@ export default function HowItWorksSection() {
                       Get USDC
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -677,7 +677,7 @@ export default function HowItWorksSection() {
                       10% APY
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index a303e3c..afa343f 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -133,18 +133,18 @@ export default function Navbar() {
       {/* Launch App Button & Language Selector */}
       <div className="flex-1 flex justify-end items-center gap-4">
         <div
-          className="bg-[#111827] rounded-lg px-5 py-2.5 h-10 flex items-center justify-center overflow-hidden cursor-pointer hover:opacity-90 select-none"
           style={{
             transform: animate ? 'translateY(0)' : 'translateY(-3rem)',
             opacity: animate ? 1 : 0,
-            transition: 'all 1s ease-out',
-            transitionDelay: '200ms'
+            transition: 'transform 1s ease-out 200ms, opacity 1s ease-out 200ms'
           }}
           suppressHydrationWarning
         >
-          <span className="text-[#fcfcfd] font-bold text-sm leading-[150%] font-inter">
-            {t('nav.launchApp')}
-          </span>
+          <div className="bg-[#111827] rounded-lg px-5 py-2.5 h-10 flex items-center justify-center overflow-hidden cursor-pointer hover:scale-105 select-none transition-transform duration-300">
+            <span className="text-[#fcfcfd] font-bold text-sm leading-[150%] font-inter">
+              {t('nav.launchApp')}
+            </span>
+          </div>
         </div>
 
         {/* Language Selector */}
diff --git a/components/ShatterTransition.tsx b/components/ShatterTransition.tsx
index da36a41..42fe02b 100644
--- a/components/ShatterTransition.tsx
+++ b/components/ShatterTransition.tsx
@@ -7,9 +7,9 @@ interface ShatterTransitionProps {
   onComplete: () => void;
 }
 
-// 增加网格密度以获得更细腻的破碎感
-const GRID_COLS = 10;
-const GRID_ROWS = 10;
+// 优化性能：减少碎片数量
+const GRID_COLS = 7;
+const GRID_ROWS = 7;
 
 export default function ShatterTransition({ isActive, onComplete }: ShatterTransitionProps) {
   const [isAnimating, setIsAnimating] = useState(false);
diff --git a/components/TrustedBySection.tsx b/components/TrustedBySection.tsx
index 4113872..8ad2297 100644
--- a/components/TrustedBySection.tsx
+++ b/components/TrustedBySection.tsx
@@ -98,13 +98,13 @@ export default function TrustedBySection() {
         {partners.map((partner, index) => (
           <div
             key={partner.name}
-            className={`flex-shrink-0 relative overflow-hidden transition-all duration-700 ease-out ${
+            className={`flex-shrink-0 relative overflow-hidden cursor-pointer hover:brightness-0 ${
               animate
                 ? 'translate-y-0 opacity-100'
                 : 'translate-y-12 opacity-0'
             }`}
             style={{
-              transitionDelay: `${index * 100}ms`,
+              transition: `transform 0.7s ease-out ${index * 100}ms, opacity 0.7s ease-out ${index * 100}ms, filter 0.3s ease-out`,
               width: `${partner.width}px`,
               height: `${partner.height}px`,
               aspectRatio: `${partner.width}/${partner.height}`