462 lines
24 KiB
Vue
462 lines
24 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* @file index.vue
|
||
* @description หน้า Landing Page (หน้าแรกของเว็บสำหรับ Guest)
|
||
* ใช้ Layout: 'landing' (ไม่มี Sidebar / Navbar แบบ Dashboard)
|
||
*/
|
||
definePageMeta({
|
||
layout: 'landing',
|
||
middleware: 'auth'
|
||
})
|
||
|
||
useHead({
|
||
title: 'E-Learning System - ระบบการเรียนการสอนออนไลน์'
|
||
})
|
||
|
||
const { fetchCategories } = useCategory()
|
||
const { fetchCourses, getLocalizedText } = useCourse()
|
||
const { user } = useAuth()
|
||
|
||
const stepOneCards = [
|
||
{ title: 'AI Foundations', desc: 'เข้าใจพื้นฐาน AI ใช้งานจริงได้ทุกสายงาน', bgClass: 'bg-slate-900', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-900', categorySlug: 'programming' },
|
||
{ title: 'Data Analyst', desc: 'เรียนจนทำ Dashboard วิเคราะห์ Data ได้เลย', bgClass: 'bg-amber-500', textClass: 'text-slate-900', arrowClass: 'text-slate-900/40 border-slate-900/10 group-hover:text-amber-500', categorySlug: 'business' },
|
||
{ title: 'Front-End Web Developer', desc: 'เขียนเว็บสวย ใช้งานได้จริงตั้งแต่หน้าแรก', bgClass: 'bg-orange-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-orange-500', categorySlug: 'programming' },
|
||
{ title: 'UX/UI Designer', desc: 'ต่อยอดทำ Portfolio ไม่มีประสบการณ์ก็เรียนได้', bgClass: 'bg-pink-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-pink-600', categorySlug: 'design' },
|
||
{ title: 'Product Manager', desc: 'เก็บทุกทักษะ ปั้น Product วางแผนแบบมือโปร', bgClass: 'bg-teal-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-teal-500', categorySlug: 'business' },
|
||
{ title: 'Back-End Developer', desc: 'เข้าใจโครงสร้างระบบและฐานข้อมูลหลังบ้าน', bgClass: 'bg-blue-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-blue-600', categorySlug: 'programming' },
|
||
{ title: 'Supply Chain & Logistics', desc: 'ใช้ Data วางแผนโลจิสติกส์ได้อย่างมีประสิทธิภาพ', bgClass: 'bg-slate-700', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-700', categorySlug: 'business' }
|
||
]
|
||
|
||
const learningStyles = [
|
||
{
|
||
title: 'คอร์สออนไลน์', icon: 'desktop_windows', type: 'ONLINE',
|
||
subtitle: 'เรียนได้ทุกที่ ทุกเวลา', desc: 'คัดสรรเนื้อหาคุณภาพจากผู้เชี่ยวชาญ\nพร้อมให้คุณเริ่มต้นเรียนรู้ได้ทันที',
|
||
time: 'เข้าถึงได้ตลอดชีพ',
|
||
features: ['เนื้อหาครบทุกประเด็นสำคัญ', 'โจทย์ตัวอย่างและแบบฝึกหัด', 'เรียนซ้ำได้ไม่จำกัด', 'ใบเซอร์ทิฟิเคตหลังเรียนจบ'],
|
||
iconBg: 'bg-blue-50', iconColor: 'text-blue-600', titleClass: 'text-blue-700',
|
||
btnClass: 'bg-indigo-900 text-white hover:bg-indigo-800'
|
||
}
|
||
]
|
||
|
||
const promoCategories = [
|
||
{ title: 'Data', desc: 'เรียนรู้และฝึกฝนกระบวนการคิดสร้างมูลค่าให้ธุรกิจด้วยข้อมูล', icon: 'analytics' },
|
||
{ title: 'Design', desc: 'ออกแบบ Digital Product เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีที่สุด', icon: 'palette' },
|
||
{ title: 'Tech', desc: 'พร้อมเป็นที่ต้องการของตลาดแรงงานด้วยทักษะการเขียนโปรแกรม', icon: 'code' },
|
||
{ title: 'Business', desc: 'พลิกโฉมธุรกิจในยุคดิจิทัลด้วยการเข้าถึงลูกค้าในช่องทางและเวลาที่เหมาะสม', icon: 'trending_up' }
|
||
]
|
||
|
||
const categories = ref<any[]>([])
|
||
const topCourses = ref<any[]>([])
|
||
const selectedCategory = ref('all')
|
||
const isLoading = ref(false)
|
||
const currentSlide = ref(0)
|
||
const courseChunks = computed(() => {
|
||
const chunkSize = 4
|
||
const chunks = []
|
||
if (!topCourses.value) return []
|
||
for (let i = 0; i < topCourses.value.length; i += chunkSize) {
|
||
chunks.push(topCourses.value.slice(i, i + chunkSize))
|
||
}
|
||
return chunks
|
||
})
|
||
|
||
const loadData = async () => {
|
||
isLoading.value = true
|
||
try {
|
||
const [catRes, courseRes] = await Promise.all([
|
||
fetchCategories(),
|
||
fetchCourses({ limit: 8, forceRefresh: true })
|
||
])
|
||
|
||
if (catRes.success) categories.value = catRes.data || []
|
||
if (courseRes.success) topCourses.value = courseRes.data || []
|
||
} catch (err) {
|
||
console.error('Failed to load landing page data:', err)
|
||
} finally {
|
||
isLoading.value = false
|
||
}
|
||
}
|
||
|
||
const goBrowse = (slug: string) => {
|
||
navigateTo({ path: '/browse', query: { category: slug } })
|
||
}
|
||
|
||
watch(selectedCategory, async (newVal) => {
|
||
isLoading.value = true
|
||
try {
|
||
const params: any = { limit: 8 }
|
||
if (newVal !== 'all') {
|
||
const category = categories.value.find(c => c.slug === newVal)
|
||
if (category) {
|
||
params.category_id = category.id
|
||
}
|
||
}
|
||
const res = await fetchCourses(params)
|
||
if (res.success) {
|
||
topCourses.value = res.data || []
|
||
currentSlide.value = 0 // Reset carousel on filter change
|
||
}
|
||
} catch (err) {
|
||
console.error('Error filtering courses:', err)
|
||
} finally {
|
||
isLoading.value = false
|
||
}
|
||
})
|
||
|
||
onMounted(() => {
|
||
loadData()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="landing-page bg-white min-h-screen">
|
||
<!-- Hero Section -->
|
||
<header class="relative pt-32 pb-16 md:pt-40 md:pb-20 overflow-hidden bg-white">
|
||
<!-- Decorative Background -->
|
||
<div class="absolute top-0 right-0 w-[45%] h-[105%] bg-blue-50/50 rounded-bl-[12rem] -z-10 animate-fade-in"/>
|
||
|
||
<div class="container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 items-center gap-16">
|
||
<div class="hero-left slide-up">
|
||
<div class="flex items-center gap-3 mb-8 text-blue-600">
|
||
<q-icon name="stars" size="28px" />
|
||
<span class="text-sm font-black tracking-widest uppercase">E-Learning Platform</span>
|
||
</div>
|
||
<h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 leading-[1.2] mb-8 tracking-normal">
|
||
คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
|
||
</h1>
|
||
<p class="text-slate-500 text-lg md:text-xl font-medium mb-12 leading-relaxed max-w-xl slide-up" style="animation-delay: 0.1s;">
|
||
แหล่งรวมคอร์สออนไลน์คุณภาพสูงที่จะช่วยอัปสกิลให้คุณทำงานเก่งขึ้น พัฒนาทักษะที่ตลาดต้องการ พร้อมให้คุณก้าวไปข้างหน้าได้อย่างมั่นใจ!
|
||
</p>
|
||
|
||
<!-- Search Bar Pill -->
|
||
<div class="flex flex-col sm:flex-row gap-4 mb-10 slide-up" style="animation-delay: 0.2s;">
|
||
<q-btn
|
||
unelevated
|
||
rounded
|
||
color="primary"
|
||
label="ดูคอร์สเรียนทั้งหมด"
|
||
class="px-10 h-16 font-black text-white text-xl shadow-xl shadow-blue-600/20 hover:scale-105 transition-transform"
|
||
no-caps
|
||
to="/browse"
|
||
/>
|
||
<q-btn
|
||
outline
|
||
rounded
|
||
color="primary"
|
||
label="สมัครสมาชิกฟรี"
|
||
class="px-10 h-16 font-black text-xl border-2 hover:bg-blue-50"
|
||
no-caps
|
||
to="/auth/register"
|
||
v-if="!user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Visual Showcase -->
|
||
<div class="hero-right flex justify-center md:justify-end items-center slide-up" style="animation-delay: 0.2s;">
|
||
<div class="relative w-full max-w-xl">
|
||
<!-- Main Illustration -->
|
||
<div class="relative z-10 animate-float">
|
||
<img
|
||
src="/img/elearning.png"
|
||
alt="E-Learning Illustration"
|
||
class="w-full h-auto drop-shadow-2xl"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Decorative shapes behind the image -->
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-blue-50/50 rounded-full blur-3xl -z-10" />
|
||
<div class="absolute -top-10 -left-10 w-32 h-32 bg-amber-100 rounded-[3rem] -z-10 animate-pulse" />
|
||
<div class="absolute -bottom-10 -right-10 w-48 h-48 bg-blue-100 rounded-full -z-10 animate-pulse" style="animation-delay: -2s;" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
|
||
<div class="container mx-auto px-6 lg:px-12">
|
||
<div class="text-center mb-16 slide-up">
|
||
<h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-6 px-4">
|
||
เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
|
||
</h2>
|
||
<p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
|
||
เราจึงตั้งใจออกแบบบทเรียนให้ <span class="text-blue-600 font-bold">‘เข้าใจง่าย’</span> และ <span class="text-blue-600 font-bold">‘นำไปใช้ได้จริง’</span> เพื่อให้ทุกก้าวของคุณ มั่นคงและไปถึงเป้าหมายได้สำเร็จ
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Grid Container (Bento Layout) -->
|
||
<div class="relative">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<div v-for="(card, i) in stepOneCards" :key="i"
|
||
class="group cursor-pointer rounded-3xl p-6 flex flex-col justify-between transition-all hover:-translate-y-1 shadow-lg hover:shadow-2xl overflow-hidden relative"
|
||
:class="[
|
||
card.bgClass,
|
||
i === 0 ? 'lg:row-span-2 min-h-[380px]' : 'min-h-[220px]'
|
||
]"
|
||
@click="goBrowse(card.categorySlug)"
|
||
>
|
||
<!-- Background Accent -->
|
||
<div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2" />
|
||
|
||
<div>
|
||
<span class="text-[10px] font-bold uppercase tracking-[0.15em] opacity-80 mb-3 block" :class="card.textClass === 'text-white' ? 'text-white/80' : 'text-slate-900/60'">ก้าวแรกของ</span>
|
||
<h3 class="text-2xl font-bold leading-tight tracking-tight mb-2" :class="card.textClass">{{ card.title }}</h3>
|
||
</div>
|
||
|
||
<div class="space-y-4 relative z-10">
|
||
<p class="text-sm font-medium leading-relaxed opacity-90" :class="card.textClass">{{ card.desc }}</p>
|
||
<div class="flex justify-end">
|
||
<div class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-105 backdrop-blur-sm"
|
||
:class="[i === 0 ? 'w-12 h-12' : '']">
|
||
<q-icon name="arrow_forward" :size="i === 0 ? '24px' : '20px'" :class="card.textClass" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 2: "Value Proposition" - Why Online Learning here? -->
|
||
<section class="pt-12 pb-12 md:pt-20 md:pb-20 bg-white relative overflow-hidden">
|
||
<!-- Decorative background blur -->
|
||
<div class="absolute top-1/2 left-0 -translate-y-1/2 w-96 h-96 bg-blue-100/50 rounded-full blur-[100px] -z-10" />
|
||
|
||
<div class="container mx-auto px-6 lg:px-12">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
||
<!-- Left side: Visual representation -->
|
||
<div class="relative slide-up">
|
||
<div class="relative z-10 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-[4rem] p-12 md:p-20 shadow-3xl overflow-hidden group">
|
||
<!-- Animated background shapes -->
|
||
<div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-110 transition-transform duration-1000" />
|
||
<div class="absolute bottom-0 left-0 w-48 h-48 bg-amber-400/20 rounded-full translate-y-1/2 -translate-x-1/2" />
|
||
|
||
<div class="relative z-20 flex flex-col items-center text-center text-white">
|
||
<div class="w-24 h-24 md:w-32 md:h-32 bg-white/20 backdrop-blur-md rounded-[2.5rem] flex items-center justify-center mb-8 shadow-inner">
|
||
<q-icon name="laptop_mac" size="64px" class="text-white" />
|
||
</div>
|
||
<h3 class="text-3xl md:text-5xl font-black leading-[1.2] md:leading-[1.15] tracking-tight mb-0 pt-1 overflow-visible">
|
||
คอร์สออนไลน์<br class="hidden md:block" />
|
||
ที่ออกแบบมาสำหรับคุณ
|
||
</h3>
|
||
<p class="mt-5 text-blue-100/90 text-base md:text-lg font-medium leading-relaxed max-w-md">
|
||
เรียนรู้ทักษะใหม่จากผู้เชี่ยวชาญตัวจริง พร้อมเนื้อหาที่เข้มข้นและใช้งานได้จริง
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Stats pill -->
|
||
<div class="absolute -bottom-10 -right-6 md:right-10 z-30 bg-white p-6 rounded-3xl shadow-2xl animate-float">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-600">
|
||
<q-icon name="query_builder" size="28px" />
|
||
</div>
|
||
<div>
|
||
<div class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Access Status</div>
|
||
<div class="text-xl font-black text-slate-900">เข้าถึงได้ตลอดชีพ</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right side: Content & Benefits -->
|
||
<div class="slide-up" style="animation-delay: 0.2s;">
|
||
<div class="mb-12">
|
||
<span class="inline-flex items-center px-5 py-2 rounded-full bg-blue-50 text-blue-600 text-xs md:text-sm font-extrabold uppercase tracking-widest mb-5 border border-blue-100">
|
||
Premium Learning Experience
|
||
</span>
|
||
<h2 class="text-4xl md:text-6xl font-bold text-slate-900 leading-[1.2] md:leading-[1.2] tracking-tight mb-0 pt-1 overflow-visible">
|
||
ก้าวข้ามทุกขีดจำกัด<br />
|
||
ด้วยการเรียนรู้ที่ <span class="text-blue-600">“อิสระ”</span>
|
||
</h2>
|
||
<p class="mt-6 text-slate-500 text-lg md:text-xl font-medium leading-relaxed max-w-2xl">
|
||
เราคัดสรรและคราฟต์ทุกคอร์สเรียนเพื่อให้มั่นใจว่าคุณจะได้รับประสบการณ์การเรียนรู้ที่ดีที่สุด ไม่ว่าจะอยู่ที่ไหนหรือเวลาใดก็ตาม
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||
<div v-for="(feature, f) in learningStyles[0].features" :key="f"
|
||
class="flex items-center gap-4 p-5 rounded-3xl bg-slate-50 border border-slate-100 group hover:border-blue-200 hover:bg-white hover:shadow-xl transition-all duration-300"
|
||
>
|
||
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-white flex items-center justify-center text-green-500 shadow-sm group-hover:bg-green-500 group-hover:text-white transition-colors">
|
||
<q-icon name="check" size="20px" />
|
||
</div>
|
||
<span class="text-base font-black text-slate-700 leading-snug">{{ feature }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<q-btn
|
||
unelevated
|
||
rounded
|
||
color="primary"
|
||
label="เริ่มต้นบทเรียนแรกของคุณ"
|
||
class="px-12 h-20 font-black text-xl md:text-2xl transition-all shadow-xl hover:shadow-2xl hover:-translate-y-1"
|
||
no-caps
|
||
:to="user ? '/browse' : '/auth/login'"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- Section 4: "คอร์สออนไลน์" -->
|
||
<section class="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
|
||
<div class="container mx-auto px-6 lg:px-12">
|
||
<div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
|
||
<div class="slide-up">
|
||
<h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
|
||
<p class="text-slate-500 font-bold text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
|
||
</div>
|
||
<NuxtLink to="/browse" class="flex items-center gap-3 px-8 py-3 rounded-full border-2 border-blue-600 text-blue-700 font-bold hover:bg-blue-600 hover:text-white transition-all slide-up">
|
||
คอร์สออนไลน์ทั้งหมด <q-icon name="arrow_forward" size="20px" />
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<!-- Filter Tabs / Pills -->
|
||
<div class="flex items-center gap-4 mb-8 overflow-x-auto pb-6 no-scrollbar slide-up">
|
||
<button
|
||
class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
|
||
:class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
|
||
@click="selectedCategory = 'all'"
|
||
>
|
||
ทั้งหมด
|
||
</button>
|
||
<button
|
||
v-for="category in categories"
|
||
:key="category.id"
|
||
class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
|
||
:class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
|
||
@click="selectedCategory = category.slug"
|
||
>
|
||
{{ getLocalizedText(category.name) }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Courses Carousel -->
|
||
<div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
||
<div v-for="i in 4" :key="i" class="bg-white rounded-[3rem] h-[480px] animate-pulse" />
|
||
</div>
|
||
|
||
<div v-else class="relative group/carousel slide-up">
|
||
<q-carousel
|
||
v-model="currentSlide"
|
||
transition-prev="slide-right"
|
||
transition-next="slide-left"
|
||
swipeable
|
||
animated
|
||
control-color="primary"
|
||
padding
|
||
height="auto"
|
||
class="bg-transparent rounded-none"
|
||
>
|
||
<q-carousel-slide
|
||
v-for="(chunk, pageIndex) in courseChunks"
|
||
:key="pageIndex"
|
||
:name="pageIndex"
|
||
class="p-4"
|
||
>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
||
<CourseCard
|
||
v-for="course in chunk"
|
||
:key="course.id"
|
||
v-bind="{ ...course, image: course.thumbnail_url }"
|
||
/>
|
||
</div>
|
||
</q-carousel-slide>
|
||
</q-carousel>
|
||
|
||
<!-- Custom Carousel Navigation -->
|
||
<button
|
||
v-if="courseChunks.length > 1"
|
||
class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
|
||
@click="currentSlide = Math.max(0, currentSlide - 1)"
|
||
:disabled="currentSlide === 0"
|
||
:class="{ 'opacity-50 cursor-not-allowed': currentSlide === 0 }"
|
||
>
|
||
<q-icon name="chevron_left" size="32px" />
|
||
</button>
|
||
<button
|
||
v-if="courseChunks.length > 1"
|
||
class="absolute -right-4 md:-right-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
|
||
@click="currentSlide = Math.min(courseChunks.length - 1, currentSlide + 1)"
|
||
:disabled="currentSlide === courseChunks.length - 1"
|
||
:class="{ 'opacity-50 cursor-not-allowed': currentSlide === courseChunks.length - 1 }"
|
||
>
|
||
<q-icon name="chevron_right" size="32px" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
|
||
<style scoped>
|
||
.landing-page {
|
||
font-family: var(--font-main);
|
||
}
|
||
|
||
.no-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.no-scrollbar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes slide-up {
|
||
from { opacity: 0; transform: translateY(40px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.slide-up {
|
||
animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0) rotate(0); }
|
||
50% { transform: translateY(-20px) rotate(5deg); }
|
||
}
|
||
|
||
.animate-float {
|
||
animation: float 6s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes fade-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
.animate-fade-in {
|
||
animation: fade-in 1s ease-out forwards;
|
||
}
|
||
|
||
/* Typography Overrides */
|
||
h1, h2, h3 {
|
||
letter-spacing: normal;
|
||
}
|
||
|
||
/* Hover effects */
|
||
.hero-right:hover .animate-float {
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
/* Responsive Grid Adjustments */
|
||
@media (max-width: 1200px) {
|
||
.career-cards-grid {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.career-cards-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
</style>
|