ok
This commit is contained in:
jaya
@@ -1,32 +1,49 @@
|
||||
import { Container, Row, Col, Button } from 'react-bootstrap';
|
||||
import styles from './HeroSection.module.css';
|
||||
import { Container, Row, Col, Button } from "react-bootstrap";
|
||||
import styles from "./HeroSection.module.css";
|
||||
|
||||
const HeroSection = ({ scrollToProduct, scrollToCourse }) => {
|
||||
return (
|
||||
<section className={`${styles.hero} pt-3 pb-3`}
|
||||
aria-label="Kediri Technopark hero section">
|
||||
<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}>
|
||||
KATALIS KARIR DAN BISNIS DIGITAL
|
||||
</h1>
|
||||
<h1 className={styles.title}>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'}>
|
||||
Bincang dengan Maya
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="light"
|
||||
className={styles.ctaSecondary}
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
.hero {
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(900px 400px at 0% -10%, 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%);
|
||||
background: radial-gradient(
|
||||
900px 400px at 0% -10%,
|
||||
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 {
|
||||
margin-top: 0.75rem;
|
||||
.ctaGroup {
|
||||
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;
|
||||
margin-right: .5rem;
|
||||
transition: background-color 0.16s ease, border-color 0.16s ease;
|
||||
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%);
|
||||
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||
mask-image: linear-gradient(
|
||||
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; }
|
||||
.statDot { width: 4px; height: 4px; border-radius: 2px; background: #cbd5e1; }
|
||||
.statItem strong {
|
||||
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; }
|
||||
.ctaGroup { display: grid; 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); }
|
||||
.hero {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.ctaGroup {
|
||||
display: grid;
|
||||
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; }
|
||||
.title { font-size: clamp(1.4rem, 2vw + 1rem, 2.1rem); line-height: 1.12; }
|
||||
.lead { 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); }
|
||||
.imageWrap::after {
|
||||
display: none;
|
||||
}
|
||||
.title {
|
||||
font-size: clamp(1.4rem, 2vw + 1rem, 2.1rem);
|
||||
line-height: 1.12;
|
||||
}
|
||||
.lead {
|
||||
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; }
|
||||
.title { 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 {
|
||||
.hero {
|
||||
padding-top: 0.8rem;
|
||||
}
|
||||
.title {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user