ok

src/components/AboutUsSection.js

@@ -9,7 +9,7 @@ import useInView from '../hooks/useInView';
 const AboutUsSection = () => {
   const { ref, inView } = useInView();
   return (
-    <section id="about" ref={ref} className={`${styles.aboutSection} ${shared.revealSection} ${inView ? shared.isVisible : ''}`}>
+    <section id="about" ref={ref} style={{scrollMarginTop: '65px'}} className={`${styles.aboutSection} ${shared.revealSection} ${inView ? shared.isVisible : ''}`}>
       <AnimatedBackground /> {/* Komponen animasi sebagai latar belakang */}
       <div className={styles.contentWrapper}>
         <Container>

src/components/AboutUsSection.module.css

@@ -2,7 +2,6 @@
   padding: 80px 0; /* Ditinggikan dari 60px */
   position: relative;
   background-color: #0f172a; /* Latar belakang biru gelap (slate-900) */
-  overflow: hidden; /* Mencegah canvas keluar dari section */
 }
 
 /* Menghapus .blueprintGrid */

src/components/AcademySection.js

@@ -43,7 +43,7 @@ const AcademySection = ({setSelectedProduct, setShowedModal, courseSectionRef, s
   const { ref, inView } = useInView();
   return (
 
-    <section id="academy" className={`services pt-5 ${styles.academySection} ${styles.revealSection} ${inView ? styles.isVisible : ''}`} ref={(el) => {
+    <section id="academy" style={{scrollMarginTop: '65px' }}  className={`services pt-5 ${styles.academySection} ${styles.revealSection} ${inView ? styles.isVisible : ''}`} ref={(el) => {
       if (typeof courseSectionRef === 'function') courseSectionRef(el);
       if (ref) ref.current = el;
     }}>

src/components/FAQSection.js

@@ -116,7 +116,7 @@ const FAQSection = () => {
   ];
 
   return (
-    <section id="faq" className={styles.faqSection}>
+    <section id="faq" style={{scrollMarginTop: '65px'}} className={styles.faqSection}>
       <Container>
         <Row>
           <Col>

src/components/FAQSection.module.css

@@ -103,7 +103,7 @@
 }
 
 .contentInner {
-  padding: 0 20px 20px;
+  padding: 15px 20px 20px;
 }
 
 .answer {

src/components/Footer.js

@@ -52,18 +52,7 @@ const Footer = () => {
               </div>
             </div>
           </Col>
-          
-          <Col lg={3} md={6} className={styles.footerColumn}>
-            <h3 className={styles.footerTitle}>Quick Links</h3>
-            <ul className={styles.footerLinks}>
-              <li><a href="#home">Home</a></li>
-              <li><a href="#products">Products</a></li>
-              <li><a href="#academy">Academy</a></li>
-              <li><a href="#about">About Us</a></li>
-              <li><a href="#contact">Contact</a></li>
-            </ul>
-          </Col>
-          
+
           <Col lg={3} md={6} className={styles.footerColumn}>
             <h3 className={styles.footerTitle}>Newsletter</h3>
             <div className={styles.newsletter}>

src/components/Footer.module.css

@@ -8,8 +8,8 @@
 
 .footerContent {
   display: flex;
+  justify-content: space-between;
   flex-wrap: wrap;
-  margin-bottom: 40px;
 }
 
 .footerColumn {

src/components/Header.js

@@ -20,7 +20,7 @@ const Header = ({ username, scrollToProduct, scrollToCourse, setShowedModal, han
     navigate('/');
     setTimeout(() => {
       const el = document.getElementById(id);
-      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      if (el) el.scrollIntoView({ behavior: 'smooth' });
       // Backward compatibility with refs passed from App for products/academy
       if (id === 'products' && typeof scrollToProduct === 'function') scrollToProduct();
       if (id === 'academy' && typeof scrollToCourse === 'function') scrollToCourse();
@@ -28,48 +28,50 @@ const Header = ({ username, scrollToProduct, scrollToCourse, setShowedModal, han
   };
 
   return (
-      <header className={`${styles.header} ${isScrolled ? styles.headerScrolled : ''}`}>
-        <img src="./kediri-technopark-logo.png" className={styles.logo} alt="Logo" />
+    <header className={`${styles.header} ${isScrolled ? styles.headerScrolled : ''}`}>
+      <img src="./kediri-technopark-logo.png" className={styles.logo} alt="Logo" />
 
       {/* Desktop Navigation */}
       <nav className={styles.nav}>
-        <a
-          className={`${styles.navLink} ${hoveredNav === 2 ? styles.navLinkHover : ''}`}
-          onMouseEnter={() => setHoveredNav(2)}
-          onMouseLeave={() => setHoveredNav(null)}
-          onClick={() => navigate('/')}
-        >
-          Home
-        </a>
-        <a
-          className={`${styles.navLink} ${hoveredNav === 21 ? styles.navLinkHover : ''}`}
-          onMouseEnter={() => setHoveredNav(21)}
-          onMouseLeave={() => setHoveredNav(null)}
-          onClick={() => scrollToId('about')}
-        >
-          About
-        </a>
-        <a
-          className={`${styles.navLink} ${hoveredNav === 22 ? styles.navLinkHover : ''}`}
-          onMouseEnter={() => setHoveredNav(22)}
-          onMouseLeave={() => setHoveredNav(null)}
-          onClick={() => scrollToId('services')}
-        >
-          Services
-        </a>
         {username &&
-          <a
-            className={`${styles.navLink} ${hoveredNav === 3 ? styles.navLinkHover : ''}`}
-            onMouseEnter={() => setHoveredNav(3)}
-            onMouseLeave={() => setHoveredNav(null)}
-            onClick={() => {
-              navigate('/dashboard');
-            }}>
-            Dashboard
-          </a>
+          <>
+            <a
+              className={`${styles.navLink} ${hoveredNav === 2 ? styles.navLinkHover : ''}`}
+              onMouseEnter={() => setHoveredNav(2)}
+              onMouseLeave={() => setHoveredNav(null)}
+              onClick={() => navigate('/')}
+            >
+              Home
+            </a>
+            <a
+              className={`${styles.navLink} ${hoveredNav === 3 ? styles.navLinkHover : ''}`}
+              onMouseEnter={() => setHoveredNav(3)}
+              onMouseLeave={() => setHoveredNav(null)}
+              onClick={() => {
+                navigate('/dashboard');
+              }}>
+              Dashboard
+            </a>
+          </>
         }
         {!username &&
           <>
+            <a
+              className={`${styles.navLink} ${hoveredNav === 21 ? styles.navLinkHover : ''}`}
+              onMouseEnter={() => setHoveredNav(21)}
+              onMouseLeave={() => setHoveredNav(null)}
+              onClick={() => scrollToId('about')}
+            >
+              About
+            </a>
+            <a
+              className={`${styles.navLink} ${hoveredNav === 22 ? styles.navLinkHover : ''}`}
+              onMouseEnter={() => setHoveredNav(22)}
+              onMouseLeave={() => setHoveredNav(null)}
+              onClick={() => scrollToId('services')}
+            >
+              Services
+            </a>
             <a
               className={`${styles.navLink} ${hoveredNav === 3 ? styles.navLinkHover : ''}`}
               onMouseEnter={() => setHoveredNav(3)}
@@ -109,7 +111,7 @@ const Header = ({ username, scrollToProduct, scrollToCourse, setShowedModal, han
           {username ? (
             <>
               <div className={styles.username}>{username}</div>
-              <button onClick={() => { setMenuOpen(false); navigate('/'); }}>Home</button>
+              {/* <button onClick={() => { setMenuOpen(false); navigate('/'); }}>Home</button> */}
               <button onClick={() => { setMenuOpen(false); scrollToId('about'); }}>About</button>
               <button onClick={() => { setMenuOpen(false); scrollToId('services'); }}>Services</button>
               <button onClick={() => { setMenuOpen(false); scrollToId('products'); }}>Products</button>
@@ -164,7 +166,7 @@ const Header = ({ username, scrollToProduct, scrollToCourse, setShowedModal, han
           </button>
         )}
       </div>
-      </header>
+    </header>
   );
 };
 

src/components/ProductSection.js

@@ -49,7 +49,7 @@ const ProductSection = ({ setSelectedProduct, setShowedModal, productSectionRef,
 
   const { ref, inView } = useInView();
   return (
-    <section id="products" className={`${styles.productSection} ${shared.revealSection} ${inView ? shared.isVisible : ''}`} ref={(el) => {
+    <section id="products" style={{scrollMarginTop: '65px' }} className={`${styles.productSection} ${shared.revealSection} ${inView ? shared.isVisible : ''}`} ref={(el) => {
       if (typeof productSectionRef === 'function') productSectionRef(el);
       if (ref) ref.current = el;
     }}>

src/components/ServicesSection.js

@@ -29,7 +29,7 @@ const services = [
 const ServicesSection = () => {
   const { ref, inView } = useInView();
   return (
-    <section id="services" ref={ref} className={`${styles.blueprintContainer} ${shared.revealSection} ${inView ? shared.isVisible : ''}`}>
+    <section id="services" ref={ref} style={{scrollMarginTop: '65px'}} className={`${styles.blueprintContainer} ${shared.revealSection} ${inView ? shared.isVisible : ''}`}>
       <div className={styles.blueprintGrid}></div>
       <div className={styles.contentWrapper}>
         <Container>