From 154c16b3669d649afb21b64c812ecdfe9214dd3d Mon Sep 17 00:00:00 2001 From: Yogesh Singh Date: Sat, 13 Dec 2025 17:39:37 +0530 Subject: [PATCH 1/3] Repo Updated with same color of btn after hover --- app/page.tsx | 830 ++++++++++++++++++++++++++++++++++----------------- 1 file changed, 556 insertions(+), 274 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index e20d650..4f7d36c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,284 +1,566 @@ -'use client' - -import Link from 'next/link' -import Image from 'next/image' -import { Button } from '@/components/ui/button' -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 - - return ( - <> -
- {/* Background gradient */} -
- - {/* Matrix background effect */} -
-
- - {/* Additional purple glow effects */} -
-
-
- - {/* Subtle overlay for depth */} -
-
+ + + + + + hodlCoin Staking Platform + + + + + + +
+
+
+
+
+
+
+ +
+
+
LOGO
-
- - {/* Why HodlCoin Section */} -
-
-

- Why hodlCoin -

+ +

hodlCoin Staking Platform

+ +

+ Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!
+ Unstaking fees benefit vault creators and those who keep staking longer. +

+ +

Choose the blockchain where you would like to stake:

+ +
+ + +
+
+
-
- {/* For Vault Creators */} - -
-
-

For Vault Creators

-
-
- -
    -
  • -
    -
    -

    Reward your Loyal Tokenholders

    -

    Efficiently distribute rewards to all your tokenholders with a single transaction.

    -
    -
    • -
  • -
    -
    -

    Signal your Long-Term Commitment

    -

    Stake your own tokens in a vault with a high unstaking fee, to show your community that you are holding for the long run.

    -
    -
    • -
  • -
    -
    -

    Earn Unstaking Fees

    -

    Receive a portion of fees when users unstake early.

    -
    -
    • -
  • -
    -
    -

    Protect your Token from Sell Pressure

    -

    The unstaking fee disincentivizes sellers and incentivizes holders without inflation.

    -
    -
    • -
+ +
+
+ +
+
+
📄
- - - {/* For Stakers */} - -
-
-

For Stakers

-
-
- -
    -
  • -
    -
    -

    Earn from Others' Impatience

    -

    Benefit from unstaking fees paid by users who exit early.

    -
    -
    • -
  • -
    -
    -

    Long-Term Value Growth

    -

    The price of the hodlCoin is mathematically guaranteed to grow w.r.t. the price of the underlying coin, if you hodl longer than others.

    -
    -
    • -
  • -
    -
    -

    Receive Rewards

    -

    Get additional rewards distributed by vault creators who want to incentivize staking.

    -
    -
    • -
  • -
    -
    -

    Flexible Participation

    -

    Stake and unstake at any time, choosing from a wide variety of vaults for various tokens.

    -
    -
    • -
+ +
+
How hodlCoin Works
+
+ +

+ HodlCoin is a staking protocol that encourages staking ("hodling") assets for long periods of time. When hodling, users deposit coins of a given asset in a vault and receive a proportional amount of corresponding hodlCoins. +

+ +

+ When unhodling, users must pay an unstaking fee that benefits the vault's creator and users who continue hodling longer. Moreover, anyone (especially vault creators) can distribute rewards to hodlers, to further incentivize hodling. +

+ + + Read the Research Paper → + +
+
+ + +
+
Why hodlCoin
+
+ +
+ +
+
For Vault Creators
+
+ +
    +
  • +
    +
    +

    Reward your Loyal Tokenholders

    +

    Efficiently distribute rewards to all your tokenholders with a single transaction.

    +
    +
    • +
  • +
    +
    +

    Signal your Long-Term Commitment

    +

    Stake your own tokens in a vault with a high unstaking fee, to show your community that you are holding for the long run.

    +
    +
    • +
  • +
    +
    +

    Earn Unstaking Fees

    +

    Receive a portion of fees when users unstake early.

    +
    +
    • +
  • +
    +
    +

    Protect your Token from Sell Pressure

    +

    The unstaking fee disincentivizes sellers and incentivizes holders without inflation.

    +
    +
    • +
+
+ + +
+
For Stakers
+
+ +
    +
  • +
    +
    +

    Earn from Others' Impatience

    +

    Benefit from unstaking fees paid by users who exit early.

    +
    +
    • +
  • +
    +
    +

    Long-Term Value Growth

    +

    The price of the hodlCoin is mathematically guaranteed to grow w.r.t. the price of the underlying coin, if you hodl longer than others.

    +
    +
    • +
  • +
    +
    +

    Receive Rewards

    +

    Get additional rewards distributed by vault creators who want to incentivize staking.

    +
    +
    • +
  • +
    +
    +

    Flexible Participation

    +

    Stake and unstake at any time, choosing from a wide variety of vaults for various tokens.

    +
    +
    • +
-
-
- - - ) -} +
+ + + + \ No newline at end of file From 82dec9e2c9de9d62ef85a1dd2d9a78ce2a148068 Mon Sep 17 00:00:00 2001 From: Yogesh Singh Date: Sat, 13 Dec 2025 17:48:08 +0530 Subject: [PATCH 2/3] Chnages made as asked with same color of btn after hover --- app/page.tsx | 302 +++------------------------------------------------ 1 file changed, 13 insertions(+), 289 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 4f7d36c..d3454f4 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,6 +4,7 @@ hodlCoin Staking Platform + + -
-
-
-
-
-
- +
LOGO
- +

