310 lines
10 KiB
PHP
310 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>EduPath</title>
|
|
<!-- Google Font: Poppins -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Animate.css -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
|
|
<!-- Bootstrap Icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
|
|
<style>
|
|
.hero {
|
|
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('https://source.unsplash.com/1600x900/?technology') center/cover no-repeat;
|
|
color: white;
|
|
padding: 100px 0;
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 3rem;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
footer {
|
|
background: #f8f9fa;
|
|
padding: 20px 0;
|
|
}
|
|
</style>
|
|
<style>
|
|
/* ===========================
|
|
GLOBAL & NAVBAR (UNCHANGED)
|
|
=========================== */
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.logo {
|
|
color: #2196F3;
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.role {
|
|
font-weight: bold;
|
|
color: #000;
|
|
font-size: 1px;
|
|
}
|
|
|
|
|
|
/* ===========================
|
|
PREMIUM CONTENT STYLES
|
|
=========================== */
|
|
/* Section Titles with gradient underline */
|
|
.section-title {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 2.5rem;
|
|
color: #007bff;
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-bottom: .5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #007bff, #00bfff);
|
|
bottom: 0;
|
|
left: 25%;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Carousel */
|
|
#polijeCarousel .carousel-inner {
|
|
height: 500px;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
#polijeCarousel .carousel-item img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 6s ease;
|
|
}
|
|
|
|
#polijeCarousel .carousel-item.active img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
#polijeCarousel .carousel-caption {
|
|
bottom: 2rem;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(6px);
|
|
border-radius: .75rem;
|
|
padding: 1rem 1.5rem;
|
|
color: #fff;
|
|
}
|
|
|
|
#polijeCarousel .carousel-caption h5 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#polijeCarousel .carousel-caption p {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.carousel-control-prev-icon,
|
|
.carousel-control-next-icon {
|
|
filter: invert(1);
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
/* Jurusan Cards */
|
|
.premium-card {
|
|
border: none;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
transition: transform .4s, box-shadow .4s;
|
|
}
|
|
|
|
.premium-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.premium-card .icon-circle {
|
|
width: 72px;
|
|
height: 72px;
|
|
background: #e8f1ff;
|
|
color: #007bff;
|
|
font-size: 2rem;
|
|
margin: 0 auto 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.premium-card .card-body {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
background: #fff;
|
|
}
|
|
|
|
.premium-card .card-title {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-bottom: .75rem;
|
|
color: #343a40;
|
|
}
|
|
|
|
.premium-card .card-text {
|
|
font-size: .95rem;
|
|
color: #6c757d;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.premium-card .btn-outline-primary {
|
|
border-radius: .5rem;
|
|
padding: .5rem 1.5rem;
|
|
font-weight: 500;
|
|
transition: background .3s, color .3s;
|
|
}
|
|
|
|
.premium-card .btn-outline-primary:hover {
|
|
background: #007bff;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Tips Blocks */
|
|
.premium-tip {
|
|
border-left: 4px solid #00bfff;
|
|
padding: 1.25rem;
|
|
border-radius: .5rem;
|
|
background: #f8f9fa;
|
|
transition: background .3s, transform .3s;
|
|
}
|
|
|
|
.premium-tip:hover {
|
|
background: #e3f2fd;
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.premium-tip .bi {
|
|
font-size: 1.5rem;
|
|
color: #007bff;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.premium-tip p {
|
|
display: inline-block;
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="#">
|
|
<span class="logo" style="font-size:20px; font-weight:bold; color:#2196F3;">
|
|
<img src="{{ asset('images/logo.png') }}" alt="Your Logo"
|
|
style="vertical-align: middle; width: 80px; height: auto;">
|
|
</span>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#tips">Tips</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="{{ route('register') }}">Register</a></li>
|
|
<li class="nav-item"><a class="nav-link text-primary" href="{{ route('login') }}">Login</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero position-relative text-center d-flex align-items-center justify-content-center" style="height: 70vh; overflow: hidden;">
|
|
<img src="{{ asset('images/lab.jpeg') }}"
|
|
alt="Background Mahasiswa"
|
|
class="position-absolute w-100 h-100 object-fit-cover"
|
|
style="z-index: 0; filter: brightness(30%); object-fit: cover;">
|
|
|
|
<div class="container position-relative text-white z-1">
|
|
<h1 class="display-4 fw-bold">Welcome to EduPath</h1>
|
|
<p class="lead">Membantumu dalam memilih jurusan kuliah yang tepat.</p>
|
|
<a href="{{ route('login') }}" class="btn btn-lg btn-primary mt-3">Get Started</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-5 bg-light">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<h3 class="fw-bold">About EduPath</h3>
|
|
<p>EduPath merupakan sebuah website sistem pendukung keputusan untuk memilih jurusan kuliah.
|
|
Website ini menerapkan metode AHP (Analytical Hierarchy Process), metode yang digunakan untuk membantu
|
|
para pengambil keputusan menyusun dan menganalisis pilihan berdasarkan beberapa kriteria yang terorganisir dalam struktur hirarki.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img src="{{ asset('assets/admin/img/OBJECTS.png') }}" class="img-fluid rounded shadow"
|
|
alt="About Image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tips Section -->
|
|
<div id="tips" class="container py-5">
|
|
<section class="mb-5">
|
|
<h2 class="section-title text-center animate__animated animate__fadeInLeft">Panduan Memilih Jurusan</h2>
|
|
<div class="row g-4 justify-content-center">
|
|
@php
|
|
$tips = [
|
|
['icon' => 'bi-stars', 'text' => 'Kenali passion & strengths kamu.'],
|
|
['icon' => 'bi-bar-chart-line', 'text' => 'Tinjau prospek karier jangka panjang.'],
|
|
['icon' => 'bi-person-lines-fill', 'text' => 'Konsultasi dengan mentor dan alumni.'],
|
|
['icon' => 'bi-question-circle', 'text' => 'Manfaatkan assessment online.'],
|
|
['icon' => 'bi-people', 'text' => 'Pilih sesuai visi dan nilai pribadimu.'],
|
|
];
|
|
@endphp
|
|
@foreach ($tips as $t)
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="premium-tip animate__animated animate__fadeInUp">
|
|
<i class="bi {{ $t['icon'] }}"></i>
|
|
<p>{{ $t['text'] }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="text-center">
|
|
<div class="container">
|
|
<p class="mb-0">© {{ date('Y') }} EduPath by Ratna Sari Dewi. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
|
|
</html>
|