diff --git a/app/globals.css b/app/globals.css index ef7b1ec..096c7f4 100644 --- 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,24 +408,19 @@ 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); @@ -442,7 +428,6 @@ --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 index 9ba41b7..bb54971 100644 --- 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 ( - {/* Fonts are now loaded exclusively through `next/font` */} - +
- {/* Background gradient */}
- {/* Matrix background effect */}
- {/* Additional purple glow effects */}
-
-
+
+
- {/* Subtle overlay for depth */}
- {/* Logo Animation */}
- {/* Main Content */}

hodlCoin Staking Platform @@ -51,7 +45,6 @@ export default function HomePage() {

- {/* Action Buttons */}
*/}
diff --git a/components/toggle-theme.tsx b/components/toggle-theme.tsx index 55864df..874f1e7 100644 --- 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) { diff --git a/hooks/useMatrixEffect.ts b/hooks/useMatrixEffect.ts index c845f96..846767a 100644 --- a/hooks/useMatrixEffect.ts +++ b/hooks/useMatrixEffect.ts @@ -8,9 +8,8 @@ export const useMatrixEffect = (opacity = 0.3, symbolCount = 3) => { if (!matrixContainer) return const symbols = ['$', '¢', '€', '£', '¥', '₿'] - const columns = Math.floor(window.innerWidth / 40) // Increased spacing for fewer symbols + const columns = Math.floor(window.innerWidth / 40) - // Create matrix columns for (let i = 0; i < columns; i++) { const column = document.createElement('div') column.className = 'matrix-column' @@ -23,11 +22,12 @@ export const useMatrixEffect = (opacity = 0.3, symbolCount = 3) => { overflow: hidden; ` - // Create symbols in each column (reduced count) const randomSymbolCount = Math.floor(Math.random() * symbolCount) + 2 for (let j = 0; j < randomSymbolCount; j++) { const symbol = document.createElement('div') const randomSymbol = symbols[Math.floor(Math.random() * symbols.length)] + const baseAlpha = Math.random() * 0.6 + 0.3 + const alpha = Math.min(1, Math.max(0, baseAlpha * opacity)) symbol.textContent = randomSymbol symbol.className = 'matrix-symbol' symbol.style.cssText = ` @@ -35,8 +35,8 @@ export const useMatrixEffect = (opacity = 0.3, symbolCount = 3) => { font-family: 'Courier New', monospace; font-weight: bold; font-size: ${Math.random() * 6 + 12}px; - color: rgba(147, 51, 234, ${Math.random() * 0.6 + 0.3}); - text-shadow: 0 0 10px rgba(147, 51, 234, 0.5); + color: rgba(147, 51, 234, ${alpha}); + text-shadow: 0 0 10px rgba(147, 51, 234, ${Math.min(1, alpha + 0.2)}); animation: matrixFall ${Math.random() * 4 + 3}s linear infinite; animation-delay: ${Math.random() * 3}s; top: ${Math.random() * 100}%; @@ -49,7 +49,6 @@ export const useMatrixEffect = (opacity = 0.3, symbolCount = 3) => { matrixContainer.appendChild(column) } - // Add CSS animation if not already added if (!document.getElementById('matrix-styles')) { const style = document.createElement('style') style.id = 'matrix-styles' @@ -89,7 +88,7 @@ export const useMatrixEffect = (opacity = 0.3, symbolCount = 3) => { matrixContainer.innerHTML = '' } } - }, [symbolCount]) + }, [symbolCount, opacity]) return matrixRef -} \ No newline at end of file +} \ No newline at end of file diff --git a/next.config.ts b/next.config.ts index e9ffa30..db0a372 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,7 +1,6 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - /* config options here */ }; export default nextConfig; diff --git a/tailwind.config.ts b/tailwind.config.ts index 75d246e..baabc0c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,4 +1,5 @@ import type { Config } from "tailwindcss"; +import tailwindcssAnimate from "tailwindcss-animate"; const config: Config = { darkMode: ["class"], @@ -93,7 +94,7 @@ const config: Config = { }, }, }, - plugins: [require("tailwindcss-animate")], + plugins: [tailwindcssAnimate], } satisfies Config; export default config;