hodlCoin Staking Platform

- +

- Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!
- Unstaking fees benefit vault creators and those who keep staking longer. + Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!

- +

Choose the blockchain where you would like to stake:

- +
@@ -414,118 +249,7 @@
- -
-
- -
-
-
📄
-
- -
-
How hodlCoin Works
-
- -

- HodlCoin is a staking protocol that encourages staking ("hodling") assets for long periods of time. When hodling, users deposit coins of a given asset in a vault and receive a proportional amount of corresponding hodlCoins. -

- -

- When unhodling, users must pay an unstaking fee that benefits the vault's creator and users who continue hodling longer. Moreover, anyone (especially vault creators) can distribute rewards to hodlers, to further incentivize hodling. -

- - - Read the Research Paper → - -
-
- - -
-
Why hodlCoin
-
- -
- -
-
For Vault Creators
-
- -
    -
  • -
    -
    -

    Reward your Loyal Tokenholders

    -

    Efficiently distribute rewards to all your tokenholders with a single transaction.

    -
    -
    • -
  • -
    -
    -

    Signal your Long-Term Commitment

    -

    Stake your own tokens in a vault with a high unstaking fee, to show your community that you are holding for the long run.

    -
    -
    • -
  • -
    -
    -

    Earn Unstaking Fees

    -

    Receive a portion of fees when users unstake early.

    -
    -
    • -
  • -
    -
    -

    Protect your Token from Sell Pressure

    -

    The unstaking fee disincentivizes sellers and incentivizes holders without inflation.

    -
    -
    • -
-
- - -
-
For Stakers
-
- -
    -
  • -
    -
    -

    Earn from Others' Impatience

    -

    Benefit from unstaking fees paid by users who exit early.

    -
    -
    • -
  • -
    -
    -

    Long-Term Value Growth

    -

    The price of the hodlCoin is mathematically guaranteed to grow w.r.t. the price of the underlying coin, if you hodl longer than others.

    -
    -
    • -
  • -
    -
    -

    Receive Rewards

    -

    Get additional rewards distributed by vault creators who want to incentivize staking.

    -
    -
    • -
  • -
    -
    -

    Flexible Participation

    -

    Stake and unstake at any time, choosing from a wide variety of vaults for various tokens.

    -
    -
    • -
