From 8f997b2f86a5b788c3813032d4cee4ba616c1c78 Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Wed, 17 Sep 2025 15:35:06 +0200 Subject: [PATCH] id --- src/app/(main)/page.tsx | 10 ++++----- src/app/layout.tsx | 3 ++- src/components/NavLinks.tsx | 10 ++++----- src/components/SmoothScrollProvider.tsx | 8 +++++++ src/hooks/use-smooth-scroll.ts | 28 +++++++++++++++++++++++++ 5 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 src/components/SmoothScrollProvider.tsx create mode 100644 src/hooks/use-smooth-scroll.ts diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 97e2743..b2e933e 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -20,19 +20,19 @@ export default function Home() {
-
+
-
+
-
+
-
+
-
+
diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6e6ef92..159df5e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import { type Metadata } from 'next' import { Mulish } from 'next/font/google' import clsx from 'clsx' +import SmoothScrollProvider from '@/components/SmoothScrollProvider' import '@/styles/tailwind.css' @@ -26,7 +27,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ) } diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx index b0cc82f..cd50bcf 100644 --- a/src/components/NavLinks.tsx +++ b/src/components/NavLinks.tsx @@ -9,11 +9,11 @@ export function NavLinks() { let timeoutRef = useRef(null) return [ - ['About', '/#stack-section'], - ['Network', '/#world-map'], - ['Deploy', '/#steps'], - ['LLMs', '/#companies'], - ['Features', '/#use-cases'], + ['About', '/#about'], + ['Network', '/#network'], + ['Deploy', '/#deploy'], + ['LLMs', '/#llms'], + ['Features', '/#features'], ['Get Started', '/#get-started'], ].map(([label, href], index) => ( {children}; +} diff --git a/src/hooks/use-smooth-scroll.ts b/src/hooks/use-smooth-scroll.ts new file mode 100644 index 0000000..6cb5881 --- /dev/null +++ b/src/hooks/use-smooth-scroll.ts @@ -0,0 +1,28 @@ +import { useEffect } from 'react'; + +export const useSmoothScroll = () => { + useEffect(() => { + const handleLinkClick = (e: MouseEvent) => { + const target = e.target as HTMLAnchorElement; + const href = target.getAttribute('href'); + + if (href && href.startsWith('#')) { + e.preventDefault(); + const targetId = href.substring(1); + const targetElement = document.getElementById(targetId); + + if (targetElement) { + targetElement.scrollIntoView({ + behavior: 'smooth', + }); + } + } + }; + + document.addEventListener('click', handleLinkClick); + + return () => { + document.removeEventListener('click', handleLinkClick); + }; + }, []); +};