ok

src/components/HeroSection.js

@@ -1,32 +1,49 @@
-import { Container, Row, Col, Button } from 'react-bootstrap';
+import { Container, Row, Col, Button } from "react-bootstrap";
-import styles from './HeroSection.module.css';
+import styles from "./HeroSection.module.css";
 
 const HeroSection = ({ scrollToProduct, scrollToCourse }) => {
   return (
-    <section className={`${styles.hero} pt-3 pb-3`}
+    <section
-      aria-label="Kediri Technopark hero section">
+      className={`${styles.hero} pt-3`}
+      aria-label="Kediri Technopark hero section"
+    >
       <Container className={styles.heroContainer}>
         <Row className="align-items-center gy-3">
           {/* Text first for mobile and desktop for clarity */}
-          <Col xs={{ order: 0 }} lg={{ span: 8, order: 1 }} xl={{ span: 7, order: 1 }}>
+          <Col
+            xs={{ order: 0 }}
+            lg={{ span: 8, order: 1 }}
+            xl={{ span: 7, order: 1 }}
+          >
             <div className={styles.copyWrap}>
-              <h1 className={styles.title}>
+              <h1 className={styles.title}>KATALIS KARIR DAN BISNIS DIGITAL</h1>
-                KATALIS KARIR DAN BISNIS DIGITAL
-              </h1>
               <p className={styles.lead}>
-                Kami adalah ekosistem tempat mimpi digital tumbuh dan masa depan dibentuk. Di sinilah semangat belajar bertemu dengan inovasi, dan ide-ide muda diberi ruang untuk berkembang. Lebih dari sekadar tempat, kami adalah rumah bagi talenta, teknologi, dan transformasi. Mari jelajahi dunia digital, bangun karir, dan ciptakan solusi — semua dimulai dari sini.
+                Kami adalah ekosistem tempat mimpi digital tumbuh dan masa depan
+                dibentuk. Di sinilah semangat belajar bertemu dengan inovasi,
+                dan ide-ide muda diberi ruang untuk berkembang. Lebih dari
+                sekadar tempat, kami adalah rumah bagi talenta, teknologi, dan
+                transformasi. Mari jelajahi dunia digital, bangun karir, dan
+                ciptakan solusi — semua dimulai dari sini.
               </p>
               <div className={styles.ctaGroup}>
                 <Button className={styles.ctaPrimary} onClick={scrollToProduct}>
                   Explore Products
                 </Button>
-                <Button variant="light" className={styles.ctaSecondary} onClick={scrollToCourse}>
+                <Button
+                  variant="light"
+                  className={styles.ctaSecondary}
+                  onClick={scrollToCourse}
+                >
                   View Academy
                 </Button>
               </div>
             </div>
           </Col>
-          <Col xs={{ order: 1 }} lg={{ span: 4, order: 2 }} xl={{ span: 5, order: 2 }}>
+          <Col
+            xs={{ order: 1 }}
+            lg={{ span: 4, order: 2 }}
+            xl={{ span: 5, order: 2 }}
+          >
             <div className={styles.imageWrap}>
               <div className={styles.imageFrame}>
                 <video
@@ -41,15 +58,22 @@ const HeroSection = ({ scrollToProduct, scrollToCourse }) => {
                   <source src="/maya-idle.mp4" type="video/mp4" />
                   Your browser does not support the video tag.
                 </video>
-
               </div>
             </div>
-            <div className='absolute'><h1>Perkenalkan Maya</h1>
+            <div className={styles.header}>
+              <h1>Perkenalkan Maya</h1>
               <p>Asisten digital kami</p>
-              <Button variant="light" className={styles.ctaSecondary} onClick={()=>window.location.href='https://mayagen-cs.kediritechnopark.com'}>
+              <Button
-                  Bincang dengan Maya
+                variant="light"
-                </Button>
+                className={styles.ctaSecondary}
-                </div>
+                onClick={() =>
+                  (window.location.href =
+                    "https://mayagen-cs.kediritechnopark.com")
+                }
+              >
+                Bincang dengan Maya
+              </Button>
+            </div>
           </Col>
         </Row>
       </Container>
@@ -57,4 +81,4 @@ const HeroSection = ({ scrollToProduct, scrollToCourse }) => {
   );
 };
 
-export default HeroSection;
+export default HeroSection;

src/components/HeroSection.module.css

@@ -1,8 +1,15 @@
 .hero {
   position: relative;
-  background:
+  background: radial-gradient(
-    radial-gradient(900px 400px at 0% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
+      900px 400px at 0% -10%,
-    radial-gradient(800px 350px at 110% 0%, rgba(0,0,0,0.05), transparent 60%);
+      color-mix(in srgb, var(--brand) 12%, transparent),
+      transparent 60%
+    ),
+    radial-gradient(
+      800px 350px at 110% 0%,
+      rgba(0, 0, 0, 0.05),
+      transparent 60%
+    );
   overflow: visible;
   min-height: clamp(300px, 40svh, 450px);
   display: grid;
@@ -25,7 +32,9 @@
   pointer-events: auto;
 }
 
-.kickerRow { margin-bottom: .25rem; }
+.kickerRow {
+  margin-bottom: 0.25rem;
+}
 .kickerBadge {
   display: inline-flex;
   align-items: center;
@@ -45,7 +54,11 @@
   letter-spacing: -0.02em;
   /* Fluid type: min 24px → max 40px, ensure 1-line on desktop */
   font-size: clamp(1.8rem, 2vw + 0.8rem, 2.8rem);
-  background: linear-gradient(92deg, var(--text) 0%, color-mix(in srgb, var(--brand) 70%, #0f172a) 100%);
+  background: linear-gradient(
+    92deg,
+    var(--text) 0%,
+    color-mix(in srgb, var(--brand) 70%, #0f172a) 100%
+  );
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
@@ -76,14 +89,15 @@
 }
 
 .bulletIcon {
-  width: 18px; height: 18px;
+  width: 18px;
+  height: 18px;
   border-radius: 50%;
   border: 2px solid var(--brand);
   box-shadow: inset 0 0 0 2px #fff;
 }
 
-.ctaGroup { 
+.ctaGroup {
-  margin-top: 0.75rem; 
+  margin-top: 0.75rem;
   position: relative;
   z-index: 2;
 }
@@ -96,8 +110,8 @@
   padding: 0.45rem 0.8rem !important;
   font-weight: 600 !important;
   letter-spacing: 0.02em;
-  transition: background-color .16s ease, border-color .16s ease;
+  transition: background-color 0.16s ease, border-color 0.16s ease;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
   box-shadow: var(--shadow-neutral-s);
   position: relative;
   z-index: 2;
@@ -117,7 +131,8 @@
   padding: 0.45rem 0.8rem !important;
   font-weight: 600 !important;
   letter-spacing: 0.02em;
-  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
+  transition: color 0.16s ease, border-color 0.16s ease,
+    background-color 0.16s ease;
   box-shadow: var(--shadow-neutral-s);
   position: relative;
   z-index: 2;
@@ -150,14 +165,29 @@
   pointer-events: none;
 }
 
-.imageWrap::before, .imageWrap::after { content: none; }
+.imageWrap::before,
+.imageWrap::after {
+  content: none;
+}
 
 .imageFrame {
   position: relative;
   border-radius: calc(var(--radius-2xl) + 6px);
   overflow: hidden;
-  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
+  mask-image: linear-gradient(
-  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
+    to right,
+    transparent 0%,
+    black 10%,
+    black 90%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    black 10%,
+    black 90%,
+    transparent 100%
+  );
   z-index: -1;
   pointer-events: none;
 }
@@ -166,19 +196,154 @@
   display: block;
   width: 100%;
   height: auto;
-  aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: calc(var(--radius-2xl) - 4px);
   object-fit: contain;
 }
 
+.header {
+  position: absolute;
+  top: 231px;
+  right: 150px;
+  z-index: 10;
+  max-width: 450px;
+  text-align: left;
+}
+
+.header h1 {
+  font-size: 3.25rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  background: linear-gradient(
+    120deg,
+    #0f172a 0%,
+    #1e3a8a 25%,
+    #2563eb 50%,
+    #1e40af 75%,
+    #0f172a 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  background-size: 200% auto;
+  animation: gradientFlow 5s ease-in-out infinite;
+  filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.8))
+    drop-shadow(-1px -1px 2px rgba(255, 255, 255, 0.6))
+    drop-shadow(0 3px 10px rgba(37, 99, 235, 0.2));
+}
+
+@keyframes gradientFlow {
+  0%,
+  100% {
+    background-position: 0% center;
+  }
+  50% {
+    background-position: 100% center;
+  }
+}
+
+.header p {
+  font-size: 1.125rem;
+  color: #475569;
+  margin-bottom: 1.5rem;
+  font-weight: 500;
+  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.9),
+    0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+.ctaSecondary {
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 2.5px solid #1e40af;
+  color: #1e40af;
+  padding: 0.875rem 2rem;
+  border-radius: 28px;
+  font-weight: 600;
+  font-size: 0.975rem;
+  cursor: pointer;
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 3px 10px rgba(30, 64, 175, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+}
+
+.ctaSecondary:hover {
+  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
+  color: white;
+  border-color: #1e3a8a;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4),
+    0 2px 8px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.ctaSecondary:active {
+  transform: translateY(0);
+}
+
+/* Responsive Design */
+@media (max-width: 1400px) {
+  .header {
+    right: 120px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .header {
+    right: 80px;
+    max-width: 400px;
+  }
+
+  .header h1 {
+    font-size: 2.75rem;
+  }
+}
+
+@media (max-width: 992px) {
+  .header {
+    position: static;
+    max-width: 100%;
+    text-align: center;
+    padding: 2rem;
+    margin: 0 auto;
+  }
+
+  .header h1 {
+    font-size: 2.5rem;
+    white-space: normal;
+  }
+}
+
+@media (max-width: 768px) {
+  .header h1 {
+    font-size: 2rem;
+  }
+
+  .header p {
+    font-size: 1rem;
+  }
+
+  .ctaSecondary {
+    padding: 0.75rem 1.75rem;
+  }
+}
+
 .glow {
   position: absolute;
   inset: auto 10% -10% 10%;
   height: 40%;
   filter: blur(40px);
   z-index: -1;
-  background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%);
+  background: radial-gradient(
+    60% 60% at 50% 0%,
+    color-mix(in srgb, var(--brand) 30%, transparent),
+    transparent 60%
+  );
 }
 
 .stats {
@@ -186,54 +351,117 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  color: #64748b; /* slate-500 */
+  color: #64748b;
   font-size: 0.9rem;
 }
 
-.statItem strong { color: #0f172a; font-weight: 700; margin-right: 4px; }
+.statItem strong {
-.statDot { width: 4px; height: 4px; border-radius: 2px; background: #cbd5e1; }
+  color: #0f172a;
+  font-weight: 700;
+  margin-right: 4px;
+}
+.statDot {
+  width: 4px;
+  height: 4px;
+  border-radius: 2px;
+  background: #cbd5e1;
+}
 
-/* Fine-tuned responsive spacing */
 @media (min-width: 992px) {
-  .copyWrap { padding-right: 1rem; }
+  .copyWrap {
+    padding-right: 1rem;
+  }
 }
 
 @media (max-width: 575.98px) {
-  .hero { padding-top: 1rem; }
+  .hero {
-  .ctaGroup { display: grid; gap: 8px; }
+    padding-top: 1rem;
-  .ctaPrimary, .ctaSecondary { width: 100% !important; text-align: center; }
+  }
-  .copyWrap { max-width: 100%; padding: 0 10px; }
+  .ctaGroup {
-  .title { font-size: clamp(1.3rem, 2.5vw + 1rem, 1.8rem); }
+    display: grid;
-  .lead { font-size: clamp(0.9rem, 0.5vw + 0.8rem, 1rem); }
+    gap: 8px;
+  }
+  .ctaPrimary,
+  .ctaSecondary {
+    width: 100% !important;
+    text-align: center;
+  }
+  .copyWrap {
+    max-width: 100%;
+    padding: 0 10px;
+  }
+  .title {
+    font-size: clamp(1.3rem, 2.5vw + 1rem, 1.8rem);
+  }
+  .lead {
+    font-size: clamp(0.9rem, 0.5vw + 0.8rem, 1rem);
+  }
 }
 
 @media (max-width: 767.98px) {
   .imageWrap::before,
-  .imageWrap::after { display: none; }
+  .imageWrap::after {
-  .title { font-size: clamp(1.4rem, 2vw + 1rem, 2.1rem); line-height: 1.12; }
+    display: none;
-  .lead { font-size: clamp(0.93rem, 0.4vw + 0.84rem, 1.03rem); }
+  }
-  .bulletItem { font-size: 0.92rem; }
+  .title {
-  .mesh, .grid { display: none; }
+    font-size: clamp(1.4rem, 2vw + 1rem, 2.1rem);
-  .copyWrap { max-width: 100%; padding: 0 15px; }
+    line-height: 1.12;
-  .imageWrap { max-width: 100%; }
+  }
-  .imageFrame { border-radius: calc(var(--radius-2xl) + 2px); }
+  .lead {
-  .heroImage { border-radius: calc(var(--radius-2xl) - 6px); }
+    font-size: clamp(0.93rem, 0.4vw + 0.84rem, 1.03rem);
+  }
+  .bulletItem {
+    font-size: 0.92rem;
+  }
+  .mesh,
+  .grid {
+    display: none;
+  }
+  .copyWrap {
+    max-width: 100%;
+    padding: 0 15px;
+  }
+  .imageWrap {
+    max-width: 100%;
+  }
+  .imageFrame {
+    border-radius: calc(var(--radius-2xl) + 2px);
+  }
+  .heroImage {
+    border-radius: calc(var(--radius-2xl) - 6px);
+  }
 }
 
-.imageFrame:hover { box-shadow: none; transform: none; }
+.imageFrame:hover {
+  box-shadow: none;
+  transform: none;
+}
 
 @media (min-width: 1400px) {
-  .imageWrap { max-width: 720px; }
+  .imageWrap {
+    max-width: 720px;
+  }
 }
 
 @media (max-width: 400px) {
-  .hero { padding-top: 0.8rem; }
+  .hero {
-  .title { font-size: clamp(1.2rem, 3vw + 0.9rem, 1.7rem); }
+    padding-top: 0.8rem;
-  .lead { font-size: clamp(0.85rem, 0.5vw + 0.75rem, 0.95rem); }
+  }
-  .ctaGroup { gap: 6px; }
+  .title {
-  .ctaPrimary, .ctaSecondary { 
+    font-size: clamp(1.2rem, 3vw + 0.9rem, 1.7rem);
+  }
+  .lead {
+    font-size: clamp(0.85rem, 0.5vw + 0.75rem, 0.95rem);
+  }
+  .ctaGroup {
+    gap: 6px;
+  }
+  .ctaPrimary,
+  .ctaSecondary {
     padding: 0.4rem 0.7rem !important;
     font-size: 0.9rem;
   }
-  .copyWrap { padding: 0 5px; }
+  .copyWrap {
-}
+    padding: 0 5px;
+  }
+}