fix: Simplify animation variants to reduce flickering and improve performance
Browse files- frontend/src/pages/index.js +68 -65
frontend/src/pages/index.js
CHANGED
|
@@ -158,24 +158,27 @@ export default function Home() {
|
|
| 158 |
[],
|
| 159 |
);
|
| 160 |
|
| 161 |
-
//
|
| 162 |
const containerVariants = {
|
| 163 |
hidden: { opacity: 0 },
|
| 164 |
visible: {
|
| 165 |
opacity: 1,
|
| 166 |
transition: {
|
| 167 |
-
staggerChildren: 0.
|
| 168 |
-
delayChildren: 0.
|
| 169 |
},
|
| 170 |
},
|
| 171 |
};
|
| 172 |
|
| 173 |
const itemVariants = {
|
| 174 |
-
hidden: { opacity: 0, y:
|
| 175 |
visible: {
|
| 176 |
opacity: 1,
|
| 177 |
y: 0,
|
| 178 |
-
transition: {
|
|
|
|
|
|
|
|
|
|
| 179 |
},
|
| 180 |
};
|
| 181 |
|
|
@@ -184,7 +187,7 @@ export default function Home() {
|
|
| 184 |
}, []);
|
| 185 |
|
| 186 |
return (
|
| 187 |
-
<div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
|
| 188 |
<Head>
|
| 189 |
<title>LumaKit - Powerful Media Tools & AI Transformations</title>
|
| 190 |
<meta
|
|
@@ -206,7 +209,7 @@ export default function Home() {
|
|
| 206 |
>
|
| 207 |
{/* Background Elements */}
|
| 208 |
<motion.div
|
| 209 |
-
className="absolute inset-0 opacity-20 pointer-events-none"
|
| 210 |
style={{ y: yBg, opacity }}
|
| 211 |
>
|
| 212 |
<div className="absolute top-1/4 left-1/4 w-32 h-32 sm:w-48 sm:h-48 lg:w-64 lg:h-64 bg-[var(--accent)]/20 rounded-full blur-3xl"></div>
|
|
@@ -214,20 +217,20 @@ export default function Home() {
|
|
| 214 |
<div className="absolute bottom-1/4 left-1/2 w-48 h-48 sm:w-72 sm:h-72 lg:w-96 lg:h-96 bg-[var(--accent)]/10 rounded-full blur-3xl"></div>
|
| 215 |
</motion.div>
|
| 216 |
|
| 217 |
-
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
| 218 |
<motion.div
|
| 219 |
-
initial={{ opacity: 0, y:
|
| 220 |
animate={{ opacity: 1, y: 0 }}
|
| 221 |
-
transition={{ duration:
|
| 222 |
className="space-y-6 sm:space-y-8"
|
| 223 |
>
|
| 224 |
{/* Main Title */}
|
| 225 |
<div className="space-y-4 sm:space-y-6">
|
| 226 |
<motion.div
|
| 227 |
className="flex items-center justify-center space-x-2 mb-4 sm:mb-6"
|
| 228 |
-
initial={{ opacity: 0, scale: 0.
|
| 229 |
animate={{ opacity: 1, scale: 1 }}
|
| 230 |
-
transition={{ duration: 0.
|
| 231 |
>
|
| 232 |
<div className="relative">
|
| 233 |
<HiSparkles className="text-3xl sm:text-4xl text-[var(--accent)]" />
|
|
@@ -237,18 +240,18 @@ export default function Home() {
|
|
| 237 |
|
| 238 |
<motion.h1
|
| 239 |
className="text-4xl sm:text-6xl lg:text-7xl font-bold leading-tight"
|
| 240 |
-
initial={{ opacity: 0, y:
|
| 241 |
animate={{ opacity: 1, y: 0 }}
|
| 242 |
-
transition={{ duration: 0.
|
| 243 |
>
|
| 244 |
<span className="gradient-text">LumaKit</span>
|
| 245 |
</motion.h1>
|
| 246 |
|
| 247 |
<motion.p
|
| 248 |
className="text-lg sm:text-xl lg:text-2xl text-[var(--foreground-secondary)] max-w-4xl mx-auto leading-relaxed px-4"
|
| 249 |
-
initial={{ opacity: 0, y:
|
| 250 |
animate={{ opacity: 1, y: 0 }}
|
| 251 |
-
transition={{ duration: 0.
|
| 252 |
>
|
| 253 |
A versatile suite of tools for{' '}
|
| 254 |
<span className="text-[var(--accent)] font-semibold">
|
|
@@ -268,16 +271,16 @@ export default function Home() {
|
|
| 268 |
{/* CTA Button */}
|
| 269 |
<motion.div
|
| 270 |
className="flex items-center justify-center"
|
| 271 |
-
initial={{ opacity: 0, y:
|
| 272 |
animate={{ opacity: 1, y: 0 }}
|
| 273 |
-
transition={{ duration: 0.
|
| 274 |
>
|
| 275 |
<motion.a
|
| 276 |
href="https://huggingface.co/spaces/YoruAkio/LumaKit"
|
| 277 |
target="_blank"
|
| 278 |
rel="noopener noreferrer"
|
| 279 |
className="group relative flex items-center space-x-2 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-[var(--background)] px-6 sm:px-8 py-3 sm:py-4 rounded-xl font-semibold text-base sm:text-lg transition-all duration-300 shadow-lg hover:shadow-2xl overflow-hidden"
|
| 280 |
-
whileHover={{ scale: 1.
|
| 281 |
whileTap={{ scale: 0.98 }}
|
| 282 |
>
|
| 283 |
<div className="absolute inset-0 bg-gradient-to-r from-[var(--accent)] to-[var(--accent-hover)] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
@@ -290,9 +293,9 @@ export default function Home() {
|
|
| 290 |
{/* Stats */}
|
| 291 |
<motion.div
|
| 292 |
className="grid grid-cols-3 gap-4 sm:gap-8 max-w-md sm:max-w-lg mx-auto mt-12 sm:mt-16"
|
| 293 |
-
initial={{ opacity: 0, y:
|
| 294 |
animate={{ opacity: 1, y: 0 }}
|
| 295 |
-
transition={{ duration: 0.
|
| 296 |
>
|
| 297 |
{stats.map((stat, index) => (
|
| 298 |
<motion.div
|
|
@@ -317,15 +320,15 @@ export default function Home() {
|
|
| 317 |
{/* Features Section */}
|
| 318 |
<section
|
| 319 |
id="features"
|
| 320 |
-
className="py-16 sm:py-20 lg:py-24 bg-[var(--background-secondary)]"
|
| 321 |
>
|
| 322 |
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 323 |
<motion.div
|
| 324 |
className="text-center mb-12 sm:mb-16"
|
| 325 |
-
initial={{ opacity: 0, y:
|
| 326 |
whileInView={{ opacity: 1, y: 0 }}
|
| 327 |
-
viewport={{ once: true, margin: '-
|
| 328 |
-
transition={{ duration: 0.
|
| 329 |
>
|
| 330 |
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
|
| 331 |
<span className="gradient-text">Powerful Features</span>
|
|
@@ -346,10 +349,10 @@ export default function Home() {
|
|
| 346 |
{features.map((feature, index) => (
|
| 347 |
<motion.div
|
| 348 |
key={index}
|
| 349 |
-
className="group relative glass rounded-2xl p-6 sm:p-8 hover:bg-[var(--background-tertiary)]/50 transition-all duration-300
|
| 350 |
variants={itemVariants}
|
| 351 |
-
whileHover={{ y: -
|
| 352 |
-
transition={{ duration: 0.
|
| 353 |
>
|
| 354 |
{/* Icon */}
|
| 355 |
<div className="inline-flex p-3 sm:p-4 rounded-xl bg-[var(--accent)] mb-4 sm:mb-6 shadow-lg w-fit">
|
|
@@ -369,10 +372,10 @@ export default function Home() {
|
|
| 369 |
{/* Status and Arrow - Fixed at bottom */}
|
| 370 |
<div className="flex items-center justify-between mt-auto pt-4">
|
| 371 |
<span
|
| 372 |
-
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
| 373 |
feature.status === 'Available'
|
| 374 |
-
? 'bg-green-500/20 text-green-400
|
| 375 |
-
: 'bg-[var(--accent)] text-[var(--accent)]
|
| 376 |
}`}
|
| 377 |
>
|
| 378 |
{feature.status}
|
|
@@ -386,14 +389,14 @@ export default function Home() {
|
|
| 386 |
</section>
|
| 387 |
|
| 388 |
{/* Converters Section */}
|
| 389 |
-
<section id="converters" className="py-16 sm:py-20 lg:py-24">
|
| 390 |
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 391 |
<motion.div
|
| 392 |
className="text-center mb-12 sm:mb-16"
|
| 393 |
-
initial={{ opacity: 0, y:
|
| 394 |
whileInView={{ opacity: 1, y: 0 }}
|
| 395 |
-
viewport={{ once: true, margin: '-
|
| 396 |
-
transition={{ duration: 0.
|
| 397 |
>
|
| 398 |
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
|
| 399 |
<span className="gradient-text">File Converters</span>
|
|
@@ -430,9 +433,9 @@ export default function Home() {
|
|
| 430 |
<motion.div
|
| 431 |
key={activeConverter}
|
| 432 |
className="glass rounded-2xl p-6 sm:p-8"
|
| 433 |
-
initial={{ opacity: 0, y:
|
| 434 |
animate={{ opacity: 1, y: 0 }}
|
| 435 |
-
transition={{ duration: 0.
|
| 436 |
>
|
| 437 |
{converters.map(converter => {
|
| 438 |
if (converter.id !== activeConverter) return null;
|
|
@@ -445,7 +448,7 @@ export default function Home() {
|
|
| 445 |
<p className="text-[var(--foreground-secondary)] mb-6 sm:mb-8 text-base sm:text-lg max-w-2xl mx-auto">
|
| 446 |
{converter.description}
|
| 447 |
</p>
|
| 448 |
-
<div className="flex flex-wrap justify-center gap-2 sm:gap-3">
|
| 449 |
{converter.formats.map((format, index) => (
|
| 450 |
<span
|
| 451 |
key={index}
|
|
@@ -465,15 +468,15 @@ export default function Home() {
|
|
| 465 |
{/* Social Media Section */}
|
| 466 |
<section
|
| 467 |
id="social-media"
|
| 468 |
-
className="py-16 sm:py-20 lg:py-24 bg-[var(--background-secondary)]"
|
| 469 |
>
|
| 470 |
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 471 |
<motion.div
|
| 472 |
className="text-center mb-12 sm:mb-16"
|
| 473 |
-
initial={{ opacity: 0, y:
|
| 474 |
whileInView={{ opacity: 1, y: 0 }}
|
| 475 |
-
viewport={{ once: true, margin: '-
|
| 476 |
-
transition={{ duration: 0.
|
| 477 |
>
|
| 478 |
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
|
| 479 |
<span className="gradient-text">Social Media Downloader</span>
|
|
@@ -495,8 +498,8 @@ export default function Home() {
|
|
| 495 |
key={index}
|
| 496 |
className="relative group glass rounded-2xl p-6 sm:p-8 hover:bg-[var(--background-tertiary)]/50 transition-all duration-300 flex flex-col h-full min-h-[280px]"
|
| 497 |
variants={itemVariants}
|
| 498 |
-
whileHover={{ y: -
|
| 499 |
-
transition={{ duration: 0.
|
| 500 |
>
|
| 501 |
{/* Icon */}
|
| 502 |
<platform.icon
|
|
@@ -516,10 +519,10 @@ export default function Home() {
|
|
| 516 |
{/* Status Badge - Fixed at bottom */}
|
| 517 |
<div className="mt-auto pt-4">
|
| 518 |
<span
|
| 519 |
-
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
| 520 |
platform.status === 'Available'
|
| 521 |
-
? 'bg-green-500/20 text-green-400
|
| 522 |
-
: 'bg-[var(--accent)] text-[var(--accent)]
|
| 523 |
}`}
|
| 524 |
>
|
| 525 |
{platform.status}
|
|
@@ -532,27 +535,27 @@ export default function Home() {
|
|
| 532 |
</section>
|
| 533 |
|
| 534 |
{/* About Section */}
|
| 535 |
-
<section id="about" className="py-16 sm:py-20 lg:py-24">
|
| 536 |
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 537 |
<motion.div
|
| 538 |
className="text-center mb-12 sm:mb-16"
|
| 539 |
-
initial={{ opacity: 0, y:
|
| 540 |
whileInView={{ opacity: 1, y: 0 }}
|
| 541 |
-
viewport={{ once: true, margin: '-
|
| 542 |
-
transition={{ duration: 0.
|
| 543 |
>
|
| 544 |
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
|
| 545 |
<span className="gradient-text">About LumaKit</span>
|
| 546 |
</h2>
|
| 547 |
</motion.div>
|
| 548 |
|
| 549 |
-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-
|
| 550 |
<motion.div
|
| 551 |
className="space-y-6"
|
| 552 |
-
initial={{ opacity: 0, x: -
|
| 553 |
whileInView={{ opacity: 1, x: 0 }}
|
| 554 |
-
viewport={{ once: true, margin: '-
|
| 555 |
-
transition={{ duration: 0.
|
| 556 |
>
|
| 557 |
<p className="text-base sm:text-lg text-[var(--foreground-secondary)] leading-relaxed">
|
| 558 |
LumaKit is a comprehensive toolkit designed for creators,
|
|
@@ -573,7 +576,7 @@ export default function Home() {
|
|
| 573 |
initial={{ opacity: 0, x: -20 }}
|
| 574 |
whileInView={{ opacity: 1, x: 0 }}
|
| 575 |
viewport={{ once: true, margin: '-50px' }}
|
| 576 |
-
transition={{ duration: 0.
|
| 577 |
>
|
| 578 |
<FiStar className="text-[var(--accent)] flex-shrink-0" />
|
| 579 |
<span className="text-[var(--foreground-secondary)] text-sm sm:text-base">
|
|
@@ -585,17 +588,17 @@ export default function Home() {
|
|
| 585 |
</motion.div>
|
| 586 |
|
| 587 |
<motion.div
|
| 588 |
-
className="
|
| 589 |
-
initial={{ opacity: 0, x:
|
| 590 |
whileInView={{ opacity: 1, x: 0 }}
|
| 591 |
-
viewport={{ once: true, margin: '-
|
| 592 |
-
transition={{ duration: 0.
|
| 593 |
>
|
| 594 |
-
<div className="glass rounded-2xl p-6 sm:p-8">
|
| 595 |
<div className="space-y-6">
|
| 596 |
<div className="flex items-center space-x-4">
|
| 597 |
<HiLightningBolt className="text-2xl sm:text-3xl text-[var(--accent)] flex-shrink-0" />
|
| 598 |
-
<div>
|
| 599 |
<h4 className="text-base sm:text-lg font-semibold text-[var(--foreground)]">
|
| 600 |
Powered by AI
|
| 601 |
</h4>
|
|
@@ -606,7 +609,7 @@ export default function Home() {
|
|
| 606 |
</div>
|
| 607 |
<div className="flex items-center space-x-4">
|
| 608 |
<FiGift className="text-2xl sm:text-3xl text-[var(--accent)] flex-shrink-0" />
|
| 609 |
-
<div>
|
| 610 |
<h4 className="text-base sm:text-lg font-semibold text-[var(--foreground)]">
|
| 611 |
Free to Use
|
| 612 |
</h4>
|
|
@@ -617,7 +620,7 @@ export default function Home() {
|
|
| 617 |
</div>
|
| 618 |
<div className="flex items-center space-x-4">
|
| 619 |
<FiZap className="text-2xl sm:text-3xl text-[var(--accent)] flex-shrink-0" />
|
| 620 |
-
<div>
|
| 621 |
<h4 className="text-base sm:text-lg font-semibold text-[var(--foreground)]">
|
| 622 |
Lightning Fast
|
| 623 |
</h4>
|
|
@@ -636,4 +639,4 @@ export default function Home() {
|
|
| 636 |
<Footer />
|
| 637 |
</div>
|
| 638 |
);
|
| 639 |
-
}
|
|
|
|
| 158 |
[],
|
| 159 |
);
|
| 160 |
|
| 161 |
+
// Simplified animation variants to reduce flickering
|
| 162 |
const containerVariants = {
|
| 163 |
hidden: { opacity: 0 },
|
| 164 |
visible: {
|
| 165 |
opacity: 1,
|
| 166 |
transition: {
|
| 167 |
+
staggerChildren: 0.05,
|
| 168 |
+
delayChildren: 0.1,
|
| 169 |
},
|
| 170 |
},
|
| 171 |
};
|
| 172 |
|
| 173 |
const itemVariants = {
|
| 174 |
+
hidden: { opacity: 0, y: 10 },
|
| 175 |
visible: {
|
| 176 |
opacity: 1,
|
| 177 |
y: 0,
|
| 178 |
+
transition: {
|
| 179 |
+
duration: 0.4,
|
| 180 |
+
ease: [0.25, 0.4, 0.55, 1.4]
|
| 181 |
+
},
|
| 182 |
},
|
| 183 |
};
|
| 184 |
|
|
|
|
| 187 |
}, []);
|
| 188 |
|
| 189 |
return (
|
| 190 |
+
<div className="min-h-screen bg-[var(--background)] text-[var(--foreground)] overflow-x-hidden">
|
| 191 |
<Head>
|
| 192 |
<title>LumaKit - Powerful Media Tools & AI Transformations</title>
|
| 193 |
<meta
|
|
|
|
| 209 |
>
|
| 210 |
{/* Background Elements */}
|
| 211 |
<motion.div
|
| 212 |
+
className="absolute inset-0 opacity-20 pointer-events-none will-change-transform"
|
| 213 |
style={{ y: yBg, opacity }}
|
| 214 |
>
|
| 215 |
<div className="absolute top-1/4 left-1/4 w-32 h-32 sm:w-48 sm:h-48 lg:w-64 lg:h-64 bg-[var(--accent)]/20 rounded-full blur-3xl"></div>
|
|
|
|
| 217 |
<div className="absolute bottom-1/4 left-1/2 w-48 h-48 sm:w-72 sm:h-72 lg:w-96 lg:h-96 bg-[var(--accent)]/10 rounded-full blur-3xl"></div>
|
| 218 |
</motion.div>
|
| 219 |
|
| 220 |
+
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center w-full">
|
| 221 |
<motion.div
|
| 222 |
+
initial={{ opacity: 0, y: 20 }}
|
| 223 |
animate={{ opacity: 1, y: 0 }}
|
| 224 |
+
transition={{ duration: 0.8, ease: [0.25, 0.4, 0.55, 1.4] }}
|
| 225 |
className="space-y-6 sm:space-y-8"
|
| 226 |
>
|
| 227 |
{/* Main Title */}
|
| 228 |
<div className="space-y-4 sm:space-y-6">
|
| 229 |
<motion.div
|
| 230 |
className="flex items-center justify-center space-x-2 mb-4 sm:mb-6"
|
| 231 |
+
initial={{ opacity: 0, scale: 0.9 }}
|
| 232 |
animate={{ opacity: 1, scale: 1 }}
|
| 233 |
+
transition={{ duration: 0.6, delay: 0.2 }}
|
| 234 |
>
|
| 235 |
<div className="relative">
|
| 236 |
<HiSparkles className="text-3xl sm:text-4xl text-[var(--accent)]" />
|
|
|
|
| 240 |
|
| 241 |
<motion.h1
|
| 242 |
className="text-4xl sm:text-6xl lg:text-7xl font-bold leading-tight"
|
| 243 |
+
initial={{ opacity: 0, y: 15 }}
|
| 244 |
animate={{ opacity: 1, y: 0 }}
|
| 245 |
+
transition={{ duration: 0.6, delay: 0.3 }}
|
| 246 |
>
|
| 247 |
<span className="gradient-text">LumaKit</span>
|
| 248 |
</motion.h1>
|
| 249 |
|
| 250 |
<motion.p
|
| 251 |
className="text-lg sm:text-xl lg:text-2xl text-[var(--foreground-secondary)] max-w-4xl mx-auto leading-relaxed px-4"
|
| 252 |
+
initial={{ opacity: 0, y: 15 }}
|
| 253 |
animate={{ opacity: 1, y: 0 }}
|
| 254 |
+
transition={{ duration: 0.6, delay: 0.4 }}
|
| 255 |
>
|
| 256 |
A versatile suite of tools for{' '}
|
| 257 |
<span className="text-[var(--accent)] font-semibold">
|
|
|
|
| 271 |
{/* CTA Button */}
|
| 272 |
<motion.div
|
| 273 |
className="flex items-center justify-center"
|
| 274 |
+
initial={{ opacity: 0, y: 15 }}
|
| 275 |
animate={{ opacity: 1, y: 0 }}
|
| 276 |
+
transition={{ duration: 0.6, delay: 0.5 }}
|
| 277 |
>
|
| 278 |
<motion.a
|
| 279 |
href="https://huggingface.co/spaces/YoruAkio/LumaKit"
|
| 280 |
target="_blank"
|
| 281 |
rel="noopener noreferrer"
|
| 282 |
className="group relative flex items-center space-x-2 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-[var(--background)] px-6 sm:px-8 py-3 sm:py-4 rounded-xl font-semibold text-base sm:text-lg transition-all duration-300 shadow-lg hover:shadow-2xl overflow-hidden"
|
| 283 |
+
whileHover={{ scale: 1.02 }}
|
| 284 |
whileTap={{ scale: 0.98 }}
|
| 285 |
>
|
| 286 |
<div className="absolute inset-0 bg-gradient-to-r from-[var(--accent)] to-[var(--accent-hover)] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
|
|
| 293 |
{/* Stats */}
|
| 294 |
<motion.div
|
| 295 |
className="grid grid-cols-3 gap-4 sm:gap-8 max-w-md sm:max-w-lg mx-auto mt-12 sm:mt-16"
|
| 296 |
+
initial={{ opacity: 0, y: 15 }}
|
| 297 |
animate={{ opacity: 1, y: 0 }}
|
| 298 |
+
transition={{ duration: 0.6, delay: 0.6 }}
|
| 299 |
>
|
| 300 |
{stats.map((stat, index) => (
|
| 301 |
<motion.div
|
|
|
|
| 320 |
{/* Features Section */}
|
| 321 |
<section
|
| 322 |
id="features"
|
| 323 |
+
className="py-16 sm:py-20 lg:py-24 bg-[var(--background-secondary)] overflow-hidden"
|
| 324 |
>
|
| 325 |
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 326 |
<motion.div
|
| 327 |
className="text-center mb-12 sm:mb-16"
|
| 328 |
+
initial={{ opacity: 0, y: 20 }}
|
| 329 |
whileInView={{ opacity: 1, y: 0 }}
|
| 330 |
+
viewport={{ once: true, margin: '-50px' }}
|
| 331 |
+
transition={{ duration: 0.6 }}
|
| 332 |
>
|
| 333 |
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
|
| 334 |
<span className="gradient-text">Powerful Features</span>
|
|
|
|
| 349 |
{features.map((feature, index) => (
|
| 350 |
<motion.div
|
| 351 |
key={index}
|
| 352 |
+
className="group relative glass rounded-2xl p-6 sm:p-8 hover:bg-[var(--background-tertiary)]/50 transition-all duration-300 flex flex-col h-full min-h-[320px]"
|
| 353 |
variants={itemVariants}
|
| 354 |
+
whileHover={{ y: -3, scale: 1.01 }}
|
| 355 |
+
transition={{ duration: 0.2 }}
|
| 356 |
>
|
| 357 |
{/* Icon */}
|
| 358 |
<div className="inline-flex p-3 sm:p-4 rounded-xl bg-[var(--accent)] mb-4 sm:mb-6 shadow-lg w-fit">
|
|
|
|
| 372 |
{/* Status and Arrow - Fixed at bottom */}
|
| 373 |
<div className="flex items-center justify-between mt-auto pt-4">
|
| 374 |
<span
|
| 375 |
+
className={`px-3 py-1 rounded-full text-xs font-medium border ${
|
| 376 |
feature.status === 'Available'
|
| 377 |
+
? 'bg-green-500/20 text-green-400 border-green-500/30'
|
| 378 |
+
: 'bg-[var(--accent)]/20 text-[var(--accent)] border-[var(--accent)]/30'
|
| 379 |
}`}
|
| 380 |
>
|
| 381 |
{feature.status}
|
|
|
|
| 389 |
</section>
|
| 390 |
|
| 391 |
{/* Converters Section */}
|
| 392 |
+
<section id="converters" className="py-16 sm:py-20 lg:py-24 overflow-hidden">
|
| 393 |
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 394 |
<motion.div
|
| 395 |
className="text-center mb-12 sm:mb-16"
|
| 396 |
+
initial={{ opacity: 0, y: 20 }}
|
| 397 |
whileInView={{ opacity: 1, y: 0 }}
|
| 398 |
+
viewport={{ once: true, margin: '-50px' }}
|
| 399 |
+
transition={{ duration: 0.6 }}
|
| 400 |
>
|
| 401 |
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
|
| 402 |
<span className="gradient-text">File Converters</span>
|
|
|
|
| 433 |
<motion.div
|
| 434 |
key={activeConverter}
|
| 435 |
className="glass rounded-2xl p-6 sm:p-8"
|
| 436 |
+
initial={{ opacity: 0, y: 10 }}
|
| 437 |
animate={{ opacity: 1, y: 0 }}
|
| 438 |
+
transition={{ duration: 0.3 }}
|
| 439 |
>
|
| 440 |
{converters.map(converter => {
|
| 441 |
if (converter.id !== activeConverter) return null;
|
|
|
|
| 448 |
<p className="text-[var(--foreground-secondary)] mb-6 sm:mb-8 text-base sm:text-lg max-w-2xl mx-auto">
|
| 449 |
{converter.description}
|
| 450 |
</p>
|
| 451 |
+
<div className="flex flex-wrap justify-center gap-2 sm:gap-3 max-w-4xl mx-auto">
|
| 452 |
{converter.formats.map((format, index) => (
|
| 453 |
<span
|
| 454 |
key={index}
|
|
|
|
| 468 |
{/* Social Media Section */}
|
| 469 |
<section
|
| 470 |
id="social-media"
|
| 471 |
+
className="py-16 sm:py-20 lg:py-24 bg-[var(--background-secondary)] overflow-hidden"
|
| 472 |
>
|
| 473 |
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 474 |
<motion.div
|
| 475 |
className="text-center mb-12 sm:mb-16"
|
| 476 |
+
initial={{ opacity: 0, y: 20 }}
|
| 477 |
whileInView={{ opacity: 1, y: 0 }}
|
| 478 |
+
viewport={{ once: true, margin: '-50px' }}
|
| 479 |
+
transition={{ duration: 0.6 }}
|
| 480 |
>
|
| 481 |
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
|
| 482 |
<span className="gradient-text">Social Media Downloader</span>
|
|
|
|
| 498 |
key={index}
|
| 499 |
className="relative group glass rounded-2xl p-6 sm:p-8 hover:bg-[var(--background-tertiary)]/50 transition-all duration-300 flex flex-col h-full min-h-[280px]"
|
| 500 |
variants={itemVariants}
|
| 501 |
+
whileHover={{ y: -3, scale: 1.01 }}
|
| 502 |
+
transition={{ duration: 0.2 }}
|
| 503 |
>
|
| 504 |
{/* Icon */}
|
| 505 |
<platform.icon
|
|
|
|
| 519 |
{/* Status Badge - Fixed at bottom */}
|
| 520 |
<div className="mt-auto pt-4">
|
| 521 |
<span
|
| 522 |
+
className={`inline-block px-3 py-1 rounded-full text-xs font-medium border ${
|
| 523 |
platform.status === 'Available'
|
| 524 |
+
? 'bg-green-500/20 text-green-400 border-green-500/30'
|
| 525 |
+
: 'bg-[var(--accent)]/20 text-[var(--accent)] border-[var(--accent)]/30'
|
| 526 |
}`}
|
| 527 |
>
|
| 528 |
{platform.status}
|
|
|
|
| 535 |
</section>
|
| 536 |
|
| 537 |
{/* About Section */}
|
| 538 |
+
<section id="about" className="py-16 sm:py-20 lg:py-24 overflow-hidden">
|
| 539 |
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 540 |
<motion.div
|
| 541 |
className="text-center mb-12 sm:mb-16"
|
| 542 |
+
initial={{ opacity: 0, y: 20 }}
|
| 543 |
whileInView={{ opacity: 1, y: 0 }}
|
| 544 |
+
viewport={{ once: true, margin: '-50px' }}
|
| 545 |
+
transition={{ duration: 0.6 }}
|
| 546 |
>
|
| 547 |
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
|
| 548 |
<span className="gradient-text">About LumaKit</span>
|
| 549 |
</h2>
|
| 550 |
</motion.div>
|
| 551 |
|
| 552 |
+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-12 lg:gap-16 items-start">
|
| 553 |
<motion.div
|
| 554 |
className="space-y-6"
|
| 555 |
+
initial={{ opacity: 0, x: -30 }}
|
| 556 |
whileInView={{ opacity: 1, x: 0 }}
|
| 557 |
+
viewport={{ once: true, margin: '-50px' }}
|
| 558 |
+
transition={{ duration: 0.6 }}
|
| 559 |
>
|
| 560 |
<p className="text-base sm:text-lg text-[var(--foreground-secondary)] leading-relaxed">
|
| 561 |
LumaKit is a comprehensive toolkit designed for creators,
|
|
|
|
| 576 |
initial={{ opacity: 0, x: -20 }}
|
| 577 |
whileInView={{ opacity: 1, x: 0 }}
|
| 578 |
viewport={{ once: true, margin: '-50px' }}
|
| 579 |
+
transition={{ duration: 0.4, delay: index * 0.05 }}
|
| 580 |
>
|
| 581 |
<FiStar className="text-[var(--accent)] flex-shrink-0" />
|
| 582 |
<span className="text-[var(--foreground-secondary)] text-sm sm:text-base">
|
|
|
|
| 588 |
</motion.div>
|
| 589 |
|
| 590 |
<motion.div
|
| 591 |
+
className="w-full"
|
| 592 |
+
initial={{ opacity: 0, x: 30 }}
|
| 593 |
whileInView={{ opacity: 1, x: 0 }}
|
| 594 |
+
viewport={{ once: true, margin: '-50px' }}
|
| 595 |
+
transition={{ duration: 0.6 }}
|
| 596 |
>
|
| 597 |
+
<div className="glass rounded-2xl p-6 sm:p-8 w-full max-w-lg mx-auto lg:mx-0">
|
| 598 |
<div className="space-y-6">
|
| 599 |
<div className="flex items-center space-x-4">
|
| 600 |
<HiLightningBolt className="text-2xl sm:text-3xl text-[var(--accent)] flex-shrink-0" />
|
| 601 |
+
<div className="min-w-0 flex-1">
|
| 602 |
<h4 className="text-base sm:text-lg font-semibold text-[var(--foreground)]">
|
| 603 |
Powered by AI
|
| 604 |
</h4>
|
|
|
|
| 609 |
</div>
|
| 610 |
<div className="flex items-center space-x-4">
|
| 611 |
<FiGift className="text-2xl sm:text-3xl text-[var(--accent)] flex-shrink-0" />
|
| 612 |
+
<div className="min-w-0 flex-1">
|
| 613 |
<h4 className="text-base sm:text-lg font-semibold text-[var(--foreground)]">
|
| 614 |
Free to Use
|
| 615 |
</h4>
|
|
|
|
| 620 |
</div>
|
| 621 |
<div className="flex items-center space-x-4">
|
| 622 |
<FiZap className="text-2xl sm:text-3xl text-[var(--accent)] flex-shrink-0" />
|
| 623 |
+
<div className="min-w-0 flex-1">
|
| 624 |
<h4 className="text-base sm:text-lg font-semibold text-[var(--foreground)]">
|
| 625 |
Lightning Fast
|
| 626 |
</h4>
|
|
|
|
| 639 |
<Footer />
|
| 640 |
</div>
|
| 641 |
);
|
| 642 |
+
}
|