3 files changed, 17 insertions, 3 deletions
diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro
index 88e6d7b..9463edc 100644
--- a/apps/website/src/components/base/Footer.astro
+++ b/apps/website/src/components/base/Footer.astro
@@ -2,10 +2,15 @@
 import Icon from '@components/icons/Icon.astro';
 import Logo from '@components/logos/Logo.astro';
 import configConst from '@config';
+import type { HTMLAttributes } from 'astro/types';
 import Link from './Link.astro';
+
+interface Props extends HTMLAttributes<'footer'> {}
+
+const props = Astro.props;
 ---
 
-<footer class="section flex justify-center items-center bg-blue-100 mt-4 pt-20 pb-8 px-20">
+<footer {...props} class="section flex justify-center items-center bg-blue-100 -mt-40 pt-20 pb-8 px-20">
 	<div class="max-w-[1024px] w-full flex flex-col gap-y-24">
 		<div class="flex flex-col gap-y-20 justify-center items-start md:flex-row md:items-start md:justify-between">
 			<div class="flex-1 flex flex-col gap-y-3 text-blue-gray">
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index c463a16..5f3cc1d 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<'section'> {
 	wrapperClass?: string
 	wFull?: boolean
 	hFull?: boolean
+	scrollSection?: boolean
 }
 
 const {
@@ -15,6 +16,7 @@ const {
 	wrapperClass = '',
 	wFull = true,
 	hFull = false,
+	scrollSection = true,
 	...props
 } = Astro.props;
 
@@ -24,9 +26,13 @@ const twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-c
 	${colReverse ? 'flex-col-reverse' : 'flex-col'} lg:flex-row items-center`;
 
 const className = `max-w-[${maxWidth}] ${hFull ? 'min-h-screen' : 'h-auto'} ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 xl:px-0 flex gap-x-20 gap-y-4${twoColumn ? twoColumnClasses : ''}${props.class ? ` ${props.class}` : ''}`;
+
+const sectionAttr = {
+	...(scrollSection ? { 'data-scroll-section': '' } : {}),
+};
 ---
 
-<section class={`w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
+<section {...sectionAttr} class={`w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
 	<div class={className} {...props}>
 		{twoColumn
 			? (
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index 944d88d..bd2c2b5 100644
--- a/apps/website/src/components/base/navbar/Navbar.astro
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -1,10 +1,13 @@
 ---
 import type { Config } from '@webtypes/Config';
+import type { HTMLAttributes } from 'astro/types';
 import config from 'config';
 import NavbarElement from '../navbar/NavbarElement.astro';
 
+interface Props extends HTMLAttributes<'div'> {}
+const props = Astro.props;
 ---
-<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar text-[16px]">
+<div {...props} class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar text-[16px]">
 	<nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center">
 		<ul class="flex flex-row justify-start gap-4 max-md:mt-4">
 			{(config as Config).navbar.left.map((element, index) => (