-
-
-
-
- - \ No newline at end of file + From c8efcbd52c360462a0dc4de154b775d3d3c5729f Mon Sep 17 00:00:00 2001 From: Yogesh Singh Date: Sat, 13 Dec 2025 17:55:56 +0530 Subject: [PATCH 3/3] Chnages made as asked with same color of btn after hover --- app/page.tsx | 134 +++------------------------------------------------ 1 file changed, 7 insertions(+), 127 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index d3454f4..a85443f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -19,7 +19,6 @@ overflow-x: hidden; } - /* Matrix Effect Canvas */ #matrixCanvas { position: fixed; top: 0; @@ -30,69 +29,13 @@ opacity: 0.15; } - /* Hero Section */ .hero-section { position: relative; min-height: 90vh; display: flex; - flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1rem; - margin-top: 1rem; - overflow: hidden; - } - - .gradient-bg { - position: absolute; - inset: 0; - background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9)); - z-index: 1; - } - - .glow-effects { - position: absolute; - inset: 0; - z-index: 2; - opacity: 0.3; - } - - .glow { - position: absolute; - border-radius: 50%; - filter: blur(60px); - animation: pulse 4s ease-in-out infinite; - } - - .glow-1 { - top: 25%; - right: 25%; - width: 160px; - height: 160px; - background: rgba(147, 51, 234, 0.2); - } - - .glow-2 { - bottom: 33%; - left: 25%; - width: 128px; - height: 128px; - background: rgba(168, 85, 247, 0.15); - animation-delay: 2s; - } - - .glow-3 { - top: 50%; - left: 33%; - width: 96px; - height: 96px; - background: rgba(192, 132, 252, 0.1); - animation-delay: 4s; - } - - @keyframes pulse { - 0%, 100% { opacity: 0.3; transform: scale(1); } - 50% { opacity: 0.5; transform: scale(1.1); } } .hero-content { @@ -104,30 +47,6 @@ padding: 0 2rem; } - .logo-container { - margin-bottom: 2rem; - animation: float 3s ease-in-out infinite; - } - - @keyframes float { - 0%, 100% { transform: translateY(0px); } - 50% { transform: translateY(-10px); } - } - - .logo-placeholder { - width: 128px; - height: 64px; - margin: 0 auto; - background: linear-gradient(135deg, #7c3aed, #a855f7); - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.5rem; - font-weight: bold; - color: white; - } - h1 { font-size: 3.75rem; font-weight: 800; @@ -141,10 +60,6 @@ font-size: 1.125rem; color: #4b5563; margin-bottom: 3rem; - line-height: 1.75; - max-width: 800px; - margin-left: auto; - margin-right: auto; } h2 { @@ -161,7 +76,6 @@ gap: 1rem; justify-content: center; flex-wrap: wrap; - margin-top: 2rem; } .btn { @@ -171,52 +85,23 @@ border: none; border-radius: 50px; cursor: pointer; - transition: all 0.3s ease; - position: relative; - overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3); } - /* ✅ Hover keeps SAME color */ + /* ✅ SAME color on hover */ .btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 15px 40px rgba(124, 58, 237, 0.4); background: linear-gradient(135deg, #7c3aed, #a855f7); } - .btn::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), transparent); - opacity: 0; - transition: opacity 0.3s; - } - - .btn:hover::before { - opacity: 1; - } - - /* Content Section */ - .content-section { - position: relative; - padding: 6rem 1rem; - background: #ffffff; - z-index: 3; - } - - .container { - max-width: 1280px; - margin: 0 auto; - padding: 0 2rem; - } - @media (max-width: 768px) { h1 { font-size: 2.5rem; } h2 { font-size: 1.75rem; } - .button-container { flex-direction: column; width: 100%; } + .button-container { flex-direction: column; } .btn { width: 100%; } } @@ -226,15 +111,8 @@
-
-
-
-
LOGO
-
-

hodlCoin Staking Platform

-

Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!

@@ -258,8 +136,8 @@ const letters = '01'; const fontSize = 14; - const columns = canvas.width / fontSize; - const drops = Array(Math.floor(columns)).fill(1); + let columns = canvas.width / fontSize; + let drops = Array(Math.floor(columns)).fill(1); function drawMatrix() { ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'; @@ -284,6 +162,8 @@ window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; + columns = canvas.width / fontSize; + drops = Array(Math.floor(columns)).fill(1); });