StabilityNexus · aryanraj2005-me · Dec 13, 2025
diff --git a/app/globals.css b/app/globals.css
@@ -71,11 +71,6 @@
     @apply border-border;
   }
 
-  html {
-    /* Responsive font sizing: scales between 16px and 20px based on viewport width */
-    /* font-size: clamp(16px, 0.9vw + 0.5rem, 20px); */
-  }
-
   body {
     @apply bg-background text-foreground;
     overflow-x: hidden;
@@ -111,7 +106,6 @@
     font-family: var(--font-poppins), 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   }
 
-  /* Ensure consistent font sizes across different screen sizes */
   @media (min-width: 640px) {
     h1 {
       font-size: 2.25rem;
@@ -158,7 +152,6 @@
     @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-500 dark:from-purple-400 dark:to-fuchsia-500;
   }
 
-  /* 3D Effects */
   .card-3d {
     @apply transform-gpu transition-all duration-300 ease-out;
     box-shadow: 
@@ -335,7 +328,6 @@
       hsl(var(--background));
   }
 
-  /* Ensure font sizes are consistent */
   .text-xs {
     font-size: 0.75rem !important;
     line-height: 1rem !important;
@@ -389,7 +381,6 @@
   @apply bg-primary;
 }
 
-/* Custom animations */
 @keyframes blob {
   0% {
     transform: translate(0px, 0px) scale(1);
@@ -417,32 +408,26 @@
   animation-delay: 4s;
 }
 
-/* Glass effect */
 .glass {
   @apply bg-background/50 backdrop-blur-sm border-primary/20;
 }
 
-/* Gradient text */
 .gradient-text {
   @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-500 dark:from-purple-400 dark:to-fuchsia-500;
 }
 
-/* Button styles */
 .btn-gradient {
   @apply bg-gradient-to-r from-primary to-purple-500 text-white hover:opacity-90 transition-opacity dark:from-purple-400 dark:to-fuchsia-500;
 }
 
-/* RainbowKit styling - Light mode defaults */
 :root {
-  /* Light mode RainbowKit colors */
   --rk-colors-connectButtonBackground: rgba(255, 255, 255, 0.9);
   --rk-colors-connectButtonBackgroundError: rgba(255, 255, 255, 0.9);
   --rk-colors-connectButtonInnerBackground: rgba(255, 255, 255, 0.95);
   --rk-colors-connectButtonText: rgb(30, 30, 30);
   --rk-colors-connectButtonTextError: rgb(30, 30, 30);
 }
 
-/* Light mode button styling - using :not(.dark) to target light mode */
 :root:not(.dark) [data-rk] button[data-testid="rk-connect-button"] {
   @apply bg-white/90 border-gray-200/80 hover:bg-white/95 backdrop-blur-sm;
   color: rgb(30, 30, 30) !important;
@@ -456,7 +441,6 @@
   color: rgb(30, 30, 30) !important;
 }
 
-/* Dark mode RainbowKit overrides */
 .dark {
   --rk-colors-connectButtonBackground: rgba(30, 30, 30, 0.9);
   --rk-colors-connectButtonBackgroundError: rgba(30, 30, 30, 0.9);
@@ -474,7 +458,6 @@
   @apply bg-gray-800/90 border-gray-700/80 hover:bg-gray-800/95 backdrop-blur-sm;
 }
 
-/* Light mode specific styles */
 .light {
   .glass {
     @apply bg-white/80 backdrop-blur-sm border-gray-200;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,8 @@ import { ThemeProvider } from '../providers/theme-provider'
 import { Header } from '../components/Header'
 import Footer from '../components/Footer'
 
+const siteUrl = new URL('https://hodlcoin.co.in')
+
 const poppins = Poppins({ 
   subsets: ['latin'],
   weight: ['300', '400', '500', '600', '700', '800', '900'],
@@ -14,8 +16,8 @@ const poppins = Poppins({
 })
 
 export const metadata: Metadata = {
-  title: 'hodlCoin Staking Platform | Self-Stabilizing Staking Vaults',
-  description: 'Self-Stabilizing Staking vaults with price stability mechanisms designed to increase value over time. Stake your tokens on EVM chains, Ergo, or Alephium. Unstaking fees benefit vault creators and long-term stakers.',
+  title: 'hodlCoin | Self-Stabilizing Staking Vaults',
+  description: 'Stake in self-stabilizing vaults designed to protect value over time. Earn yield across EVM chains, Ergo, and Alephium—while unstaking fees reward long-term stakers and vault creators.',
   keywords: [
     'hodlCoin',
     'staking',
@@ -34,31 +36,31 @@ export const metadata: Metadata = {
   authors: [{ name: 'Stability Nexus' }],
   creator: 'Stability Nexus',
   publisher: 'Stability Nexus',
-  metadataBase: new URL('https://hodlcoin.co.in'),
+  metadataBase: siteUrl,
   alternates: {
     canonical: '/',
   },
   openGraph: {
     type: 'website',
     locale: 'en_US',
-    url: 'https://hodlcoin.co.in',
-    siteName: 'hodlCoin Staking Platform',
-    title: 'hodlCoin Staking Platform | Self-Stabilizing Staking Vaults',
-    description: 'Self-Stabilizing Staking vaults with price stability mechanisms designed to increase value over time. Stake your tokens on EVM chains, Ergo, or Alephium. Unstaking fees benefit vault creators and long-term stakers.',
+    url: siteUrl,
+    siteName: 'hodlCoin',
+    title: 'hodlCoin | Self-Stabilizing Staking Vaults',
+    description: 'Stake in self-stabilizing vaults designed to protect value over time. Earn yield across EVM chains, Ergo, and Alephium—while unstaking fees reward long-term stakers and vault creators.',
     images: [
       {
-        url: '/hodlcoin.png',
-        width: 1200,
-        height: 630,
-        alt: 'hodlCoin Logo - Self-Stabilizing Staking Platform',
+        url: new URL('/hodlcoin.png', siteUrl),
+        width: 2000,
+        height: 1730,
+        alt: 'hodlCoin logo',
       },
     ],
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'hodlCoin Staking Platform | Self-Stabilizing Staking Vaults',
-    description: 'Self-Stabilizing Staking vaults with price stability mechanisms designed to increase value over time. Stake on EVM chains, Ergo, or Alephium.',
-    images: ['/hodlcoin.png'],
+    title: 'hodlCoin | Self-Stabilizing Staking Vaults',
+    description: 'Stake in self-stabilizing vaults designed to protect value over time. Earn yield across EVM chains, Ergo, and Alephium.',
+    images: [new URL('/hodlcoin.png', siteUrl)],
     creator: '@StabilityNexus',
     site: '@StabilityNexus',
   },
@@ -93,8 +95,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning className={poppins.variable}>
-      {/* Fonts are now loaded exclusively through `next/font` */}
-      <body className={poppins.className}>
+      <body className={poppins.className} suppressHydrationWarning>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"

diff --git a/app/page.tsx b/app/page.tsx
@@ -7,34 +7,28 @@ import { Card } from '@/components/ui/card'
 import { useMatrixEffect } from '@/hooks/useMatrixEffect'
 
 export default function HomePage() {
-  const heroMatrixRef = useMatrixEffect(0.2, 2) // Matrix effect for hero section
-  const sectionMatrixRef = useMatrixEffect(0.15, 1.5) // Matrix effect for lower section
+  const heroMatrixRef = useMatrixEffect(0.2, 2)
+  const sectionMatrixRef = useMatrixEffect(0.15, 1.5)
 
   return (
     <>
       <div className="relative w-full min-h-[90vh] mt-4 overflow-hidden flex flex-col items-center justify-center">
-        {/* Background gradient */}
         <div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background/90" />
 
-        {/* Matrix background effect */}
         <div className="absolute inset-0 opacity-20">
           <div ref={heroMatrixRef} className="absolute inset-0 w-full h-full" />
 
-          {/* Additional purple glow effects */}
           <div className="absolute top-1/4 right-1/4 w-40 h-40 bg-gray-300/10 rounded-full blur-3xl animate-pulse" />
-                    <div className="absolute bottom-1/3 left-1/4 w-32 h-32 bg-gray-400/10 rounded-full blur-2xl animate-pulse animation-delay-2000" />
-            <div className="absolute top-1/2 left-1/3 w-24 h-24 bg-gray-500/5 rounded-full blur-xl animate-pulse animation-delay-4000" />
+          <div className="absolute bottom-1/3 left-1/4 w-32 h-32 bg-gray-400/10 rounded-full blur-2xl animate-pulse animation-delay-2000" />
+          <div className="absolute top-1/2 left-1/3 w-24 h-24 bg-gray-500/5 rounded-full blur-xl animate-pulse animation-delay-4000" />
 
-          {/* Subtle overlay for depth */}
           <div className="absolute inset-0 bg-gradient-to-t from-background/10 via-transparent to-background/5" />
         </div>
 
         <div className="relative flex flex-col items-center justify-center w-full max-w-5xl mx-auto px-4 py-16 space-y-8">
-          {/* Logo Animation */}
           <div className="relative w-32 h-16 animate-float">
           </div>
 
-          {/* Main Content */}
           <div className="text-center space-y-6">
             <h1 className="pb-2 text-5xl md:text-6xl font-extrabold tracking-tight text-gradient animate-fade-in">
               hodlCoin Staking Platform
@@ -51,7 +45,6 @@ export default function HomePage() {
             </h2>
           </div>
 
-          {/* Action Buttons */}
           <div className="flex flex-col md:flex-row gap-4 animate-fade-in">
             <Link href='https://evm.hodlcoin.co.in/'>
               <Button 
@@ -98,23 +91,18 @@ export default function HomePage() {
       </div>
 
       <section className="relative w-full py-24 overflow-hidden bg-background">
-        {/* Matrix background effect */}
         <div className="absolute inset-0 opacity-25">
           <div ref={sectionMatrixRef} className="absolute inset-0 w-full h-full" />
 
-          {/* Additional purple glow effects */}
           <div className="absolute top-1/4 left-1/4 w-32 h-32 bg-gray-300/15 rounded-full blur-3xl animate-pulse" />
-                    <div className="absolute bottom-1/3 right-1/4 w-24 h-24 bg-gray-400/10 rounded-full blur-2xl animate-pulse animation-delay-2000" />
-            <div className="absolute top-1/2 right-1/3 w-20 h-20 bg-gray-500/5 rounded-full blur-xl animate-pulse animation-delay-4000" />
+          <div className="absolute bottom-1/3 right-1/4 w-24 h-24 bg-gray-400/10 rounded-full blur-2xl animate-pulse animation-delay-2000" />
+          <div className="absolute top-1/2 right-1/3 w-20 h-20 bg-gray-500/5 rounded-full blur-xl animate-pulse animation-delay-4000" />
 
-          {/* Subtle grid overlay */}
           <div className="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent" />
         </div>
 
         <div className="relative container mx-auto px-4 space-y-24">
-          {/* How HodlCoin Works Section */}
           <div className="flex flex-col lg:flex-row items-center gap-12 max-w-6xl mx-auto">
-            {/* Paper Image */}
             <div className="w-full lg:w-1/2">
               <Card className="p-4 bg-background/50 backdrop-blur-sm border-primary/20 hover:border-primary/40 transition-colors">
                 <Link
@@ -138,7 +126,6 @@ export default function HomePage() {
               </Card>
             </div>
 
-            {/* Content */}
             <div className="w-full lg:w-1/2 space-y-6">
               <div className="space-y-4">
                 <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight text-gradient">
@@ -185,7 +172,6 @@ export default function HomePage() {
             </div>
           </div>
 
-          {/* Why HodlCoin Section */}
           <div className="max-w-6xl mx-auto">
             <div className="text-center space-y-4 mb-16">
               <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight text-gradient">
@@ -194,7 +180,6 @@ export default function HomePage() {
             </div>
 
             <div className="grid md:grid-cols-2 gap-8">
-              {/* For Vault Creators */}
               <Card className="p-8 bg-background/50 backdrop-blur-sm border-primary/20 hover:border-primary/40 transition-colors">
                 <div className="space-y-6">
                   <div className="space-y-2">
@@ -235,7 +220,6 @@ export default function HomePage() {
                 </div>
               </Card>
 
-              {/* For Stakers */}
               <Card className="p-8 bg-background/50 backdrop-blur-sm border-primary/20 hover:border-primary/40 transition-colors">
                 <div className="space-y-6">
                   <div className="space-y-2">

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -113,7 +113,6 @@ export default function Footer() {
     <footer className='w-full px-6 md:px-24 py-8 bg-secondary/20 border-t border-border'>
       <div className='max-w-6xl mx-auto'>
         <div className='flex flex-col md:flex-row items-center justify-between gap-6'>
-          {/* Navigation Links */}
           <div className='flex items-center justify-between'>
         <Link
           href='https://stability.nexus/'
@@ -135,7 +134,6 @@ export default function Footer() {
              © 2023-2025 The Stable Order. All rights reserved.
           </div>
 
-          {/* Social Media Links */}
           <div className='flex items-center gap-3'>
             {navigation.map(item => (
               <Link

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,21 +1,13 @@
 'use client'
 
 import Image from 'next/image'
-import React from 'react'
 import Link from 'next/link'
-// import MetamaskContext from '@/contexts/EthersContext'
-// import { Button } from './ui/button'
 import { ModeToggle } from './toggle-theme'
 
 export function Header() {
-  // const { signer, account, connectWallet } = React.useContext(
-  //   MetamaskContext,
-  // ) as any
-
   return (
     <div className='fixed w-full h-16 top-0 z-20 flex flex-col shadow-xl border-b-[1px] border-secondary justify-center backdrop-blur-md bg-background/15'>
       <div className='w-full bg-transparent flex flex-row justify-between items-center lg:px-24 px-4 h-14'>
-        {/* Logo and Brand - Left Side */}
         <Link href='/' className='h-16 flex items-center'>
           <Image
             className='cursor-pointer h-[100%] w-auto py-2 hidden lg:inline-block'
@@ -34,20 +26,8 @@ export function Header() {
           </p>
         </Link>
 
-        {/* Theme Toggle - Right Side */}
         <div className='h-[100%] flex flex-row justify-end items-center'>
-          {/* <AvatarMenu /> */}
-
           <ModeToggle />
-
-          {/* <Button onClick={connectWallet}>
-            {signer
-              ? 'Connected: ' +
-                account?.substring(0, 5) +
-                '...' +
-                account?.substring(38, 42)
-              : 'Connect Wallet'}
-          </Button> */}
         </div>
       </div>
     </div>

diff --git a/components/toggle-theme.tsx b/components/toggle-theme.tsx
@@ -4,18 +4,10 @@ import * as React from 'react'
 import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 
-/**
- * Render a clickable theme toggle that switches the app between light and dark modes.
- *
- * The control reflects the resolved theme (preferring `resolvedTheme` over `theme`) and shows a non-interactive placeholder until the component is mounted on the client. Clicking the control toggles the active theme between `light` and `dark`.
- *
- * @returns A JSX element that visually represents the theme toggle and handles user interaction to switch themes.
- */
 export function ModeToggle() {
   const { theme, setTheme, resolvedTheme } = useTheme()
   const [mounted, setMounted] = React.useState(false)
 
-  // useEffect only runs on the client, so now we can safely show the UI
   React.useEffect(() => {
     setMounted(true)
   }, [])
@@ -26,7 +18,6 @@ export function ModeToggle() {
     setTheme(newTheme)
   }
 
-  // Use resolvedTheme to get the actual theme value (light/dark), not 'system'
   const currentTheme = resolvedTheme || theme
 
   if (!mounted) {