diff --git a/packages/nextjs/app/dapp/buy-tickets/page.tsx b/packages/nextjs/app/dapp/buy-tickets/page.tsx index ae260ace..d53076ba 100644 --- a/packages/nextjs/app/dapp/buy-tickets/page.tsx +++ b/packages/nextjs/app/dapp/buy-tickets/page.tsx @@ -5,7 +5,6 @@ import { ArrowLeft } from "lucide-react"; import { motion } from "framer-motion"; import { useRouter } from "next/navigation"; -import Image from "next/image"; import { Abi, useContract } from "@starknet-react/core"; import { useTransactor } from "~~/hooks/scaffold-stark/useTransactor"; import { LOTT_CONTRACT_NAME } from "~~/utils/Constants"; @@ -397,149 +396,144 @@ export default function BuyTicketsPage() { return (
-
- {/* Left Column - Main Content */} -
+
+ {/* Main Content - Centered */} +
-

- {t("buyTickets.title")} -

- - {/* Next Draw */} -
-

{t("buyTickets.nextDraw")}

- - {jackpotAmount} - - - {/* Countdown - Nuevo componente basado en bloques */} -
- + {/* Gradient Background Overlay */} +
+ + {/* Animated Background Glow */} +
+ +
+

+ {t("buyTickets.title")} +

+ + {/* Next Draw */} +
+

+ {t("buyTickets.nextDraw")} +

+ + {jackpotAmount} + + + {/* Countdown - Nuevo componente basado en bloques */} +
+ +
-
- {/* User Balance Display */} -
-
-
-
- - - - + {/* User Balance Display */} +
+
+
+
+ + + + +
+

+ {t("buyTickets.yourBalance")} +

-

- {t("buyTickets.yourBalance")} +

+ {userBalanceFormatted} $TRKP

-

- {userBalanceFormatted} $TRKP -

+ {!isDrawActive && ( +

+ ⚠️ {t("buyTickets.drawNotActive")} +

+ )} + {!contractsReady && ( +

+ ⚠️ {t("buyTickets.contractsNotReady")} +

+ )}
- {!isDrawActive && ( -

- ⚠️ {t("buyTickets.drawNotActive")} -

- )} - {!contractsReady && ( -

- ⚠️ {t("buyTickets.contractsNotReady")} -

- )} -
- {/* Ticket Controls */} - - - {/* Ticket Selection */} -
- {Array.from({ length: ticketCount }).map((_, idx) => { - const ticketId = idx + 1; - return ( - - ); - })} -
+ {/* Ticket Controls */} + + + {/* Ticket Selection */} +
+ {Array.from({ length: ticketCount }).map((_, idx) => { + const ticketId = idx + 1; + return ( + + ); + })} +
- {/* Purchase Summary (usa precio on-chain) */} - {/* Purchase Summary (usa precio on-chain) */} - + {/* Purchase Summary (usa precio on-chain) */} + {/* Purchase Summary (usa precio on-chain) */} + +
- - {/* Right Column - Illustration */} -
-
- Jackpot Illustration -

- {/* Puedes agregar aquí más textos traducibles si lo deseas */} -

-
-
diff --git a/packages/nextjs/app/dapp/claim/page.tsx b/packages/nextjs/app/dapp/claim/page.tsx index 3934db7d..4d1cd8ed 100644 --- a/packages/nextjs/app/dapp/claim/page.tsx +++ b/packages/nextjs/app/dapp/claim/page.tsx @@ -19,8 +19,8 @@ export default function ClaimPage() { transition={{ duration: 0.6 }} >
- -

+ +

{t("navigation.claim")}

@@ -28,18 +28,23 @@ export default function ClaimPage() { {/* Coming Soon Message */} -
+ {/* Gradient Background Overlay */} +
-
-

+ {/* Animated Background Glow */} +

+ +
+

{t("comingSoon.message", "Coming Soon")}

-

+

{t( "comingSoon.description", "This feature will be available soon. Stay tuned!", diff --git a/packages/nextjs/app/dapp/dashboard/page.tsx b/packages/nextjs/app/dapp/dashboard/page.tsx index e0b62cdb..c4f5d6f0 100644 --- a/packages/nextjs/app/dapp/dashboard/page.tsx +++ b/packages/nextjs/app/dapp/dashboard/page.tsx @@ -22,6 +22,7 @@ export default function DashboardPage() { const navigate = useRouter(); const { scrollY } = useScroll(); const { status } = useAccount(); + const isConnected = status === "connected"; const heroY = useTransform(scrollY, [0, 500], [0, -100]); const prizeDistributionY = useTransform(scrollY, [0, 2000], [0, -50]); @@ -79,7 +80,9 @@ export default function DashboardPage() {

-
+
{/* Lottery Process */} @@ -87,6 +90,7 @@ export default function DashboardPage() { variant="card" heroY={heroY} jackpot={jackpot} + isConnected={isConnected} showSecurityInfo={showSecurityInfo} targetDate={targetDate} onBuyTicket={() => handleRoute("/dapp/buy-tickets")} @@ -101,13 +105,15 @@ export default function DashboardPage() { useBlockBasedCountdown={true} /> - + {isConnected && }
-
- - -
+ {isConnected && ( +
+ + +
+ )}
diff --git a/packages/nextjs/app/dapp/layout.tsx b/packages/nextjs/app/dapp/layout.tsx index f5d4994f..9921a1a0 100644 --- a/packages/nextjs/app/dapp/layout.tsx +++ b/packages/nextjs/app/dapp/layout.tsx @@ -20,7 +20,10 @@ export default function DappLayout({ } | null>(null); return ( -
+
+ {/* Fondo degradado igual que landing page */} +
+ setNotification(null)} /> )} -
{children}
+
+ {children} +
); diff --git a/packages/nextjs/app/dapp/mint/page.tsx b/packages/nextjs/app/dapp/mint/page.tsx index c8b7cef4..d8de4e79 100644 --- a/packages/nextjs/app/dapp/mint/page.tsx +++ b/packages/nextjs/app/dapp/mint/page.tsx @@ -22,10 +22,10 @@ export default function MintPage() { {/* Page Header */}
-

+

Mint STRKP Tokens

-

+

Convert your STRK tokens to STRKP tokens to participate in our gaming ecosystem.

@@ -50,88 +50,118 @@ export default function MintPage() {
-
-

- About STRKP Tokens -

-

- STRKP tokens are the native gaming currency of our platform. These - tokens are required to participate in lottery games, purchase - tickets, and access premium features within the StarkLotto - ecosystem. -

-

- The minting process converts your STRK tokens at a 1:1 ratio, with a - minimal fee of 0.5% to support platform development and maintenance. -

+
+ {/* Gradient Background Overlay */} +
+ + {/* Animated Background Glow */} +
+ +
+

+ About STRKP Tokens +

+

+ STRKP tokens are the native gaming currency of our platform. These + tokens are required to participate in lottery games, purchase + tickets, and access premium features within the StarkLotto + ecosystem. +

+

+ The minting process converts your STRK tokens at a 1:1 ratio, with + a minimal fee of 0.5% to support platform development and + maintenance. +

+
-
-

- Minting Guidelines -

-
    -
  • - • - Minting is processed instantly on-chain -
    • -
  • - • - 1 STRK = 1 STRKP (minus 0.5% fee) -
    • -
  • - • - No minimum amount required -
    • -
  • - • - STRKP tokens can be used immediately for gaming -
    • -
  • - • - Secure and transparent smart contract execution -
    • -
+
+ {/* Gradient Background Overlay */} +
+ + {/* Animated Background Glow */} +
+ +
+

+ Minting Guidelines +

+
    +
  • + • + Minting is processed instantly on-chain +
    • +
  • + • + 1 STRK = 1 STRKP (minus 0.5% fee) +
    • +
  • + • + No minimum amount required +
    • +
  • + • + STRKP tokens can be used immediately for gaming +
    • +
  • + • + Secure and transparent smart contract execution +
    • +
+
{/* Additional information section */} -
-

- Why Mint STRKP? -

-
-
-
- 🎮 +
+ {/* Gradient Background Overlay */} +
+ + {/* Animated Background Glow */} +
+ +
+

+ Why Mint STRKP? +

+
+
+
+ 🎮 +
+

Gaming Access

+

+ Required currency for all lottery games and premium features +

-

- Gaming Access -

-

- Required currency for all lottery games and premium features -

-
-
-
- ⚡ +
+
+ ⚡ +
+

+ Instant Conversion +

+

+ Quick and seamless token conversion with immediate availability +

-

- Instant Conversion -

-

- Quick and seamless token conversion with immediate availability -

-
-
-
- 🔒 +
+
+ 🔒 +
+

Secure Process

+

+ Protected by smart contracts on the Starknet blockchain +

-

- Secure Process -

-

- Protected by smart contracts on the Starknet blockchain -

diff --git a/packages/nextjs/app/dapp/unmint/page.tsx b/packages/nextjs/app/dapp/unmint/page.tsx index fa96f71c..faf79dd7 100644 --- a/packages/nextjs/app/dapp/unmint/page.tsx +++ b/packages/nextjs/app/dapp/unmint/page.tsx @@ -22,10 +22,10 @@ export default function UnmintPage() { {/* Page Header */}
-

+

Unmint STRKP Tokens

-

+

Convert your STRKP prize tokens back to STRK. Only tokens earned as lottery prizes are eligible for conversion.

@@ -53,68 +53,96 @@ export default function UnmintPage() {
{/* How it works */} -
-

- How Unminting Works -

-
-
-
- 1 +
+ {/* Gradient Background Overlay */} +
+ + {/* Animated Background Glow */} +
+ +
+

+ How Unminting Works +

+
+
+
+ + 1 + +
+

+ Select a percentage (25%, 50%, 75%, or 100%) of your + convertible STRKP balance +

-

- Select a percentage (25%, 50%, 75%, or 100%) of your - convertible STRKP balance -

-
-
-
- 2 +
+
+ + 2 + +
+

A 3% fee is deducted from the conversion amount

-

A 3% fee is deducted from the conversion amount

-
-
-
- 3 +
+
+ + 3 + +
+

Receive STRK tokens at a 1:1 rate (minus fees)

-

Receive STRK tokens at a 1:1 rate (minus fees)

{/* Important Notes */} -
-

- Important Notes -

-
-
-
-

- Prize Tokens Only: Only STRKP tokens earned - as lottery prizes can be unminted -

-
-
-
-

- Gameplay Tokens: STRKP tokens minted for - gameplay are NOT convertible -

-
-
-
-

- Conversion Fee: A 3% fee applies to all - unmint operations -

-
-
-
-

- Percentage Selection: Choose from predefined - percentages - manual amounts are not allowed -

+
+ {/* Gradient Background Overlay */} +
+ + {/* Animated Background Glow */} +
+ +
+

+ Important Notes +

+
+
+
+

+ Prize Tokens Only: Only STRKP tokens earned + as lottery prizes can be unminted +

+
+
+
+

+ Gameplay Tokens: STRKP tokens minted for + gameplay are NOT convertible +

+
+
+
+

+ Conversion Fee: A 3% fee applies to all + unmint operations +

+
+
+
+

+ Percentage Selection: Choose from + predefined percentages - manual amounts are not allowed +

+
diff --git a/packages/nextjs/app/not-found.tsx b/packages/nextjs/app/not-found.tsx index 198f80d4..c5bd152a 100644 --- a/packages/nextjs/app/not-found.tsx +++ b/packages/nextjs/app/not-found.tsx @@ -19,12 +19,12 @@ export default function NotFound() { animate={{ scale: 1, opacity: 1 }} transition={{ duration: 0.6, ease: "easeOut" }} > -
+
404
{/* Floating dice around 404 */} - {/* Glow effect */} -
+ {/* Gradient Background Overlay */} +
-
-

+ {/* Animated Background Glow */} +
+ +
+

{t("error404.suggestions.title", "What would you like to do?")}

{/* Go Home Button */} - + @@ -109,7 +114,7 @@ export default function NotFound() { {/* Go Back Button */} window.history.back()} - className="group relative flex items-center gap-3 px-6 py-3 bg-black/50 border border-[#00FFA3]/30 text-white font-semibold rounded-lg transition-all duration-300 hover:border-[#00FFA3] hover:bg-[#00FFA3]/10 min-w-[180px]" + className="group relative flex items-center gap-3 px-6 py-3 bg-white/5 border border-white/20 text-white/80 font-semibold rounded-lg transition-all duration-300 hover:border-starkYellow/30 hover:bg-starkYellow/10 hover:text-starkYellow min-w-[180px]" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > @@ -137,7 +142,7 @@ export default function NotFound() { {[...Array(6)].map((_, i) => (
- -

+ +

{t("lastDraw.title")}

@@ -136,12 +136,12 @@ export function LastDrawResults() { {/* Header */}
-

- +

+ {t("lastDraw.title")}

{drawResult && ( -

+

{formatDrawDate(drawResult.drawDate)}

)} @@ -153,19 +153,19 @@ export function LastDrawResults() { )} {isPolling && !isRefreshing && ( -
+
{t("status.live")}
)} {lastFetch && ( -
+
{t("status.updated")} {new Date(lastFetch).toLocaleTimeString()}
)} @@ -184,13 +184,13 @@ export function LastDrawResults() { className="space-y-4" > {/* Jackpot */} -

+

{formatCurrency(drawResult.jackpotAmount)}

{/* Winning Numbers */}
-

+

{t("lastDraw.winningNumbers")}

@@ -200,7 +200,7 @@ export function LastDrawResults() { initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ delay: index * 0.1 }} - className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-sm font-bold text-white" + className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light text-sm font-bold text-black" > {number.toString().padStart(2, "0")} @@ -210,8 +210,8 @@ export function LastDrawResults() { {/* Results Info */}
-
-

+
+

{t("lastDraw.results")}

@@ -221,29 +221,29 @@ export function LastDrawResults() { : t("lastDraw.winners")}

-
-

Draw Status

-

+

+

Draw Status

+

{drawResult.status}

{/* Draw Number */} -
- +
+ Draw #{drawResult.drawNumber}
) : ( -

{t("status.noResults")}

+

{t("status.noResults")}

)} {/* Footer */} -
+
{txError &&

{txError}

} {txSuccess &&

{txSuccess}

} diff --git a/packages/nextjs/components/buy-tickets/TicketControls.tsx b/packages/nextjs/components/buy-tickets/TicketControls.tsx index 122dfb6a..e596b8aa 100644 --- a/packages/nextjs/components/buy-tickets/TicketControls.tsx +++ b/packages/nextjs/components/buy-tickets/TicketControls.tsx @@ -22,7 +22,7 @@ export default function TicketControls({
Ticket #{ticketId}

onGenerateRandom(ticketId)} - className="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-lg flex items-center gap-1" + className="bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow px-3 py-1 rounded-lg flex items-center gap-1 hover:from-starkYellow hover:to-starkYellow-light hover:text-black transition-all duration-300" + style={{ boxShadow: "0 2px 8px rgba(255,214,0,0.2)" }} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > diff --git a/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx b/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx index 9c95f557..4eeed3c3 100644 --- a/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx +++ b/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx @@ -9,24 +9,32 @@ export default function BalancesCard({ strkp, strk, loading = false }: Props) { const { t } = useTranslation(); return ( - -

- {t("dashboard.balances.title")} -

-
- {loading ? ( - <> - - - - ) : ( - <> - - - - )} +
+ {/* Gradient Background Overlay */} +
+ +
+

+ {t("dashboard.balances.title")} +

+
+ {loading ? ( + <> + + + + ) : ( + <> + + + + )} +
- +
); } @@ -40,15 +48,19 @@ function Row({ loading?: boolean; }) { return ( -
-
{label}
+
+
+ {label} +
{loading ? ( -
+
) : ( <> -
{value}
- +
+ {value} +
+ )}
diff --git a/packages/nextjs/components/dashboard/dashboard/LastDrawResultsCard.tsx b/packages/nextjs/components/dashboard/dashboard/LastDrawResultsCard.tsx index eec16ab2..fb948b1f 100644 --- a/packages/nextjs/components/dashboard/dashboard/LastDrawResultsCard.tsx +++ b/packages/nextjs/components/dashboard/dashboard/LastDrawResultsCard.tsx @@ -1,6 +1,6 @@ "use client"; -import Card from "~~/components/dashboard/dashboard/Card"; +import { motion } from "framer-motion"; import { LastDrawResults } from "~~/components/LastDrawResults"; interface LastDrawResultsCardProps { @@ -12,9 +12,23 @@ export default function LastDrawResultsCard({ }: LastDrawResultsCardProps) { if (variant === "card") { return ( - - - + + {/* Gradient Background Overlay */} +
+ + {/* Animated Background Glow */} +
+ +
+ +
+ ); } diff --git a/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx b/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx index c2a529d7..dc47d5eb 100644 --- a/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx +++ b/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx @@ -12,57 +12,79 @@ export default function NotificationsCard({ list }: Props) { const { t } = useTranslation(); return ( - -
- -

- {t("dashboard.notifications.title")} -

-
+
+ {/* Gradient Background Overlay */} +
-
- {list.length === 0 ? ( -
- {t("dashboard.notifications.empty")} +
+
+
+
- ) : ( - list.map((n) => ( -
-
- {n.type === "prize" ? ( - - ) : ( - - )} -
{n.title}
-
+

+ {t("dashboard.notifications.title")} +

+
-
{n.desc}
- - {n.cta && ( - - + {list.length === 0 ? ( +
+ {t("dashboard.notifications.empty")} +
+ ) : ( + list.map((n) => ( +
+
+
- {n.cta.label} - - - )} -
- )) - )} + {n.type === "prize" ? ( + + ) : ( + + )} +
+
+ {n.title} +
+
+ +
+ {n.desc} +
+ + {n.cta && ( + + + {n.cta.label} + + + )} +
+ )) + )} +
- +
); } diff --git a/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx b/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx index a1e14318..96260ebc 100644 --- a/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx +++ b/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx @@ -13,54 +13,66 @@ export default function RecentActivityCard({ const { t } = useTranslation(); return ( - -
- -

- {t("dashboard.recentActivity.title")} -

-
+
+ {/* Gradient Background Overlay */} +
- - {items.length === 0 ? ( - -
- {t("dashboard.recentActivity.empty")} -
- - ) : ( -
- {items.map((i) => ( - -
-
-
- -
-
-
- {i.amount} {i.unit} +
+
+
+ +
+

+ {t("dashboard.recentActivity.title")} +

+
+ + + {items.length === 0 ? ( + +
+ {t("dashboard.recentActivity.empty")} +
+ + ) : ( +
+ {items.map((i) => ( + +
+
+
+ +
+
+
+ {i.amount} {i.unit} +
+
+ {i.when} +
-
{i.when}
+
+
+ {i.status}
-
- {i.status} -
-
- - ))} -
- )} - - + + ))} +
+ )} + +
+
); } diff --git a/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx b/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx index 8b8eb2ca..65a11fa7 100644 --- a/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx +++ b/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx @@ -4,6 +4,7 @@ import { Coins, Ticket, Gift, ArrowLeftRight } from "lucide-react"; import Link from "next/link"; import { Stagger, Item } from "~~/components/ui/motion"; import { useTranslation } from "react-i18next"; +import { useAccount } from "@starknet-react/core"; type Props = { hasStrkp: boolean; @@ -14,6 +15,8 @@ type Props = { export default function StepsWizard(_: Props) { const { t } = useTranslation(); + const { status } = useAccount(); + const isConnected = status === "connected"; const steps = [ { @@ -51,41 +54,51 @@ export default function StepsWizard(_: Props) { ]; return ( - -

- {t("dashboard.steps.title")} -

- - {steps.map((s) => ( - -
-
-
- - {t("dashboard.steps.step", { id: s.id })} - - {s.icon} -
-
- {s.title} +
+ {/* Gradient Background Overlay */} +
+ +
+

+ {t("dashboard.steps.title")} +

+ + {steps.map((s) => ( + +
+
+
+ + {t("dashboard.steps.step", { id: s.id })} + + + {s.icon} + +
+
+ {s.title} +
+
+ {s.desc} +
-
{s.desc}
-
- - {s.action} - -
- - ))} - - + {isConnected && ( + + {s.action} + + )} +
+ + ))} + +
+
); } diff --git a/packages/nextjs/components/dashboard/pool/page.tsx b/packages/nextjs/components/dashboard/pool/page.tsx index 34771cc5..379e4496 100644 --- a/packages/nextjs/components/dashboard/pool/page.tsx +++ b/packages/nextjs/components/dashboard/pool/page.tsx @@ -9,95 +9,136 @@ export default function TotalPool() { const { t } = useTranslation(); const [pool, setPool] = useState(1245.67); const [usdValue, setUsdValue] = useState(48230); - const [remainingTime, setRemainingTime] = useState(""); + const [remainingTime, setRemainingTime] = useState("Calculando..."); useEffect(() => { - const targetDate = new Date(); - targetDate.setDate(targetDate.getDate() + 2); - targetDate.setHours(targetDate.getHours() + 14); - targetDate.setMinutes(targetDate.getMinutes() + 2); + let interval: NodeJS.Timeout; - const interval = setInterval(() => { - const now = new Date().getTime(); - const distance = targetDate.getTime() - now; + const startCountdown = () => { + // Fecha objetivo: 2 días, 8 horas, 42 minutos desde ahora + const endTime = + Date.now() + + 2 * 24 * 60 * 60 * 1000 + + 8 * 60 * 60 * 1000 + + 42 * 60 * 1000 + + 30 * 1000; - if (distance < 0) { - clearInterval(interval); - setRemainingTime(t("dashboard.pool.ended")); - return; - } + const updateTimer = () => { + const now = Date.now(); + const timeLeft = endTime - now; + + if (timeLeft <= 0) { + setRemainingTime("Draw Ended"); + clearInterval(interval); + return; + } + + const totalSeconds = Math.floor(timeLeft / 1000); + const days = Math.floor(totalSeconds / (24 * 3600)); + const hours = Math.floor((totalSeconds % (24 * 3600)) / 3600); + const minutes = Math.floor((totalSeconds % 3600) / 60); + const seconds = totalSeconds % 60; + + // Formatear con padding de ceros + const pad = (num: number) => num.toString().padStart(2, "0"); - const days = Math.floor(distance / (1000 * 60 * 60 * 24)); - const hours = Math.floor( - (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60), - ); - const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + // Formato completo siempre: días, horas, minutos, segundos + const display = `${days}d ${pad(hours)}h ${pad(minutes)}m ${pad(seconds)}s`; - setRemainingTime( - `${days}${t("dashboard.pool.days")} ${hours}${t("dashboard.pool.hours")} ${minutes}${t("dashboard.pool.minutes")}`, - ); - }, 1000); + setRemainingTime(display); + }; - return () => clearInterval(interval); - }, [t]); + // Ejecutar inmediatamente + updateTimer(); + + // Ejecutar cada segundo + interval = setInterval(updateTimer, 1000); + }; + + startCountdown(); + + return () => { + if (interval) { + clearInterval(interval); + } + }; + }, []); return ( - - {t("dashboard.pool.title")} - - - - + + {/* Animated Background Glow */} +
+ +
+ + ACCUMULATED POOL + + + + + + STRK + + + + + + ≈{" "} + + + {" "} + USD + + + - STRK - - - - - ≈ USD - - - - ⏳ {t("dashboard.pool.drawIn", { time: remainingTime })} - +
+
+ Draw in +
+
+ {remainingTime || "Calculando..."} +
+
+ +
); } diff --git a/packages/nextjs/components/landing-page/layout/hader.tsx b/packages/nextjs/components/landing-page/layout/hader.tsx index 35615d68..4cdef84a 100644 --- a/packages/nextjs/components/landing-page/layout/hader.tsx +++ b/packages/nextjs/components/landing-page/layout/hader.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Menu, X, ChevronRight } from "lucide-react"; import { Button } from "../../ui/button"; +import { StarkLottoLogo } from "../../ui/StarkLottoLogo"; import { useRouter } from "next/navigation"; const navLinks = [ @@ -48,21 +49,9 @@ export default function Header() { >
{/* Logo */} - +
+ goTo("#hero")} /> +
{/* Desktop Nav */}