Tạo một trang web bán sản phẩm loa Bluetooth di động cao cấp mang tên "Studio Slamic". Trang web cần có giao diện hiện đại, tối giản với nền trắng chủ đạo.
Browse filesPhần đầu trang (Header):
Logo: Một biểu tượng quả táo cắn dở (giống Apple) bên cạnh chữ "Studio Slamic" bằng font chữ sans-serif.
Menu điều hướng gồm các mục: "Patciblor", "Sertcots" (có mũi tên xuống), "Carated", và nút "Buy Now" màu xanh dương nhạt với viền mỏng.
Phần hero (nổi bật nhất):
Bên trái: Tiêu đề lớn "Sound Slameinmslik" (chữ "Slameinmslik" có dấu chớp vàng cắt ngang qua chữ "e").
Phụ đề nhỏ hơn bên dưới: "Smare portieshouour protable Bluetooth Speaker".
Nút "Buy Now" màu xanh dương đậm, có hiệu ứng hover nhẹ.
Bên phải: Hình ảnh 3D của một chiếc loa Bluetooth hình hộp chữ nhật, khung viền vàng kim loại, mặt trước lưới đen, in logo mắt kèm sét và dòng chữ "SLAMEMUSIC" màu vàng.
Phần đặc điểm nổi bật (Features):
Dưới phần hero, hiển thị 4 tính năng chính, mỗi tính năng gồm:
Biểu tượng đơn giản (icon) màu xanh dương.
Tiêu đề ngắn gọn.
Mô tả ngắn.
Các tính năng cụ thể:
Studio-Quality Sound — kèm icon micro.
24 Hour Battery Life — kèm icon pin.
Water Reshecttanc — kèm icon giọt nước (lưu ý: từ này có vẻ bị lỗi chính tả, nên sửa thành “Water Resistant”).
Wireless Connectivity — kèm icon dấu cộng hoặc sóng wifi.
Yêu cầu bổ sung:
Thiết kế responsive (hiển thị tốt trên mọi thiết bị).
Tối ưu tốc độ tải trang.
Có hiệu ứng hover mượt mà cho nút và menu.
Sử dụng font chữ hiện đại, dễ đọc.
Màu sắc chủ đạo: trắng, đen, vàng kim loại, xanh dương.
- README.md +8 -5
- index.html +278 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: StudioSlamic Audio Experience 🔊
|
| 3 |
+
colorFrom: green
|
| 4 |
+
colorTo: pink
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,279 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Studio Slamic - Premium Bluetooth Speakers</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| 12 |
+
<script>
|
| 13 |
+
tailwind.config = {
|
| 14 |
+
theme: {
|
| 15 |
+
extend: {
|
| 16 |
+
colors: {
|
| 17 |
+
primary: '#3B82F6',
|
| 18 |
+
secondary: '#F59E0B',
|
| 19 |
+
dark: '#111827',
|
| 20 |
+
light: '#F9FAFB'
|
| 21 |
+
},
|
| 22 |
+
fontFamily: {
|
| 23 |
+
sans: ['Inter', 'sans-serif'],
|
| 24 |
+
},
|
| 25 |
+
animation: {
|
| 26 |
+
'pulse-gold': 'pulse-gold 2s infinite',
|
| 27 |
+
'glow': 'glow 2s ease-in-out infinite alternate',
|
| 28 |
+
},
|
| 29 |
+
keyframes: {
|
| 30 |
+
'pulse-gold': {
|
| 31 |
+
'0%, 100%': { opacity: 1 },
|
| 32 |
+
'50%': { opacity: 0.7 }
|
| 33 |
+
},
|
| 34 |
+
'glow': {
|
| 35 |
+
'from': { boxShadow: '0 0 5px #F59E0B, 0 0 10px #F59E0B, 0 0 15px #F59E0B' },
|
| 36 |
+
'to': { boxShadow: '0 0 10px #F59E0B, 0 0 20px #F59E0B, 0 0 30px #F59E0B' }
|
| 37 |
+
}
|
| 38 |
+
}
|
| 39 |
+
}
|
| 40 |
+
}
|
| 41 |
+
}
|
| 42 |
+
</script>
|
| 43 |
+
<style>
|
| 44 |
+
.gold-strike {
|
| 45 |
+
position: relative;
|
| 46 |
+
display: inline-block;
|
| 47 |
+
}
|
| 48 |
+
.gold-strike::after {
|
| 49 |
+
content: '';
|
| 50 |
+
position: absolute;
|
| 51 |
+
left: 0;
|
| 52 |
+
bottom: 0.2em;
|
| 53 |
+
width: 100%;
|
| 54 |
+
height: 2px;
|
| 55 |
+
background: linear-gradient(90deg, transparent 0%, #F59E0B 50%, transparent 100%);
|
| 56 |
+
animation: pulse-gold 2s infinite;
|
| 57 |
+
}
|
| 58 |
+
.speaker-3d {
|
| 59 |
+
transform: perspective(1000px) rotateY(-15deg) rotateX(10deg);
|
| 60 |
+
transition: all 0.5s ease;
|
| 61 |
+
}
|
| 62 |
+
.speaker-3d:hover {
|
| 63 |
+
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
|
| 64 |
+
}
|
| 65 |
+
</style>
|
| 66 |
+
</head>
|
| 67 |
+
<body class="font-sans bg-white text-dark">
|
| 68 |
+
<!-- Header -->
|
| 69 |
+
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-100">
|
| 70 |
+
<nav class="container mx-auto px-4 py-4 flex items-center justify-between">
|
| 71 |
+
<!-- Logo -->
|
| 72 |
+
<div class="flex items-center space-x-2">
|
| 73 |
+
<div class="w-8 h-8 bg-gradient-to-br from-secondary to-yellow-300 rounded-full relative">
|
| 74 |
+
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white rounded-full"></div>
|
| 75 |
+
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-secondary rounded-full"></div>
|
| 76 |
+
</div>
|
| 77 |
+
<span class="text-xl font-semibold">Studio Slamic</span>
|
| 78 |
+
</div>
|
| 79 |
+
|
| 80 |
+
<!-- Navigation -->
|
| 81 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 82 |
+
<a href="#" class="text-gray-600 hover:text-dark transition-colors">Patciblor</a>
|
| 83 |
+
<div class="relative group">
|
| 84 |
+
<a href="#" class="text-gray-600 hover:text-dark transition-colors flex items-center">
|
| 85 |
+
Sertcots
|
| 86 |
+
<i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
|
| 87 |
+
</a>
|
| 88 |
+
<div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 border border-gray-100">
|
| 89 |
+
<a href="#" class="block px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-dark">Wireless Series</a>
|
| 90 |
+
<a href="#" class="block px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-dark">Pro Series</a>
|
| 91 |
+
<a href="#" class="block px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-dark">Mini Series</a>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
<a href="#" class="text-gray-600 hover:text-dark transition-colors">Carated</a>
|
| 95 |
+
<button class="bg-primary text-white px-6 py-2 rounded-full border border-primary hover:bg-primary/90 transition-colors font-medium">
|
| 96 |
+
Buy Now
|
| 97 |
+
</button>
|
| 98 |
+
</div>
|
| 99 |
+
|
| 100 |
+
<!-- Mobile menu button -->
|
| 101 |
+
<button class="md:hidden p-2">
|
| 102 |
+
<i data-feather="menu" class="w-6 h-6"></i>
|
| 103 |
+
</button>
|
| 104 |
+
</nav>
|
| 105 |
+
</header>
|
| 106 |
+
|
| 107 |
+
<!-- Hero Section -->
|
| 108 |
+
<section class="relative overflow-hidden">
|
| 109 |
+
<div class="container mx-auto px-4 py-16 md:py-24">
|
| 110 |
+
<div class="grid md:grid-cols-2 gap-12 items-center">
|
| 111 |
+
<!-- Left Content -->
|
| 112 |
+
<div class="space-y-6">
|
| 113 |
+
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight">
|
| 114 |
+
Sound
|
| 115 |
+
<span class="gold-strike">Slameinmslik</span>
|
| 116 |
+
</h1>
|
| 117 |
+
<p class="text-xl md:text-2xl text-gray-600 leading-relaxed">
|
| 118 |
+
Smare portieshouour protable Bluetooth Speaker
|
| 119 |
+
</p>
|
| 120 |
+
<button class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105 hover:shadow-xl">
|
| 121 |
+
Buy Now - $299
|
| 122 |
+
</button>
|
| 123 |
+
</div>
|
| 124 |
+
|
| 125 |
+
<!-- Right Content - 3D Speaker -->
|
| 126 |
+
<div class="relative">
|
| 127 |
+
<div class="speaker-3d bg-gradient-to-br from-gray-900 to-black rounded-2xl p-8 shadow-2xl">
|
| 128 |
+
<div class="bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl p-6 relative">
|
| 129 |
+
<!-- Speaker Grille -->
|
| 130 |
+
<div class="bg-black rounded-lg p-4">
|
| 131 |
+
<div class="grid grid-cols-6 gap-2">
|
| 132 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 133 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 134 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 135 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 136 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 137 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 138 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 139 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 140 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 141 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 142 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 143 |
+
<div class="aspect-square bg-gray-800 rounded"></div>
|
| 144 |
+
</div>
|
| 145 |
+
|
| 146 |
+
<!-- Logo and Text -->
|
| 147 |
+
<div class="mt-4 flex items-center justify-center space-x-2">
|
| 148 |
+
<div class="w-6 h-6 bg-yellow-400 rounded-full relative">
|
| 149 |
+
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-3 bg-black"></div>
|
| 150 |
+
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-1 h-2 bg-yellow-400"></div>
|
| 151 |
+
</div>
|
| 152 |
+
<span class="text-yellow-400 font-bold text-sm">SLAMEMUSIC</span>
|
| 153 |
+
</div>
|
| 154 |
+
</div>
|
| 155 |
+
</div>
|
| 156 |
+
</div>
|
| 157 |
+
|
| 158 |
+
<!-- Floating Elements -->
|
| 159 |
+
<div class="absolute -top-4 -right-4 w-24 h-24 bg-secondary/20 rounded-full blur-xl"></div>
|
| 160 |
+
<div class="absolute -bottom-4 -left-4 w-32 h-32 bg-primary/20 rounded-full blur-xl"></div>
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
</div>
|
| 164 |
+
</section>
|
| 165 |
+
|
| 166 |
+
<!-- Features Section -->
|
| 167 |
+
<section class="py-16 md:py-24 bg-light">
|
| 168 |
+
<div class="container mx-auto px-4">
|
| 169 |
+
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
| 170 |
+
<!-- Feature 1 -->
|
| 171 |
+
<div class="text-center group hover:transform hover:scale-105 transition-all duration-300">
|
| 172 |
+
<div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors">
|
| 173 |
+
<i data-feather="mic" class="w-8 h-8 text-primary"></i>
|
| 174 |
+
</div>
|
| 175 |
+
<h3 class="text-xl font-semibold mb-2">Studio-Quality Sound</h3>
|
| 176 |
+
<p class="text-gray-600">Crystal clear audio with professional-grade drivers and acoustic tuning</p>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
+
<!-- Feature 2 -->
|
| 180 |
+
<div class="text-center group hover:transform hover:scale-105 transition-all duration-300">
|
| 181 |
+
<div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors">
|
| 182 |
+
<i data-feather="battery" class="w-8 h-8 text-primary"></i>
|
| 183 |
+
</div>
|
| 184 |
+
<h3 class="text-xl font-semibold mb-2">24 Hour Battery Life</h3>
|
| 185 |
+
<p class="text-gray-600">All-day listening with our high-capacity lithium-ion battery</p>
|
| 186 |
+
</div>
|
| 187 |
+
|
| 188 |
+
<!-- Feature 3 -->
|
| 189 |
+
<div class="text-center group hover:transform hover:scale-105 transition-all duration-300">
|
| 190 |
+
<div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors">
|
| 191 |
+
<i data-feather="droplet" class="w-8 h-8 text-primary"></i>
|
| 192 |
+
</div>
|
| 193 |
+
<h3 class="text-xl font-semibold mb-2">Water Resistant</h3>
|
| 194 |
+
<p class="text-gray-600">IP67 rated for complete protection against water and dust</p>
|
| 195 |
+
</div>
|
| 196 |
+
|
| 197 |
+
<!-- Feature 4 -->
|
| 198 |
+
<div class="text-center group hover:transform hover:scale-105 transition-all duration-300">
|
| 199 |
+
<div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors">
|
| 200 |
+
<i data-feather="wifi" class="w-8 h-8 text-primary"></i>
|
| 201 |
+
</div>
|
| 202 |
+
<h3 class="text-xl font-semibold mb-2">Wireless Connectivity</h3>
|
| 203 |
+
<p class="text-gray-600">Seamless Bluetooth 5.2 with multi-device pairing capability</p>
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
</section>
|
| 208 |
+
|
| 209 |
+
<!-- Footer -->
|
| 210 |
+
<footer class="bg-dark text-white py-12">
|
| 211 |
+
<div class="container mx-auto px-4">
|
| 212 |
+
<div class="grid md:grid-cols-4 gap-8">
|
| 213 |
+
<div>
|
| 214 |
+
<div class="flex items-center space-x-2 mb-4">
|
| 215 |
+
<div class="w-6 h-6 bg-gradient-to-br from-secondary to-yellow-300 rounded-full relative">
|
| 216 |
+
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full"></div>
|
| 217 |
+
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 bg-secondary rounded-full"></div>
|
| 218 |
+
</div>
|
| 219 |
+
<span class="text-lg font-semibold">Studio Slamic</span>
|
| 220 |
+
</div>
|
| 221 |
+
<p class="text-gray-400">Premium audio experiences redefined.</p>
|
| 222 |
+
</div>
|
| 223 |
+
<div>
|
| 224 |
+
<h4 class="font-semibold mb-4">Products</h4>
|
| 225 |
+
<ul class="space-y-2 text-gray-400">
|
| 226 |
+
<li><a href="#" class="hover:text-white transition-colors">Wireless Speakers</a></li>
|
| 227 |
+
<li><a href="#" class="hover:text-white transition-colors">Pro Audio</a></li>
|
| 228 |
+
<li><a href="#" class="hover:text-white transition-colors">Accessories</a></li>
|
| 229 |
+
</ul>
|
| 230 |
+
</div>
|
| 231 |
+
<div>
|
| 232 |
+
<h4 class="font-semibold mb-4">Support</h4>
|
| 233 |
+
<ul class="space-y-2 text-gray-400">
|
| 234 |
+
<li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
|
| 235 |
+
<li><a href="#" class="hover:text-white transition-colors">Warranty</a></li>
|
| 236 |
+
<li><a href="#" class="hover:text-white transition-colors">Contact Us</a></li>
|
| 237 |
+
</ul>
|
| 238 |
+
</div>
|
| 239 |
+
<div>
|
| 240 |
+
<h4 class="font-semibold mb-4">Company</h4>
|
| 241 |
+
<ul class="space-y-2 text-gray-400">
|
| 242 |
+
<li><a href="#" class="hover:text-white transition-colors">About</a></li>
|
| 243 |
+
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
|
| 244 |
+
<li><a href="#" class="hover:text-white transition-colors">Press</a></li>
|
| 245 |
+
</ul>
|
| 246 |
+
</div>
|
| 247 |
+
</div>
|
| 248 |
+
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
|
| 249 |
+
<p>© 2024 Studio Slamic. All rights reserved.</p>
|
| 250 |
+
</div>
|
| 251 |
+
</div>
|
| 252 |
+
</footer>
|
| 253 |
+
|
| 254 |
+
<script>
|
| 255 |
+
feather.replace();
|
| 256 |
+
|
| 257 |
+
// Add scroll animation for features
|
| 258 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 259 |
+
const features = document.querySelectorAll('.group');
|
| 260 |
+
|
| 261 |
+
const observer = new IntersectionObserver((entries) => {
|
| 262 |
+
entries.forEach(entry => {
|
| 263 |
+
if (entry.isIntersecting) {
|
| 264 |
+
entry.target.style.opacity = 1;
|
| 265 |
+
entry.target.style.transform = 'translateY(0)';
|
| 266 |
+
}
|
| 267 |
+
});
|
| 268 |
+
}, { threshold: 0.1 });
|
| 269 |
+
|
| 270 |
+
features.forEach(feature => {
|
| 271 |
+
feature.style.opacity = 0;
|
| 272 |
+
feature.style.transform = 'translateY(20px)';
|
| 273 |
+
feature.style.transition = 'all 0.6s ease';
|
| 274 |
+
observer.observe(feature);
|
| 275 |
+
});
|
| 276 |
+
});
|
| 277 |
+
</script>
|
| 278 |
+
</body>
|
| 279 |
</html>
|