569 lines
23 KiB
Vue
569 lines
23 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 - ระบบการเรียนการสอนออนไลน์'
|
|
})
|
|
|
|
import { CATEGORY_CARDS, WHY_CHOOSE_US } from '@/constants/landing'
|
|
|
|
const { fetchCategories } = useCategory()
|
|
const { fetchCourses, getLocalizedText } = useCourse()
|
|
const { user } = useAuth()
|
|
|
|
const categoryCards = CATEGORY_CARDS
|
|
const whyChooseUs = WHY_CHOOSE_US
|
|
|
|
//ระดับความยาก
|
|
const levelModel = ref('ระดับทั้งหมด')
|
|
const levelOptions = ['ระดับทั้งหมด','ระดับเริ่มต้น', 'ระดับกลาง', 'ระดับสูง']
|
|
|
|
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 || topCourses.value.length === 0) 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: 12, 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: 12 }
|
|
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">
|
|
<!-- Section 1: Hero Section -->
|
|
<section class="container mx-auto py-24 md:py-24 lg:py-28 px-6 lg:px-12 pb-16">
|
|
<div class="flex flex-col lg:flex-row items-center gap-10 lg:gap-10 justify-between animate-fade-in">
|
|
<!-- Left Content -->
|
|
<div class="flex flex-col items-start gap-6 flex-1 max-w-2xl ">
|
|
<!-- Badge -->
|
|
<div class="flex items-center gap-2 bg-[#E9EFFD] px-3 py-1.5 rounded-full slide-up">
|
|
<span class="w-2 h-2 rounded-full bg-blue-600 block" />
|
|
<span class="text-blue-600 font-bold text-xs uppercase tracking-wide">
|
|
มีคอร์สเรียนใหม่
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Heading -->
|
|
<h1 class="text-4xl sm:text-5xl lg:text-[55px] font-bold leading-tight lg:leading-[66px] slide-up" style="animation-delay: 0.2s;">
|
|
<span class="text-slate-900">ขยายขอบเขตความรู้ของคุณ</span><br>
|
|
<span class="text-blue-600">ด้วยการเรียนรู้ออนไลน์</span>
|
|
</h1>
|
|
|
|
<!-- Subtitle -->
|
|
<p class="text-slate-500 text-lg sm:text-xl leading-relaxed slide-up" style="animation-delay: 0.3s;">
|
|
จุดประกายความรู้ของคุณ และเริ่มต้นอัปสกิลกับผู้เชี่ยวชาญ
|
|
ในอุตสาหกรรมที่มีความรู้รอบด้านหลากหลายในหลายสาขา
|
|
เรียนได้ทุกที่ ทุกเวลา
|
|
</p>
|
|
|
|
<!-- Buttons -->
|
|
<div class=" w-full flex flex-col sm:flex-row items-center gap-4 pt-5 slide-up" style="animation-delay: 0.4s;">
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
color="blue-600"
|
|
label="ดูคอร์สเรียน"
|
|
class="px-10 py-4 w-full sm:w-auto rounded-3xl font-semibold text-white text-lg shadow-xl shadow-blue-600/20 transition-transform"
|
|
no-caps
|
|
to="/browse"
|
|
/>
|
|
<q-btn
|
|
outline
|
|
rounded
|
|
label="สมัครสมาชิกฟรี"
|
|
color="grey-8"
|
|
class="px-10 py-4 w-full sm:w-auto btn-user rounded-3xl font-semibold text-lg hover:bg-blue-50 "
|
|
no-caps
|
|
to="/auth/register"
|
|
v-if="!user"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right - Hero Image -->
|
|
<div class="flex-1 w-full max-w-lg md:max-w-md lg:max-w-xl pl-0 py-10">
|
|
<div class="relative rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] aspect-square">
|
|
<img
|
|
src="https://api.builder.io/api/v1/image/assets/TEMP/11ba9b46c799fac950967377f8158fa942c1a6b8?width=1184"
|
|
alt="Students collaborating"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
|
|
|
|
<!-- Course Card Overlay -->
|
|
<!-- <div class="absolute bottom-5 left-5 right-5">
|
|
<div class="bg-white/85 backdrop-blur-sm border border-white/20 rounded-3xl px-6 py-5">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-2xl bg-blue-600/20">
|
|
<q-icon name="o_play_circle" size="25px" class="text-blue-600" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-slate-900 font-bold text-sm leading-5">
|
|
เรียนรู้การออกแบบ UI/UX
|
|
</span>
|
|
<span class="text-slate-500 text-xs leading-4 mt-0.5">
|
|
คอร์สวิดีโอ • 12 บทเรียน
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: ทำไมต้องเลือกแพลตฟอร์มของเรา -->
|
|
<section class="pt-20 pb-14 bg-white relative flex-col">
|
|
<div class="container mx-auto px-6 lg:px-12">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-16 slide-up">
|
|
<h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-6">
|
|
ทำไมต้องเลือกแพลตฟอร์มของเรา?
|
|
</h2>
|
|
<p class="text-slate-500 text-base font-normal md:text-xl max-w-3xl mx-auto leading-relaxed">
|
|
เรามีเครื่องมือและความเชี่ยวชาญที่จะช่วยให้คุณประสบความสำเร็จในการเปลี่ยนสายอาชีพและการสร้างทักษะระดับมืออาชีพ
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Horizontal Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div v-for="(item, i) in whyChooseUs" :key="i"
|
|
class="slide-up p-10 rounded-2xl bg-[#F8FAFC] border border-[#f1f2f9] hover:border-[#2463eb61] hover:bg-white transition-all duration-500 group"
|
|
:style="`animation-delay: ${i * 0.1}s`"
|
|
>
|
|
<div class="w-14 h-14 rounded-full bg-[#E3EBFA] flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-500">
|
|
<q-icon :name="item.icon" size="28px" class="text-blue-600" />
|
|
</div>
|
|
<h3 class="text-[1.3rem] font-bold text-slate-900 group-hover:text-blue-600 transition-colors">
|
|
{{ item.title }}
|
|
</h3>
|
|
<p class="text-slate-500 text-lg leading-relaxed ">
|
|
{{ item.desc }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: เลือกเรียนตามเรื่องที่คุณสนใจ -->
|
|
<section class="py-20 md:py-24 bg-white">
|
|
<div class="container mx-auto px-6 lg:px-12">
|
|
<!-- Heading -->
|
|
<div class="mb-12 slide-up">
|
|
<h2 class="text-[1.4rem] text-3xl md:text-4xl font-semibold text-slate-900 px-4">
|
|
เลือกเรียนตามเรื่องที่คุณสนใจ
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Horizontal Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center gap-6 px-4">
|
|
<div v-for="(card, i) in categoryCards" :key="i"
|
|
class="cursor-pointer bg-white rounded-3xl p-6 border border-slate-200/80 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:shadow-2xl hover:shadow-blue-600/5 hover:-translate-y-1 hover:border-[#2463eb61] transition-all duration-500 flex items-center gap-5"
|
|
@click="goBrowse(card.slug)"
|
|
>
|
|
<!-- Icon Box -->
|
|
<div class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center bg-slate-50 group-hover:scale-110 transition-transform duration-500">
|
|
<q-icon :name="card.icon" size="35px" class="text-blue-600" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-grow pr-2">
|
|
<h3 class="text-lg md:text-xl font-bold text-slate-900 mb-1 group-hover:text-blue-600 transition-colors leading-tight">
|
|
{{ card.title }}
|
|
</h3>
|
|
<p class="text-slate-600 text-xs md:text-sm leading-relaxed opacity-70">
|
|
{{ card.desc }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Arrow -->
|
|
<div class="gt-xs flex-shrink-0 text-slate-300 group-hover:text-blue-600 transition-colors transform group-hover:translate-x-1 duration-300">
|
|
<q-icon name="chevron_right" size="24px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: "คอร์สออนไลน์" -->
|
|
<section class="py-12 md:py-24 bg-slate-50">
|
|
<div class="container mx-auto px-6 lg:px-12">
|
|
<!-- Heading -->
|
|
<div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-5 gap-8">
|
|
<div class="slide-up">
|
|
<h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
|
|
</div>
|
|
<NuxtLink to="/browse" class="flex items-center py-3 text-lg rounded-full font-bold ">
|
|
<span class="text-blue-600 hover:text-blue-500 ">ดูคอร์สทั้งหมด</span>
|
|
<q-icon name="arrow_forward" size="15px" class="text-blue-600 ml-2" />
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Filters Row -->
|
|
<div class="flex items-center gap-2 mb-8 overflow-x-auto no-scrollbar slide-up justify-between">
|
|
<!-- Category Filters -->
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-2"
|
|
:class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-100 text-slate-700 hover:border-slate-300'"
|
|
@click="selectedCategory = 'all'"
|
|
>
|
|
<q-icon name="o_check_circle" size="20px" class="mr-1" />
|
|
ทั้งหมด
|
|
</button>
|
|
|
|
<button
|
|
v-for="category in categories"
|
|
:key="category.id"
|
|
class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-[1.5px]"
|
|
:class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-200 text-slate-700 hover:border-slate-300'"
|
|
@click="selectedCategory = category.slug"
|
|
>
|
|
<q-icon :name="category.icon || 'o_label'" size="20px" class="mr-1" />
|
|
{{ getLocalizedText(category.name) }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Level Dropdown -->
|
|
<!-- <div class="flex items-center gap-2 font-medium">
|
|
<q-select
|
|
borderless
|
|
v-model="levelModel"
|
|
:options="levelOptions"
|
|
dropdown-icon="o_keyboard_arrow_down"
|
|
class="text-lg"
|
|
popup-content-class="rounded-lg text-lg shadow-sm text-slate-700"
|
|
>
|
|
<template v-slot:before>
|
|
<div class="text-slate-700 text-lg">ระดับความยาก:</div>
|
|
</template>
|
|
</q-select>
|
|
</div> -->
|
|
</div>
|
|
|
|
<!-- Courses Carousel -->
|
|
<div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div v-for="i in 4" :key="i" class="bg-white rounded-2xl h-[450px] 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-0"
|
|
>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div
|
|
v-for="course in chunk"
|
|
:key="course.id"
|
|
class="flex flex-col flex-1 min-w-0 rounded-2xl border border-slate-100 bg-white shadow-sm overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-pointer"
|
|
@click="navigateTo(`/course/${course.id}`)"
|
|
>
|
|
<!-- Image-->
|
|
<div class="relative flex-shrink-0">
|
|
<img
|
|
v-if="course.thumbnail_url"
|
|
:src="course.thumbnail_url"
|
|
:alt="getLocalizedText(course.title)"
|
|
class="w-full h-[150px] sm:h-[180px] lg:h-[200px] object-cover"
|
|
/>
|
|
<div v-else class="w-full h-[150px] sm:h-[180px] lg:h-[200px] bg-slate-100 flex items-center justify-center">
|
|
<q-icon name="o_image" size="40px" class="text-slate-300" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex flex-col flex-1 p-6">
|
|
|
|
|
|
<!-- Title -->
|
|
<h3 class="text-[#0F172A] font-semibold text-lg leading-snug mb-2 line-clamp-2">
|
|
{{ getLocalizedText(course.title) }}
|
|
</h3>
|
|
|
|
<!-- Description -->
|
|
<p class="text-slate-500 text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
|
|
{{ getLocalizedText(course.description) }}
|
|
</p>
|
|
|
|
|
|
|
|
<!-- Price + Button -->
|
|
<div class="flex items-center justify-between pt-6 border-t border-slate-100 gap-2">
|
|
<div class="flex flex-col">
|
|
<span v-if="course.price > 0" class="text-[#0F172A] font-bold text-xl">
|
|
{{ course.price.toLocaleString() }}.-
|
|
</span>
|
|
<span v-else class="text-green-600 font-bold text-xl">
|
|
ฟรี
|
|
</span>
|
|
</div>
|
|
<button class="flex items-center gap-2 px-4 py-2 rounded-full bg-[#2463EB]/10 hover:bg-[#2463EB]/20 transition-colors">
|
|
<q-icon name="o_remove_red_eye" size="18px" class="text-[#2463EB]" />
|
|
<span class="text-[#2463EB] font-medium text-sm">
|
|
รายละเอียด
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Section 5: "พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง" -->
|
|
<section class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-6 lg:px-12">
|
|
<div class="bg-blue-600 rounded-3xl px-8 py-20 md:px-18 text-center relative overflow-hidden">
|
|
<div class="gradient-background">
|
|
<div class="gradient-sphere sphere-1"></div>
|
|
<div class="gradient-sphere sphere-2"></div>
|
|
<div class="gradient-sphere sphere-3"></div>
|
|
</div>
|
|
<div class="grid-overlay"></div>
|
|
<div class="relative z-10">
|
|
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
|
|
พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง?
|
|
</h2>
|
|
<p class="text-blue-100 text-lg mb-8 max-w-xl mx-auto">
|
|
อัปสกิลและรับทักษะที่คุณต้องการเพื่อก้าวหน้าในระดับมืออาชีพ
|
|
เปิดประสบการณ์การเรียนรู้รูปแบบใหม่ สมัครเลยวันนี้เพื่อเริ่มต้นเข้าสู่บทเรียน
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
class="px-8 py-4 bg-white font-bold rounded-3xl hover:bg-slate-50 transition-colors"
|
|
no-caps
|
|
size="18px"
|
|
to="/browse"
|
|
>
|
|
<div class="text-blue-600">สำรวจคอร์สเรียน</div>
|
|
</q-btn>
|
|
<q-btn
|
|
outline
|
|
rounded
|
|
label="สมัครฟรีวันนี้"
|
|
color="white"
|
|
class="px-8 py-4 font-bold rounded-3xl hover:bg-white/10 transition-colors"
|
|
no-caps
|
|
size="18px"
|
|
to="/auth/register"
|
|
v-if="!user"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</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 fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 1s ease-out forwards;
|
|
}
|
|
|
|
/* Hero Right Hover State */
|
|
.hero-right:hover .relative {
|
|
transform: translateY(-10px);
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.gradient-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gradient-sphere {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
}
|
|
|
|
.sphere-1 {
|
|
width: 30vw;
|
|
height: 30vw;
|
|
background: linear-gradient(40deg, rgba(255, 255, 255, 0.41), rgba(255, 255, 255, 0.164));
|
|
top: 10%;
|
|
left: -30%;
|
|
animation: float-1 15s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.sphere-2 {
|
|
width: 45vw;
|
|
height: 45vw;
|
|
background: linear-gradient(240deg, rgba(16, 33, 121, 0.245), rgba(155, 169, 239, 0.263));
|
|
bottom: -20%;
|
|
right: -35%;
|
|
animation: float-2 18s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.sphere-3 {
|
|
width: 30vw;
|
|
height: 30vw;
|
|
background: linear-gradient(120deg, rgba(133, 89, 255, 0.5), rgba(98, 216, 249, 0.3));
|
|
top: 60%;
|
|
left: 20%;
|
|
animation: float-3 20s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes float-1 {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
100% { transform: translate(10%, 10%) scale(1.1); }
|
|
}
|
|
|
|
@keyframes float-2 {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
100% { transform: translate(-10%, -5%) scale(1.15); }
|
|
}
|
|
|
|
@keyframes float-3 {
|
|
0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
|
|
100% { transform: translate(-5%, 10%) scale(1.05); opacity: 0.6; }
|
|
}
|
|
|
|
.grid-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 40px 40px;
|
|
background-image:
|
|
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
|
z-index: 2;
|
|
}
|
|
</style>
|