<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mascot World</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: { primary: "#FF6B6B", secondary: "#4ECDC4" },
borderRadius: {
none: "0px",
sm: "4px",
DEFAULT: "8px",
md: "12px",
lg: "16px",
xl: "20px",
"2xl": "24px",
"3xl": "32px",
full: "9999px",
button: "8px",
},
},
},
};
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css"
/>
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Nunito', sans-serif;
overflow-x: hidden;
}
.splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease-in-out;
}
.splash-pattern {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(#FFD6D6 1px, transparent 1px), radial-gradient(#D6FFF6 1px, transparent 1px);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
opacity: 0.3;
}
.mascot-container {
position: relative;
width: 300px;
height: 300px;
margin-bottom: 30px;
}
.mascot-eye {
position: absolute;
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
transition: transform 0.2s;
}
.mascot-eye-left {
top: 120px;
left: 110px;
}
.mascot-eye-right {
top: 120px;
left: 170px;
}
.logo-fade {
opacity: 0;
transform: translateY(-20px);
animation: fadeIn 1s ease-in-out forwards 0.5s;
}
.enter-btn {
opacity: 0;
transform: translateY(20px);
animation: fadeIn 1s ease-in-out forwards 1s;
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.loading-bar {
width: 200px;
height: 4px;
background-color: #f0f0f0;
border-radius: 2px;
overflow: hidden;
margin-top: 20px;
opacity: 0;
animation: fadeIn 0.5s ease-in-out forwards;
}
.loading-progress {
height: 100%;
background-color: #FF6B6B;
width: 0;
animation: loading 2s ease-in-out forwards;
}
@keyframes loading {
to {
width: 100%;
}
}
.mascot-animation {
animation: bounce 2s infinite ease-in-out;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.main-content {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.nav-item {
position: relative;
}
.nav-item::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: #FF6B6B;
transition: width 0.3s ease;
}
.nav-item:hover::after {
width: 100%;
}
.mascot-hover {
position: absolute;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
pointer-events: none;
}
.nav-item:hover .mascot-hover {
opacity: 1;
transform: translateY(0);
}
.gallery-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.about-mascot {
transition: transform 0.3s ease;
}
.about-section:hover .about-mascot {
transform: rotate(5deg);
}
</style>
</head>
<body>
<!-- Splash Screen -->
<div class="splash-screen">
<div class="splash-pattern"></div>
<div class="logo-fade">
<h1 class="font-['Pacifico'] text-5xl text-primary">logo</h1>
</div>
<div class="mascot-container mascot-animation">
<img
src="https://readdy.ai/api/search-image?query=cute%20cartoon%20mascot%20character%2C%20friendly%20appearance%2C%20big%20eyes%2C%20colorful%2C%20playful%20pose%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style%2C%20minimalist%2C%20cheerful%20expression&width=300&height=300&seq=1&orientation=squarish"
alt="Mascot"
class="w-full h-full object-contain"
/>
<div class="mascot-eye mascot-eye-left"></div>
<div class="mascot-eye mascot-eye-right"></div>
</div>
<button
class="enter-btn bg-primary text-white px-8 py-3 rounded-button font-bold text-lg hover:bg-opacity-90 transition-all shadow-lg flex items-center"
>
<span>Enter Site</span>
<i class="ri-arrow-right-line ml-2"></i>
</button>
<div class="loading-bar">
<div class="loading-progress"></div>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<!-- Navigation -->
<nav class="bg-white shadow-sm py-4 px-6 sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="font-['Pacifico'] text-3xl text-primary">logo</a>
<div class="hidden md:flex space-x-8">
<a href="#" class="nav-item text-gray-800 font-semibold relative">
Home
<div class="mascot-hover w-8 h-8">
<img
src="https://readdy.ai/api/search-image?query=tiny%20cute%20cartoon%20mascot%20head%2C%20home%20icon%20concept%2C%20minimalist%2C%20cheerful&width=32&height=32&seq=2&orientation=squarish"
alt="Home Mascot"
class="w-full h-full"
/>
</div>
</a>
<a
href="#about"
class="nav-item text-gray-800 font-semibold relative"
>
About
<div class="mascot-hover w-8 h-8">
<img
src="https://readdy.ai/api/search-image?query=tiny%20cute%20cartoon%20mascot%20head%2C%20information%20icon%20concept%2C%20minimalist%2C%20cheerful&width=32&height=32&seq=3&orientation=squarish"
alt="About Mascot"
class="w-full h-full"
/>
</div>
</a>
<a
href="#gallery"
class="nav-item text-gray-800 font-semibold relative"
>
Gallery
<div class="mascot-hover w-8 h-8">
<img
src="https://readdy.ai/api/search-image?query=tiny%20cute%20cartoon%20mascot%20head%2C%20gallery%20icon%20concept%2C%20minimalist%2C%20cheerful&width=32&height=32&seq=4&orientation=squarish"
alt="Gallery Mascot"
class="w-full h-full"
/>
</div>
</a>
<a href="#" class="nav-item text-gray-800 font-semibold relative">
Contact
<div class="mascot-hover w-8 h-8">
<img
src="https://readdy.ai/api/search-image?query=tiny%20cute%20cartoon%20mascot%20head%2C%20contact%20icon%20concept%2C%20minimalist%2C%20cheerful&width=32&height=32&seq=5&orientation=squarish"
alt="Contact Mascot"
class="w-full h-full"
/>
</div>
</a>
</div>
<div
class="md:hidden w-8 h-8 flex items-center justify-center cursor-pointer"
>
<i class="ri-menu-line text-2xl"></i>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="bg-gradient-to-b from-white to-pink-50 py-20">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
Meet Our Friendly Mascot Family
</h1>
<p class="text-lg text-gray-600 mb-8">
Discover a world of colorful characters designed to bring joy
and personality to your brand. Our mascots are more than just
cute faces - they're storytellers!
</p>
<div class="flex space-x-4">
<button
class="bg-primary text-white px-6 py-3 rounded-button font-bold hover:bg-opacity-90 transition-all shadow-md whitespace-nowrap"
>
Explore Gallery
</button>
<button
class="bg-white text-primary border-2 border-primary px-6 py-3 rounded-button font-bold hover:bg-primary hover:bg-opacity-10 transition-all whitespace-nowrap"
>
Learn More
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative">
<div
class="absolute -top-10 -left-10 w-20 h-20 bg-yellow-100 rounded-full opacity-70"
></div>
<div
class="absolute -bottom-5 -right-5 w-16 h-16 bg-blue-100 rounded-full opacity-70"
></div>
<img
src="https://readdy.ai/api/search-image?query=group%20of%20cute%20cartoon%20mascot%20characters%2C%20different%20colors%20and%20styles%2C%20friendly%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style%2C%20playful%20poses%2C%20cheerful%20expressions&width=500&height=400&seq=6&orientation=landscape"
alt="Mascot Family"
class="relative z-10 rounded-lg shadow-xl"
/>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white about-section">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<img
src="https://readdy.ai/api/search-image?query=cute%20cartoon%20mascot%20character%20with%20information%20sign%2C%20friendly%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style%2C%20educational%20pose&width=150&height=150&seq=7&orientation=squarish"
alt="About Mascot"
class="w-32 h-32 mx-auto mb-6 about-mascot"
/>
<h2 class="text-4xl font-bold text-gray-800">About Our Mascots</h2>
<div class="w-24 h-1 bg-primary mx-auto mt-4"></div>
</div>
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-10 md:mb-0 pr-0 md:pr-10">
<h3 class="text-2xl font-bold text-gray-800 mb-4">Our Story</h3>
<p class="text-gray-600 mb-6">
We started creating mascot characters in 2018 with a simple
mission: to help brands connect with their audience on a more
emotional level. Our team of talented artists combines technical
expertise with boundless creativity to craft characters that are
not just visually appealing, but also meaningful and memorable.
</p>
<p class="text-gray-600 mb-6">
Each mascot we design is unique, with its own personality,
backstory, and set of expressions. We believe that a
well-designed mascot can become the heart of your brand
identity, creating instant recognition and fostering customer
loyalty.
</p>
<p class="text-gray-600">
Whether you're a startup looking to establish your brand
identity or an established company seeking to refresh your
image, our mascots can help you stand out in a crowded
marketplace and create lasting connections with your audience.
</p>
</div>
<div class="md:w-1/2">
<div class="bg-gray-50 p-8 rounded-lg shadow-sm">
<h3 class="text-2xl font-bold text-gray-800 mb-6">
Mascot Expressions
</h3>
<div class="grid grid-cols-2 gap-6">
<div class="bg-white p-4 rounded shadow-sm text-center">
<img
src="https://readdy.ai/api/search-image?query=cute%20cartoon%20mascot%20character%20happy%20expression%2C%20friendly%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style&width=120&height=120&seq=8&orientation=squarish"
alt="Happy Mascot"
class="w-24 h-24 mx-auto mb-2"
/>
<p class="font-semibold text-gray-700">Happy</p>
</div>
<div class="bg-white p-4 rounded shadow-sm text-center">
<img
src="https://readdy.ai/api/search-image?query=cute%20cartoon%20mascot%20character%20surprised%20expression%2C%20friendly%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style&width=120&height=120&seq=9&orientation=squarish"
alt="Surprised Mascot"
class="w-24 h-24 mx-auto mb-2"
/>
<p class="font-semibold text-gray-700">Surprised</p>
</div>
<div class="bg-white p-4 rounded shadow-sm text-center">
<img
src="https://readdy.ai/api/search-image?query=cute%20cartoon%20mascot%20character%20thinking%20expression%2C%20friendly%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style&width=120&height=120&seq=10&orientation=squarish"
alt="Thinking Mascot"
class="w-24 h-24 mx-auto mb-2"
/>
<p class="font-semibold text-gray-700">Thinking</p>
</div>
<div class="bg-white p-4 rounded shadow-sm text-center">
<img
src="https://readdy.ai/api/search-image?query=cute%20cartoon%20mascot%20character%20excited%20expression%2C%20friendly%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style&width=120&height=120&seq=11&orientation=squarish"
alt="Excited Mascot"
class="w-24 h-24 mx-auto mb-2"
/>
<p class="font-semibold text-gray-700">Excited</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-gray-800">Featured Mascots</h2>
<p class="text-gray-600 mt-4 max-w-2xl mx-auto">
Browse our collection of mascot characters designed for various
industries and purposes. Click on any image to view details.
</p>
<div class="w-24 h-1 bg-primary mx-auto mt-4"></div>
</div>
<div class="flex justify-center mb-10">
<div class="inline-flex bg-white p-1 rounded-full shadow-sm">
<button
class="px-6 py-2 rounded-full bg-primary text-white font-semibold whitespace-nowrap"
>
All
</button>
<button
class="px-6 py-2 rounded-full text-gray-700 font-semibold hover:bg-gray-100 transition-all whitespace-nowrap"
>
Business
</button>
<button
class="px-6 py-2 rounded-full text-gray-700 font-semibold hover:bg-gray-100 transition-all whitespace-nowrap"
>
Education
</button>
<button
class="px-6 py-2 rounded-full text-gray-700 font-semibold hover:bg-gray-100 transition-all whitespace-nowrap"
>
Technology
</button>
<button
class="px-6 py-2 rounded-full text-gray-700 font-semibold hover:bg-gray-100 transition-all whitespace-nowrap"
>
Sports
</button>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Gallery Item 1 -->
<div
class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"
>
<div class="relative">
<img
src="https://readdy.ai/api/search-image?query=cute%20business%20cartoon%20mascot%20character%20in%20suit%2C%20professional%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style%2C%20confident%20pose&width=400&height=300&seq=12&orientation=landscape"
alt="Business Mascot"
class="w-full h-64 object-cover object-top"
/>
<div
class="absolute top-4 right-4 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full"
>
Business
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">
Corporate Buddy
</h3>
<p class="text-gray-600 mb-4">
A professional mascot perfect for business applications,
financial services, and corporate branding.
</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500"
>Created: May 10, 2025</span
>
<button class="text-primary font-semibold flex items-center">
View Details
<i class="ri-arrow-right-line ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Gallery Item 2 -->
<div
class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"
>
<div class="relative">
<img
src="https://readdy.ai/api/search-image?query=cute%20education%20cartoon%20mascot%20character%20with%20books%20and%20glasses%2C%20scholarly%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style%2C%20teaching%20pose&width=400&height=300&seq=13&orientation=landscape"
alt="Education Mascot"
class="w-full h-64 object-cover object-top"
/>
<div
class="absolute top-4 right-4 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full"
>
Education
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">
Scholar Owl
</h3>
<p class="text-gray-600 mb-4">
An educational mascot designed for schools, learning
platforms, and educational content creators.
</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500"
>Created: April 28, 2025</span
>
<button class="text-primary font-semibold flex items-center">
View Details
<i class="ri-arrow-right-line ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Gallery Item 3 -->
<div
class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"
>
<div class="relative">
<img
src="https://readdy.ai/api/search-image?query=cute%20tech%20cartoon%20mascot%20character%20with%20gadgets%2C%20futuristic%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style%2C%20tech-savvy%20pose&width=400&height=300&seq=14&orientation=landscape"
alt="Tech Mascot"
class="w-full h-64 object-cover object-top"
/>
<div
class="absolute top-4 right-4 bg-purple-500 text-white text-xs font-bold px-3 py-1 rounded-full"
>
Technology
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">Tech Buddy</h3>
<p class="text-gray-600 mb-4">
A tech-savvy mascot perfect for apps, software companies, and
technology brands.
</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500"
>Created: May 15, 2025</span
>
<button class="text-primary font-semibold flex items-center">
View Details
<i class="ri-arrow-right-line ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Gallery Item 4 -->
<div
class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"
>
<div class="relative">
<img
src="https://readdy.ai/api/search-image?query=cute%20sports%20cartoon%20mascot%20character%20with%20athletic%20equipment%2C%20sporty%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style%2C%20action%20pose&width=400&height=300&seq=15&orientation=landscape"
alt="Sports Mascot"
class="w-full h-64 object-cover object-top"
/>
<div
class="absolute top-4 right-4 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full"
>
Sports
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">
Athletic Ace
</h3>
<p class="text-gray-600 mb-4">
An energetic mascot designed for sports teams, fitness apps,
and athletic brands.
</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500"
>Created: May 3, 2025</span
>
<button class="text-primary font-semibold flex items-center">
View Details
<i class="ri-arrow-right-line ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Gallery Item 5 -->
<div
class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"
>
<div class="relative">
<img
src="https://readdy.ai/api/search-image?query=cute%20food%20cartoon%20mascot%20character%2C%20culinary%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style%2C%20chef%20pose&width=400&height=300&seq=16&orientation=landscape"
alt="Food Mascot"
class="w-full h-64 object-cover object-top"
/>
<div
class="absolute top-4 right-4 bg-yellow-500 text-white text-xs font-bold px-3 py-1 rounded-full"
>
Food
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">
Chef Delight
</h3>
<p class="text-gray-600 mb-4">
A culinary mascot perfect for restaurants, food delivery
services, and cooking applications.
</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500"
>Created: April 20, 2025</span
>
<button class="text-primary font-semibold flex items-center">
View Details
<i class="ri-arrow-right-line ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Gallery Item 6 -->
<div
class="gallery-item bg-white rounded-lg overflow-hidden shadow-md"
>
<div class="relative">
<img
src="https://readdy.ai/api/search-image?query=cute%20gaming%20cartoon%20mascot%20character%20with%20controller%2C%20gamer%20appearance%2C%20digital%20art%20style%2C%20white%20background%2C%20vector%20art%20style%2C%20gaming%20pose&width=400&height=300&seq=17&orientation=landscape"
alt="Gaming Mascot"
class="w-full h-64 object-cover object-top"
/>
<div
class="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full"
>
Gaming
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">
Gamer Panda
</h3>
<p class="text-gray-600 mb-4">
A playful mascot designed for gaming companies, streamers, and
esports organizations.
</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500"
>Created: May 12, 2025</span
>
<button class="text-primary font-semibold flex items-center">
View Details
<i class="ri-arrow-right-line ml-1"></i>
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button
class="bg-white text-primary border-2 border-primary px-8 py-3 rounded-button font-bold hover:bg-primary hover:bg-opacity-10 transition-all shadow-sm whitespace-nowrap"
>
Load More
<i class="ri-arrow-down-line ml-2"></i>
</button>
</div>
</div>
</section>
<!-- Call to Action -->
<section
class="py-20 bg-gradient-to-r from-primary to-secondary text-white"
>
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl font-bold mb-6">
Ready to Bring Your Brand to Life?
</h2>
<p class="text-xl mb-10 max-w-2xl mx-auto">
Let our talented artists create a custom mascot that perfectly
represents your brand's personality and values.
</p>
<button
class="bg-white text-primary px-8 py-4 rounded-button font-bold text-lg hover:bg-opacity-90 transition-all shadow-lg whitespace-nowrap"
>
Get Your Custom Mascot
<i class="ri-palette-line ml-2"></i>
</button>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-16">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between">
<div class="mb-10 md:mb-0">
<a
href="#"
class="font-['Pacifico'] text-3xl text-white mb-4 block"
>logo</a
>
<p class="text-gray-400 max-w-xs">
Creating memorable mascot characters that bring personality and
charm to your brand since 2018.
</p>
<div class="flex space-x-4 mt-6">
<a
href="#"
class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-all"
>
<i class="ri-facebook-fill"></i>
</a>
<a
href="#"
class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-all"
>
<i class="ri-twitter-fill"></i>
</a>
<a
href="#"
class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-all"
>
<i class="ri-instagram-fill"></i>
</a>
<a
href="#"
class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-all"
>
<i class="ri-behance-fill"></i>
</a>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-10">
<div>
<h3 class="text-lg font-bold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li>
<a
href="#"
class="text-gray-400 hover:text-white transition-all"
>Home</a
>
</li>
<li>
<a
href="#about"
class="text-gray-400 hover:text-white transition-all"
>About</a
>
</li>
<li>
<a
href="#gallery"
class="text-gray-400 hover:text-white transition-all"
>Gallery</a
>
</li>
<li>
<a
href="#"
class="text-gray-400 hover:text-white transition-all"
>Contact</a
>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Services</h3>
<ul class="space-y-2">
<li>
<a
href="#"
class="text-gray-400 hover:text-white transition-all"
>Custom Mascots</a
>
</li>
<li>
<a
href="#"
class="text-gray-400 hover:text-white transition-all"
>Animation</a
>
</li>
<li>
<a
href="#"
class="text-gray-400 hover:text-white transition-all"
>Branding</a
>
</li>
<li>
<a
href="#"
class="text-gray-400 hover:text-white transition-all"
>Merchandise</a
>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Contact</h3>
<ul class="space-y-2">
<li class="flex items-center text-gray-400">
<i class="ri-map-pin-line mr-2"></i>
<span>123 Mascot St, Design City</span>
</li>
<li class="flex items-center text-gray-400">
<i class="ri-mail-line mr-2"></i>
<span>hello@mascotworld.com</span>
</li>
<li class="flex items-center text-gray-400">
<i class="ri-phone-line mr-2"></i>
<span>+1 (555) 123-4567</span>
</li>
</ul>
</div>
</div>
</div>
<div
class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"
>
<p class="text-gray-500 text-sm">
© 2025 Mascot World. All rights reserved.
</p>
<div class="mt-4 md:mt-0">
<ul class="flex space-x-6">
<li>
<a
href="#"
class="text-gray-500 text-sm hover:text-white transition-all"
>Privacy Policy</a
>
</li>
<li>
<a
href="#"
class="text-gray-500 text-sm hover:text-white transition-all"
>Terms of Service</a
>
</li>
<li>
<a
href="#"
class="text-gray-500 text-sm hover:text-white transition-all"
>Cookie Policy</a
>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Eye movement for mascot
const mascotContainer = document.querySelector(".mascot-container");
const leftEye = document.querySelector(".mascot-eye-left");
const rightEye = document.querySelector(".mascot-eye-right");
if (mascotContainer && leftEye && rightEye) {
mascotContainer.addEventListener("mousemove", function (e) {
const containerRect = mascotContainer.getBoundingClientRect();
const x = e.clientX - containerRect.left;
const y = e.clientY - containerRect.top;
const centerX = containerRect.width / 2;
const centerY = containerRect.height / 2;
const deltaX = (x - centerX) / 20;
const deltaY = (y - centerY) / 20;
leftEye.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
rightEye.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});
}
// Enter site button
const enterBtn = document.querySelector(".enter-btn");
const splashScreen = document.querySelector(".splash-screen");
const mainContent = document.querySelector(".main-content");
if (enterBtn && splashScreen && mainContent) {
enterBtn.addEventListener("click", function () {
splashScreen.style.opacity = "0";
mainContent.style.opacity = "1";
setTimeout(function () {
splashScreen.style.display = "none";
}, 500);
});
}
// Auto-hide splash screen after 5 seconds
setTimeout(function () {
if (splashScreen && mainContent) {
splashScreen.style.opacity = "0";
mainContent.style.opacity = "1";
setTimeout(function () {
splashScreen.style.display = "none";
}, 500);
}
}, 5000);
// Mobile menu toggle
const menuToggle = document.querySelector(".ri-menu-line");
if (menuToggle) {
menuToggle.addEventListener("click", function () {
alert("Mobile menu would open here");
});
}
// Gallery filter buttons
const filterButtons = document.querySelectorAll(
".rounded-full.text-gray-700",
);
if (filterButtons.length) {
filterButtons.forEach((button) => {
button.addEventListener("click", function () {
// Remove active class from all buttons
document
.querySelector(".rounded-full.bg-primary")
.classList.remove("bg-primary", "text-white");
document
.querySelector(".rounded-full.bg-primary")
.classList.add("text-gray-700", "hover:bg-gray-100");
// Add active class to clicked button
this.classList.remove("text-gray-700", "hover:bg-gray-100");
this.classList.add("bg-primary", "text-white");
// Filter logic would go here
});
});
}
});
</script>
</body>
</html>
