.header[data-astro-cid-3ef6ksr2]{position:fixed;top:24px;left:50%;transform:translate(-50%);width:calc(100% - 48px);max-width:1200px;z-index:100;padding:12px 0;border-radius:100px;transition:all .3s ease}.header-content[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:101}.logo[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:8px;font-size:1.5rem;font-weight:700;color:var(--color-text)}.logo-img[data-astro-cid-3ef6ksr2]{height:40px;width:auto}.desktop-nav[data-astro-cid-3ef6ksr2],.desktop-cta[data-astro-cid-3ef6ksr2]{display:none}.menu-toggle[data-astro-cid-3ef6ksr2]{display:flex;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:4px;z-index:102}.bar[data-astro-cid-3ef6ksr2]{width:24px;height:2px;background-color:var(--color-text);transition:all .3s;border-radius:2px}.menu-toggle[data-astro-cid-3ef6ksr2].active .bar[data-astro-cid-3ef6ksr2]:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu-toggle[data-astro-cid-3ef6ksr2].active .bar[data-astro-cid-3ef6ksr2]:nth-child(2){opacity:0}.menu-toggle[data-astro-cid-3ef6ksr2].active .bar[data-astro-cid-3ef6ksr2]:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.mobile-menu[data-astro-cid-3ef6ksr2]{position:absolute;top:100%;left:0;width:100%;margin-top:16px;padding:24px;border-radius:24px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:20px;background:#121a14f2;border:1px solid rgba(255,255,255,.1)}.mobile-menu[data-astro-cid-3ef6ksr2].active{opacity:1;visibility:visible;transform:translateY(0)}.mobile-nav[data-astro-cid-3ef6ksr2]{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.mobile-link[data-astro-cid-3ef6ksr2]{font-size:1.1rem;font-weight:500;color:var(--color-text)}.mobile-cta[data-astro-cid-3ef6ksr2]{width:100%;max-width:200px}@media(min-width:768px){.desktop-nav[data-astro-cid-3ef6ksr2]{display:flex;gap:32px}.desktop-nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]{color:var(--color-text-muted);transition:color .3s}.desktop-nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:hover{color:var(--color-primary)}.desktop-cta[data-astro-cid-3ef6ksr2]{display:inline-flex}.menu-toggle[data-astro-cid-3ef6ksr2],.mobile-menu[data-astro-cid-3ef6ksr2]{display:none}}.hero[data-astro-cid-bbe6dxrz]{padding-top:160px;min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}.hero[data-astro-cid-bbe6dxrz]:before{content:"";position:absolute;top:-20%;left:-10%;width:50%;height:50%;background:var(--color-primary);filter:blur(150px);opacity:.15;z-index:-1;border-radius:50%}.hero-content[data-astro-cid-bbe6dxrz]{display:grid;grid-template-columns:1fr;gap:60px;align-items:center}@media(min-width:992px){.hero-content[data-astro-cid-bbe6dxrz]{grid-template-columns:1fr 1fr}}.hero-title[data-astro-cid-bbe6dxrz]{font-size:3.5rem;margin-bottom:24px;line-height:1.1}@media(min-width:768px){.hero-title[data-astro-cid-bbe6dxrz]{font-size:4.5rem}}.hero-desc[data-astro-cid-bbe6dxrz]{font-size:1.25rem;color:var(--color-text-muted);margin-bottom:40px;max-width:500px}.hero-btns[data-astro-cid-bbe6dxrz]{display:flex;gap:16px;flex-wrap:wrap}.btn-secondary[data-astro-cid-bbe6dxrz]{background:#ffffff1a;color:#fff;padding:12px 24px;border-radius:var(--radius-md);font-weight:600;transition:all .3s}.btn-secondary[data-astro-cid-bbe6dxrz]:hover{background:#fff3}.visual-card[data-astro-cid-bbe6dxrz]{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.visual-glow[data-astro-cid-bbe6dxrz]{position:absolute;width:100%;height:100%;background:radial-gradient(circle at center,var(--color-primary-glow),transparent 70%);opacity:.2;z-index:1;pointer-events:none}.hero-img[data-astro-cid-bbe6dxrz]{width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s ease}.visual-card[data-astro-cid-bbe6dxrz]:hover .hero-img[data-astro-cid-bbe6dxrz]{--- import{Image}from "astro:assets";import{ArrowRight}from "lucide-astro";import heroImg from "../assets/hero.png";--- <section class="hero section"> <div class="container hero-content"> <div class="hero-text"> <h1 class="hero-title"> Turn your dreams into <br /> <span class="text-gradient">Anime Reality</span> </h1> <p class="hero-desc"> Create stunning anime art,transform photos into anime characters,or bring anime to life with our advanced AI. </p> <div class="hero-btns"> <a href="https://t.me/transformanime_bot/transformanime" class="btn btn-primary" > Start Creating <ArrowRight size={20}style="margin-left: 8px;" /> </a> <a href="#features" class="btn btn-secondary">Learn More</a> </div> </div> <div class="hero-visual"> <div class="visual-card glass tilt-card"> <div class="visual-glow"></div> <Image src={heroImg}alt="AI Generated Anime Art" class="hero-img" width={800}height={600}loading="eager" format="webp" quality={85}widths={[400,600,800]}sizes="(max-width: 768px) 100vw, 50vw" /> <!-- To use your own image: 1 Save your image as "hero.png" in "public/" folder 2 Change src above to "/hero.png" --> </div> </div> </div> </section> <style> .hero{padding-top:160px;min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-20%;left:-10%;width:50%;height:50%;background:var(--color-primary);filter:blur(150px);opacity:.15;z-index:-1;border-radius:50%}.hero-content{display:grid;grid-template-columns:1fr;gap:60px;align-items:center}@media(min-width:992px){.hero-content{grid-template-columns:1fr 1fr}}.hero-title{font-size:3.5rem;margin-bottom:24px;line-height:1.1}@media(min-width:768px){.hero-title{font-size:4.5rem}}.hero-desc{font-size:1.25rem;color:var(--color-text-muted);margin-bottom:40px;max-width:500px}.hero-btns{display:flex;gap:16px;flex-wrap:wrap}.btn-secondary{background:#ffffff1a;color:#fff;padding:12px 24px;border-radius:var(--radius-md);font-weight:600;transition:all .3s}.btn-secondary:hover{background:#fff3}.visual-card{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.visual-glow{position:absolute;width:100%;height:100%;background:radial-gradient(circle at center,var(--color-primary-glow),transparent 70%);opacity:.2;z-index:1;pointer-events:none}.hero-img{width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s ease}.visual-card:hover .hero-img{transform:scale(1.05)}}.section-header[data-astro-cid-vnivfuh2]{text-align:center;margin-bottom:60px}.section-title[data-astro-cid-vnivfuh2]{font-size:2.5rem;margin-bottom:16px}.section-desc[data-astro-cid-vnivfuh2]{color:var(--color-text-muted);font-size:1.1rem}.feature-card[data-astro-cid-vnivfuh2]{display:flex;flex-direction:column;gap:16px;align-items:flex-start}.icon-wrapper[data-astro-cid-vnivfuh2]{width:60px;height:60px;border-radius:50%;background:#ccff001a;display:flex;align-items:center;justify-content:center;color:var(--color-primary);margin-bottom:8px}.feature-card[data-astro-cid-vnivfuh2] h3[data-astro-cid-vnivfuh2]{font-size:1.5rem}.feature-card[data-astro-cid-vnivfuh2] p[data-astro-cid-vnivfuh2]{color:var(--color-text-muted)}.section-header[data-astro-cid-xyg7ob6d]{text-align:center;margin-bottom:60px}.section-title[data-astro-cid-xyg7ob6d]{font-size:2.5rem;margin-bottom:16px}.section-desc[data-astro-cid-xyg7ob6d]{color:var(--color-text-muted);font-size:1.1rem}.gallery-grid[data-astro-cid-xyg7ob6d]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;grid-auto-rows:200px}.gallery-item[data-astro-cid-xyg7ob6d]{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer}.gallery-item[data-astro-cid-xyg7ob6d].row-span-2{grid-row:span 2}.gallery-item[data-astro-cid-xyg7ob6d] img[data-astro-cid-xyg7ob6d]{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.gallery-item[data-astro-cid-xyg7ob6d]:hover img[data-astro-cid-xyg7ob6d]{transform:scale(1.1)}.overlay[data-astro-cid-xyg7ob6d]{position:absolute;bottom:0;left:0;width:100%;padding:20px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);opacity:0;transition:opacity .3s ease;display:flex;align-items:flex-end}.gallery-item[data-astro-cid-xyg7ob6d]:hover .overlay[data-astro-cid-xyg7ob6d]{opacity:1}.overlay[data-astro-cid-xyg7ob6d] span[data-astro-cid-xyg7ob6d]{color:#fff;font-size:.9rem;--- import{Image}from "astro:assets";// Import all images from the showcase folder const localImages = import.meta.glob<{default:ImageMetadata}>("/src/assets/showcase/*.{jpeg,jpg,png,gif}",{eager: true},);const imageList = Object.values(localImages).map((img) => img.default);// Fallback if no images are found (for development/demo purposes) const fallbackImages = [{src: "https://images.unsplash.com/photo-1578632767115-351597cf2477?auto=format&fit=crop&w=600&q=80",alt: "Anime Art 1",},{src: "https://images.unsplash.com/photo-1560972550-aba3456b5564?auto=format&fit=crop&w=600&q=80",alt: "Anime Art 2",},{src: "https://images.unsplash.com/photo-1541562232579-512a21360020?auto=format&fit=crop&w=600&q=80",alt: "Anime Art 3",},{src: "https://images.unsplash.com/photo-1613376023733-0a73315d9b06?auto=format&fit=crop&w=600&q=80",alt: "Anime Art 4",},{src: "https://images.unsplash.com/photo-1569701813229-33284b64363c?auto=format&fit=crop&w=600&q=80",alt: "Anime Art 5",},{src: "https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?auto=format&fit=crop&w=600&q=80",alt: "Anime Art 6",},];const displayImages = imageList.length > 0 ? imageList : fallbackImages;--- <section id="showcase" class="section"> <div class="container"> <div class="section-header"> <h2 class="section-title"> Community <span class="text-gradient">Showcase</span> </h2> <p class="section-desc"> Explore stunning artwork created by our community. </p> </div>{imageList.length === 0 && (<p style="text-align: center; color: var(--color-text-muted); margin-bottom: 20px;"> (Add images to <code>src/assets/showcase</code> to see them here) </p>)}<div class="gallery-grid">{displayImages.map((img,index) => (<div class={`gallery-item tilt-card ${index % 3 === 0 ? "row-span-2" : ""}`} > {"format" in img ? (<Image src={img as ImageMetadata} alt={`Showcase ${index}`} width={600} height={index % 3 === 0 ? 800 : 400} class="gallery-img" loading="lazy" format="webp" quality={80} widths={[300,450,600]} sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" />) : (<Image src={(img as any).src} alt={`Showcase ${index}`} width={600} height={400} class="gallery-img" loading="lazy" format="webp" quality={80} />)} <div class="overlay"> <span>Generated by User#{1000 + index}</span> </div> </div>))}</div> </div> </section> <style> .section-header{text-align:center;margin-bottom:60px}.section-title{font-size:2.5rem;margin-bottom:16px}.section-desc{color:var(--color-text-muted);font-size:1.1rem}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;grid-auto-rows:200px}.gallery-item{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer}.gallery-item.row-span-2{grid-row:span 2}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.gallery-item:hover img{transform:scale(1.1)}.overlay{position:absolute;bottom:0;left:0;width:100%;padding:20px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);opacity:0;transition:opacity .3s ease;display:flex;align-items:flex-end}.gallery-item:hover .overlay{opacity:1}.overlay span{color:#fff;font-size:.9rem;font-weight:600}}.section-header[data-astro-cid-hkoc4sea]{text-align:center;margin-bottom:60px;display:flex;flex-direction:column;align-items:center}.check-icon[data-astro-cid-hkoc4sea]{color:#fff;"Instant activation",],},{credits:360,price: 9.99,popular: true,features: ["Never expires","Use for all features","Instant activation",],},{credits:800,price: 19.99,features: ["Never expires","Use for all features","Instant activation",],},]; --- <section id="pricing" class="section"> <div class="container"> <div class="section-header"> <div class="icon-glow"> <ShoppingCart size={40}/> </div> <h2 class="section-title"> <span class="text-gradient">Credit Packages</span> </h2> <p class="section-desc"> Choose the perfect package for your needs </p> </div> <div class="pricing-grid">{packages.map((pkg) => (<div class={`card pricing-card tilt-card ${pkg.popular ? "popular" : ""}`} > {pkg.popular && (<div class="popular-badge">Most Popular</div>)} <div class="credits"> <span class="amount">{pkg.credits}</span> <span class="label">credits</span> </div> <div class="price"> <span class="currency">$</span> <span class="value">{pkg.price}</span> <span class="unit">USD</span> </div> <button class="btn btn-primary full-width"> Buy Now </button> <ul class="features-list"> {pkg.features.map((feature) => (<li> <Check size={16} class="check-icon" /> {feature} </li>))} </ul> </div>))}</div> </div> </section> <style> .section-header{text-align:center;margin-bottom:60px;display:flex;flex-direction:column;align-items:center}.icon-glow[data-astro-cid-hkoc4sea]{width:80px;height:80px;border-radius:50%;background:#141e14cc;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 30px var(--color-primary-glow);margin-bottom:24px;border:1px solid rgba(255,255,255,.1)}.section-title[data-astro-cid-hkoc4sea]{font-size:2.5rem;margin-bottom:16px}.section-desc[data-astro-cid-hkoc4sea]{color:var(--color-text-muted);font-size:1.1rem}.pricing-grid[data-astro-cid-hkoc4sea]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;max-width:1000px;margin:0 auto}.pricing-card[data-astro-cid-hkoc4sea]{position:relative;display:flex;flex-direction:column;background:#151f18;border:1px solid rgba(255,255,255,.05)}.pricing-card[data-astro-cid-hkoc4sea].popular{border-color:var(--color-primary);box-shadow:0 0 30px #ccff001a;transform:scale(1.05);z-index:1}.popular-badge[data-astro-cid-hkoc4sea]{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:var(--color-primary);color:#000;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:700;text-transform:uppercase}.credits[data-astro-cid-hkoc4sea]{margin-bottom:8px}.credits[data-astro-cid-hkoc4sea] .amount[data-astro-cid-hkoc4sea]{font-size:2.5rem;font-weight:700;color:var(--color-primary)}.credits[data-astro-cid-hkoc4sea] .label[data-astro-cid-hkoc4sea]{font-size:1.2rem;font-weight:600;margin-left:8px}.price[data-astro-cid-hkoc4sea]{margin-bottom:24px;display:flex;align-items:baseline}.price[data-astro-cid-hkoc4sea] .currency[data-astro-cid-hkoc4sea]{font-size:1.5rem;font-weight:600}.price[data-astro-cid-hkoc4sea] .value[data-astro-cid-hkoc4sea]{font-size:3rem;font-weight:700;line-height:1}.price[data-astro-cid-hkoc4sea] .unit[data-astro-cid-hkoc4sea]{margin-left:8px;color:var(--color-text-muted);font-size:.9rem}.full-width[data-astro-cid-hkoc4sea]{width:100%;margin-bottom:24px}.features-list[data-astro-cid-hkoc4sea]{list-style:none;display:flex;flex-direction:column;gap:12px}.features-list[data-astro-cid-hkoc4sea] li[data-astro-cid-hkoc4sea]{display:flex;align-items:center;gap:12px;color:var(--color-text-muted)}.check-icon[data-astro-cid-hkoc4sea]{color:#fff}.footer[data-astro-cid-sz7xmlte]{padding:40px 0;border-top:1px solid var(--color-border);margin-top:80px;color:var(--color-text-muted)}.footer-content[data-astro-cid-sz7xmlte]{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.footer-links[data-astro-cid-sz7xmlte]{display:flex;gap:24px}.footer-links[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover{color:var(--color-primary)}