imadhi
/
academy
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui chng

This commit is contained in:
KaviSaparamadu 2026-08-07 15:04:46 +05:30
parent 582c3a7e18
commit cb50fbbb19
2 changed files with 392 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
resources/views/courses.blade.php
View File

@ -370,6 +370,24 @@ h1, h2, h3, h4, h5, h6,
background-size: 20px 20px;
}
.features-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #FFE618;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 999px;
margin-bottom: 16px;
}
.features-section h2 {
font-size: 45px;
font-weight: 800;
@ -378,6 +396,7 @@ h1, h2, h3, h4, h5, h6,
}
.feature-box {
position: relative;
background: #fff;
padding: 40px 28px;
border-radius: 24px;
@ -386,6 +405,18 @@ h1, h2, h3, h4, h5, h6,
border: 1px solid var(--card-border);
text-align: center;
box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
overflow: hidden;
}
.feature-index {
position: absolute;
top: 14px;
right: 18px;
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
font-size: 13px;
font-weight: 700;
color: rgba(62, 81, 184, 0.25);
letter-spacing: 0.05em;
}
.feature-icon-wrapper {
@ -398,9 +429,8 @@ h1, h2, h3, h4, h5, h6,
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 24px;
margin: 0 auto 24px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
margin-left: 38%;
}
.feature-box:hover {
@ -410,6 +440,10 @@ h1, h2, h3, h4, h5, h6,
color:#6a2525 ;
}
.feature-box:hover .feature-index {
color: rgba(188, 26, 26, 0.35);
}
.feature-box:hover .feature-icon-wrapper {
background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
color: #fff;
@ -582,11 +616,13 @@ h1, h2, h3, h4, h5, h6,
background-size: cover;
background-position: center;
background-repeat: no-repeat;">
<span class="features-eyebrow"><i class="fa-solid fa-star"></i> Our Advantage</span>
<h2>Why Study With Us?</h2>
<div class="row g-4">
<div class="col-xl-3 col-md-6">
<div class="feature-box">
<span class="feature-index">01</span>
<div class="feature-icon-wrapper">
<i class="fas fa-chalkboard-teacher"></i>
</div>
@ -597,6 +633,7 @@ h1, h2, h3, h4, h5, h6,
<div class="col-xl-3 col-md-6">
<div class="feature-box">
<span class="feature-index">02</span>
<div class="feature-icon-wrapper">
<i class="fas fa-cogs"></i>
</div>
@ -607,6 +644,7 @@ h1, h2, h3, h4, h5, h6,
<div class="col-xl-3 col-md-6">
<div class="feature-box">
<span class="feature-index">03</span>
<div class="feature-icon-wrapper">
<i class="fas fa-award"></i>
</div>
@ -617,6 +655,7 @@ h1, h2, h3, h4, h5, h6,
<div class="col-xl-3 col-md-6">
<div class="feature-box">
<span class="feature-index">04</span>
<div class="feature-icon-wrapper">
<i class="fas fa-briefcase"></i>
</div>

397
resources/views/students.blade.php
View File

@ -23,37 +23,152 @@
}
body {
font-family: 'Segoe UI', Arial, sans-serif;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}
.hero {
background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6)),
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
color: #fff;
padding: 80px 0;
padding: 76px 0 64px;
text-align: center;
height: 480px;
min-height: 420px;
display: flex;
align-items: center;
}
.hero-slideshow {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-slide {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
opacity: 0;
transform: scale(1);
transition: opacity 2s ease-in-out, transform 7s ease-out;
}
.hero-slide.active {
opacity: 1;
transform: scale(1.09);
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6));
pointer-events: none;
}
.hero > .container {
position: relative;
z-index: 2;
}
.hero-dots {
position: absolute;
left: 0;
right: 0;
bottom: 18px;
z-index: 3;
display: flex;
justify-content: center;
gap: 10px;
}
.hero-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.15);
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
}
.hero-dot:hover {
background: rgba(255, 255, 255, 0.5);
}
.hero-dot.active {
background: #FFE618;
border-color: #FFE618;
width: 26px;
border-radius: 999px;
}
.hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #FFE618;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 999px;
margin-bottom: 18px;
}
.portal-card {
position: relative;
display: flex;
flex-direction: column;
border: none;
border-radius: 15px;
border-radius: 20px;
transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 5px 20px rgba(0,0,0,.04);
border: 1px solid var(--card-border);
cursor: pointer;
overflow: hidden;
}
.portal-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--secondary) 0%, var(--accent-orange) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.portal-card:hover::before {
transform: scaleX(1);
}
.portal-card:hover {
transform: translateY(-8px);
border-color: #5f3131;
box-shadow: 0 15px 30px rgba(62, 81, 184, 0.12);
box-shadow: 0 20px 40px rgba(62, 81, 184, 0.14);
}
.portal-icon {
position: relative;
width: 70px;
height: 70px;
background: #822a32;
@ -64,36 +179,133 @@ body {
justify-content: center;
font-size: 28px;
margin: auto;
box-shadow: 0 8px 18px rgba(130, 42, 50, 0.25);
transition: 0.4s ease;
}
.portal-icon::after {
content: '';
position: absolute;
inset: -11px;
z-index: -1;
border-radius: 50%;
background: rgba(130, 42, 50, 0.08);
transition: background-color 0.4s ease, transform 0.4s ease;
}
.portal-card:hover .portal-icon {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
box-shadow: 0 8px 20px rgba(188, 26, 26, 0.35);
color: #ffed8b;
}
.portal-card:hover .portal-icon::after {
background: rgba(188, 26, 26, 0.14);
transform: scale(1.08);
}
.portal-access-hint {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 16px;
border-top: 1px dashed var(--card-border);
font-size: 13px;
font-weight: 700;
color: var(--secondary);
opacity: 0.75;
transition: opacity 0.3s ease, color 0.3s ease;
}
.portal-card:hover .portal-access-hint {
opacity: 1;
color: var(--secondary-hover);
}
.portal-access-hint i {
transition: transform 0.3s ease;
}
.portal-card:hover .portal-access-hint i {
transform: translateX(3px);
}
.btn-portal {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff;
padding: 12px 35px;
border-radius: 8px;
font-weight: 600;
padding: 13px 34px;
border-radius: 999px;
font-weight: 700;
border: 2px solid rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.btn-portal:hover {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #f4ff8d;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(188, 26, 26, 0.4);
}
.btn-hero-outline {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.7);
padding: 13px 34px;
border-radius: 999px;
font-weight: 700;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.btn-hero-outline:hover {
background: rgba(255, 255, 255, 0.95);
color: var(--secondary-hover);
border-color: #fff;
transform: translateY(-3px);
}
.btn:hover {
border-color: rgba(255, 255, 255, 0.98);
}
.hero-quick-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 36px;
}
.hero-quick-stat {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 13.5px;
font-weight: 600;
padding: 9px 18px;
border-radius: 999px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.hero-quick-stat:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.16);
}
.hero-quick-stat i {
color: #FFE618;
}
.modal-content {
border: none;
border-radius: 16px;
@ -120,6 +332,19 @@ body {
font-size: 1.35rem;
}
.modal-login-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #FFE618;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 10px 24px rgba(188, 26, 26, 0.25);
}
.modal-body {
padding: 10px 25px 20px;
}
@ -200,6 +425,25 @@ body {
box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
}
.custom-list-item {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.custom-list-item:hover {
background: #ffffff;
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.quick-link-icon {
width: 48px;
height: 48px;
background-color: rgb(108, 55, 55);
color: #fff;
}
.bg-light {
background: linear-gradient(rgba(162, 190, 255, 0.49), rgba(237, 235, 255, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600');
background-size: cover;
@ -235,24 +479,56 @@ body {
</style>
<!-- HERO SECTION -->
@php
$studentHeroSlides = [
'https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg',
'https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80',
'https://images.unsplash.com/photo-1553440569-bcc63803a83d?auto=format&fit=crop&w=1600&q=80',
'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80',
'https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80',
];
@endphp
<section class="hero">
<div class="hero-slideshow" aria-hidden="true">
@foreach($studentHeroSlides as $index => $slideImage)
<div class="hero-slide {{ $index === 0 ? 'active' : '' }}" style="background-image: url('{{ $slideImage }}');"></div>
@endforeach
</div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-dots" aria-hidden="true">
@foreach($studentHeroSlides as $index => $slideImage)
<button type="button" class="hero-dot {{ $index === 0 ? 'active' : '' }}" data-slide-index="{{ $index }}" aria-label="Show slide {{ $index + 1 }}"></button>
@endforeach
</div>
<div class="container" style="padding-top: 46px;">
<div class="animate-item animated fade-up-init">
<span class="hero-badge"><i class="fa-solid fa-user-graduate"></i> Your Academic Hub</span>
<h1 class="fw-bold display-5">Student Portal</h1>
<p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
Access your courses, timetable, assignments, examination results,
payments and profile from one place.
</p>
<button onclick="studentlogin()" class="btn btn-portal mt-4 shadow">
Student Login
<div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
<button onclick="studentlogin()" class="btn btn-portal shadow">
<i class="fa-solid fa-right-to-bracket me-2"></i>Student Login
</button>
<a href="#student-services" class="btn btn-hero-outline">
<i class="fa-solid fa-compass me-2"></i>Browse Services
</a>
</div>
<div class="hero-quick-stats">
<span class="hero-quick-stat"><i class="fa-solid fa-clock"></i> 24/7 Access</span>
<span class="hero-quick-stat"><i class="fa-solid fa-shield-halved"></i> Secure Login</span>
<span class="hero-quick-stat"><i class="fa-solid fa-layer-group"></i> 6 Portal Services</span>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION -->
<section class="py-5 overflow-hidden">
<section id="student-services" class="py-5 overflow-hidden">
<div class="container">
<div class="text-center mb-5 animate-item fade-up-init">
<h2 class="fw-bold">Student Services</h2>
@ -269,6 +545,7 @@ body {
</div>
<h4 class="mt-4 fw-bold">My Courses</h4>
<p class="text-muted mb-0">View enrolled courses and learning materials.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div>
</div>
@ -279,6 +556,7 @@ body {
</div>
<h4 class="mt-4 fw-bold">Class Timetable</h4>
<p class="text-muted mb-0">Check your weekly lecture schedule.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div>
</div>
@ -289,6 +567,7 @@ body {
</div>
<h4 class="mt-4 fw-bold">Assignments</h4>
<p class="text-muted mb-0">Submit assignments and download resources.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div>
</div>
@ -299,6 +578,7 @@ body {
</div>
<h4 class="mt-4 fw-bold">Exam Results</h4>
<p class="text-muted mb-0">View semester and final examination results.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div>
</div>
@ -309,6 +589,7 @@ body {
</div>
<h4 class="mt-4 fw-bold">Fee Payments</h4>
<p class="text-muted mb-0">Pay course fees and download payment receipts.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div>
</div>
@ -319,6 +600,7 @@ body {
</div>
<h4 class="mt-4 fw-bold">Student Profile</h4>
<p class="text-muted mb-0">Update your personal information securely.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div>
</div>
</div>
@ -349,14 +631,10 @@ body {
<div class="d-flex flex-column gap-3">
<!-- Item 1 -->
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between transition-all custom-list-item"
style="background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease;"
onmouseover="this.style.background='#ffffff'; this.style.transform='translateX(5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.08)';"
onmouseout="this.style.background='rgba(255, 255, 255, 0.7)'; this.style.transform='translateX(0)'; this.style.boxShadow='none';" onclick="studentlogin()">
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
<div class="d-flex align-items-center gap-3">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
style="width: 48px; height: 48px; background-color: rgb(108, 55, 55); color: #fff;">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
<i class="fa-solid fa-calendar-days fs-5"></i>
</div>
<div>
@ -369,14 +647,10 @@ body {
</a>
<!-- Item 2 -->
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between transition-all custom-list-item"
style="background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease;"
onmouseover="this.style.background='#ffffff'; this.style.transform='translateX(5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.08)';"
onmouseout="this.style.background='rgba(255, 255, 255, 0.7)'; this.style.transform='translateX(0)'; this.style.boxShadow='none';" onclick="studentlogin()">
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
<div class="d-flex align-items-center gap-3">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
style="width: 48px; height: 48px; background-color: rgb(108, 55, 55); color: #fff;">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
<i class="fa-solid fa-book-bookmark fs-5"></i>
</div>
<div>
@ -389,14 +663,10 @@ body {
</a>
<!-- Item 3 -->
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between transition-all custom-list-item"
style="background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease;"
onmouseover="this.style.background='#ffffff'; this.style.transform='translateX(5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.08)';"
onmouseout="this.style.background='rgba(255, 255, 255, 0.7)'; this.style.transform='translateX(0)'; this.style.boxShadow='none';" onclick="studentlogin()">
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
<div class="d-flex align-items-center gap-3">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
style="width: 48px; height: 48px; background-color: rgb(108, 55, 55); color: #fff;">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
<i class="fa-solid fa-file-lines fs-5"></i>
</div>
<div>
@ -409,14 +679,10 @@ body {
</a>
<!-- Item 4 -->
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between transition-all custom-list-item"
style="background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease;"
onmouseover="this.style.background='#ffffff'; this.style.transform='translateX(5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.08)';"
onmouseout="this.style.background='rgba(255, 255, 255, 0.7)'; this.style.transform='translateX(0)'; this.style.boxShadow='none';" onclick="studentlogin()">
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
<div class="d-flex align-items-center gap-3">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
style="width: 48px; height: 48px; background-color: rgb(108, 55, 55); color: #fff;">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
<i class="fa-solid fa-headset fs-5"></i>
</div>
<div>
@ -442,7 +708,7 @@ body {
<h2 class="fw-bold">Ready to Access Your Student Account?</h2>
<p class="text-muted fs-5">Log in to manage your academic activities and stay updated.</p>
<button onclick="studentlogin()" class="btn btn-portal mt-3 shadow">
Student Login
<i class="fa-solid fa-right-to-bracket me-2"></i>Student Login
</button>
</div>
</section>
@ -451,12 +717,15 @@ body {
<div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header d-flex align-items-center justify-content-between">
<h5 class="modal-title w-100 text-center" id="studentLoginModalLabel">
<i class="fa-solid fa-lock-open me-2" style="font-size: 20px; color: var(--secondary);"></i>
<div class="modal-header d-flex flex-column align-items-center position-relative">
<button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-login-icon">
<i class="fa-solid fa-lock-open"></i>
</div>
<h5 class="modal-title text-center mt-3" id="studentLoginModalLabel">
Student Portal Login
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<p class="text-muted small text-center mb-0">Enter your credentials to continue</p>
</div>
<form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm">
@csrf
@ -503,6 +772,38 @@ function studentlogin() {
}
document.addEventListener('DOMContentLoaded', function () {
// Hero Background Slideshow
const heroSlides = document.querySelectorAll('.hero-slide');
const heroDots = document.querySelectorAll('.hero-dot');
if (heroSlides.length > 1) {
let activeSlide = 0;
let slideTimer;
const goToSlide = (index) => {
heroSlides[activeSlide].classList.remove('active');
heroDots[activeSlide]?.classList.remove('active');
activeSlide = index;
heroSlides[activeSlide].classList.add('active');
heroDots[activeSlide]?.classList.add('active');
};
const startSlideTimer = () => {
clearInterval(slideTimer);
slideTimer = setInterval(() => {
goToSlide((activeSlide + 1) % heroSlides.length);
}, 5500);
};
heroDots.forEach(dot => {
dot.addEventListener('click', () => {
goToSlide(parseInt(dot.dataset.slideIndex, 10));
startSlideTimer();
});
});
startSlideTimer();
}
const animatedElements = document.querySelectorAll('.animate-item');
const observer = new IntersectionObserver((entries) => {