<div class="compare-container">

  <div class="compare-image before">
    <img src="https://via.placeholder.com/900x500?text=Before+Design" alt="Before">
  </div>

  <div class="compare-image after">
    <img src="https://via.placeholder.com/900x500?text=After+Design" alt="After">
  </div>

  <div class="compare-handle"></div>

</div>
      

/* Container */
.compare-container {
  position: relative;
  max-width: 900px;
  margin: auto;
  height: 500px;
  border-radius: 18px;
  overflow: hidden;
  cursor: ew-resize;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}

/* Images */
.compare-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.compare-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Before full */
.compare-image.before {
  z-index: 1;
}

/* After clipped */
.compare-image.after {
  z-index: 2;
  width: 50%;
  overflow: hidden;
}

/* Handle */
.compare-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: #ffffff;
  z-index: 3;
  transform: translateX(-50%);
}

.compare-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  background: #6f00ff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(111,0,255,0.25);
}
      

// Before After Slider Logic
(function () {
  const container = document.querySelector(".compare-container");
  const afterImg = document.querySelector(".compare-image.after");
  const handle = document.querySelector(".compare-handle");

  let dragging = false;

  function moveSlider(x) {
    const rect = container.getBoundingClientRect();
    let pos = x - rect.left;
    pos = Math.max(0, Math.min(pos, rect.width));

    const percent = (pos / rect.width) * 100;
    afterImg.style.width = percent + "%";
    handle.style.left = percent + "%";
  }

  // Mouse
  container.addEventListener("mousedown", () => dragging = true);
  window.addEventListener("mouseup", () => dragging = false);
  window.addEventListener("mousemove", e => dragging && moveSlider(e.clientX));

  // Touch
  container.addEventListener("touchstart", () => dragging = true);
  window.addEventListener("touchend", () => dragging = false);
  window.addEventListener("touchmove", e => {
    if (dragging) moveSlider(e.touches[0].clientX);
  });
})();
      

<nav class="cyber-nav">
  <div class="nav-logo">
    <span class="glitch">Templora</span>
  </div>

  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Docs</a></li>
  </ul>

  <button class="cyber-btn">Launch</button>
</nav>
      

.cyber-nav {
  width: 100%;
  padding: 18px 35px;
  background: rgba(10, 10, 10, 0.85);
  border: 2px solid #8f00ff;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 35px #8f00ff55;
  position: relative;
  overflow: hidden;
}

/* Neon Accent Line */
.cyber-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff00e6, #00eaff, transparent);
  animation: scan 4s linear infinite;
}
@keyframes scan {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Logo */
.glitch {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 10px #ff00e6, 0 0 20px #00eaff;
}

/* Nav Links */
.nav-links {
  display: flex;
  gap: 25px;
  list-style: none;
}
.nav-links a {
  color: #e0e0e0;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  transition: 0.3s ease;
}
.nav-links a:hover {
  color: #00eaff;
}
.nav-links a::after {
  content: "";
  width: 0%;
  height: 2px;
  background: #00eaff;
  position: absolute;
  left: 0;
  bottom: -4px;
  transition: 0.3s;
}
.nav-links a:hover::after {
  width: 100%;
}

/* Cyberpunk Button */
.cyber-btn {
  padding: 10px 24px;
  background: transparent;
  border: 2px solid #ff00e6;
  color: #fff;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s ease;
  position: relative;
  overflow: hidden;
}
.cyber-btn:hover {
  background: #ff00e633;
  box-shadow: 0 0 18px #ff00e6;
}
.cyber-btn::before {
  content: "";
  width: 120%;
  height: 120%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 0, 230, 0.4),
    transparent
  );
  position: absolute;
  top: -100%;
  left: -20%;
  transform: rotate(25deg);
  animation: shine 2.5s infinite ease-in-out;
}
@keyframes shine {
  0% { top: -120%; }
  100% { top: 120%; }
}
      

document.querySelector(".cyber-nav").addEventListener("mousemove", () => {
  document.querySelector(".cyber-nav").style.transform = "scale(1.01)";
});
document.querySelector(".cyber-nav").addEventListener("mouseleave", () => {
  document.querySelector(".cyber-nav").style.transform = "scale(1)";
});
      

<div class="reveal-grid">

  <div class="reveal-card">
    <img src="https://via.placeholder.com/400x250" alt="">
    <div class="reveal-content">
      <h3>Modern UI Kits</h3>
      <p>Build beautiful interfaces with ready-made premium components.</p>
    </div>
  </div>

  <div class="reveal-card">
    <img src="https://via.placeholder.com/400x250" alt="">
    <div class="reveal-content">
      <h3>Templates</h3>
      <p>High-quality HTML templates for startups and portfolios.</p>
    </div>
  </div>

  <div class="reveal-card">
    <img src="https://via.placeholder.com/400x250" alt="">
    <div class="reveal-content">
      <h3>Animations</h3>
      <p>Enhance UX with smooth CSS & JS animations.</p>
    </div>
  </div>

</div>
      

/* Grid Layout */
.reveal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  max-width: 1100px;
  margin: auto;
  padding: 40px 0;
}

/* Card */
.reveal-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.35s ease;
  height: 260px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.reveal-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.35s ease;
}

/* Expand effect on hover */
.reveal-card:hover {
  transform: scale(1.06);
}

.reveal-card:hover img {
  filter: brightness(40%);
}

/* Hidden content */
.reveal-content {
  position: absolute;
  bottom: 0;
  padding: 20px;
  color: #fff;
  opacity: 0;
  transform: translateY(25px);
  transition: 0.35s ease;
}

/* Reveal on hover */
.reveal-card:hover .reveal-content {
  opacity: 1;
  transform: translateY(0px);
}

.reveal-content h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
}

.reveal-content p {
  font-size: 14px;
  opacity: 0.9;
}
      

// No JS required
console.log("Hover Reveal Cards Loaded");
      

<button class="open-command-btn">Open Command Palette (⌘ / Ctrl + K)</button>

<div class="command-overlay">
  <div class="command-box">

    <input type="text" class="command-input" placeholder="Type a command...">

    <ul class="command-list">
      <li class="command-item active" data-cmd="Go to Dashboard">📊 Go to Dashboard</li>
      <li class="command-item" data-cmd="Open Settings">⚙️ Open Settings</li>
      <li class="command-item" data-cmd="View Profile">👤 View Profile</li>
      <li class="command-item" data-cmd="Create New Project">➕ Create New Project</li>
      <li class="command-item" data-cmd="Logout">🚪 Logout</li>
    </ul>

  </div>
</div>
      

/* Open Button */
.open-command-btn {
  padding: 10px 16px;
  background: #6f00ff;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

/* Overlay */
.command-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  z-index: 9999;
}

.command-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Command Box */
.command-box {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  overflow: hidden;
  font-family: "Poppins", sans-serif;
}

/* Input */
.command-input {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  outline: none;
}

/* List */
.command-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
}

.command-item {
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s;
}

/* Hover & Active */
.command-item:hover,
.command-item.active {
  background: #f3e9ff;
  color: #6f00ff;
}
      

// Command Palette Logic
(function () {
  const overlay = document.querySelector(".command-overlay");
  const input = document.querySelector(".command-input");
  const items = Array.from(document.querySelectorAll(".command-item"));
  const openBtn = document.querySelector(".open-command-btn");
  let activeIndex = 0;

  function openPalette() {
    overlay.classList.add("active");
    input.value = "";
    input.focus();
    setActive(0);
    filterItems("");
  }

  function closePalette() {
    overlay.classList.remove("active");
  }

  function setActive(index) {
    items.forEach(i => i.classList.remove("active"));
    items[index]?.classList.add("active");
    activeIndex = index;
  }

  function filterItems(query) {
    items.forEach((item, i) => {
      const match = item.dataset.cmd.toLowerCase().includes(query.toLowerCase());
      item.style.display = match ? "block" : "none";
      if (match && activeIndex === -1) setActive(i);
    });
  }

  // Open button
  openBtn.addEventListener("click", openPalette);

  // Keyboard shortcut
  document.addEventListener("keydown", (e) => {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
      e.preventDefault();
      openPalette();
    }

    if (!overlay.classList.contains("active")) return;

    if (e.key === "Escape") closePalette();

    if (e.key === "ArrowDown") {
      e.preventDefault();
      setActive((activeIndex + 1) % items.length);
    }

    if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((activeIndex - 1 + items.length) % items.length);
    }

    if (e.key === "Enter") {
      alert("Command Selected: " + items[activeIndex].dataset.cmd);
      closePalette();
    }
  });

  // Search
  input.addEventListener("input", () => {
    filterItems(input.value);
  });

  // Click outside
  overlay.addEventListener("click", (e) => {
    if (e.target === overlay) closePalette();
  });
})();
      

<section class="contact-box-area">

  <div class="contact-card">
    <div class="contact-icon">
      <i class="bi bi-envelope-fill"></i>
    </div>
    <h3>Email</h3>
    <p>templora.support@gmail.com</p>
    <a href="mailto:templora.support@gmail.com" class="contact-btn">Send Email</a>
  </div>

  <div class="contact-card">
    <div class="contact-icon">
      <i class="bi bi-telephone-fill"></i>
    </div>
    <h3>Phone</h3>
    <p>+91 98765 43210</p>
    <a href="tel:+919876543210" class="contact-btn">Call Now</a>
  </div>

  <div class="contact-card">
    <div class="contact-icon">
      <i class="bi bi-geo-alt-fill"></i>
    </div>
    <h3>Location</h3>
    <p>Bengaluru, India</p>
    <a href="#" class="contact-btn">View Map</a>
  </div>

</section>
      

/* Contact Box Area */
.contact-box-area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  max-width: 1100px;
  margin: auto;
  padding: 40px 0;
}

.contact-card {
  background: #ffffff;
  border: 1px solid #e9e9f0;
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  transition: 0.35s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  cursor: pointer;
}

.contact-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

/* Icons */
.contact-icon {
  width: 62px;
  height: 62px;
  background: linear-gradient(135deg,#6f00ff,#ff00c8);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  font-size:28px;
  margin: 0 auto 16px;
  transition: 0.35s ease;
}

.contact-card:hover .contact-icon {
  transform: scale(1.09);
}

/* Titles */
.contact-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #111;
}

/* Details */
.contact-card p {
  color: #555;
  font-size: 14px;
  margin-bottom: 14px;
}

/* Button */
.contact-btn {
  display: inline-block;
  background: #6f00ff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s;
}

.contact-btn:hover {
  opacity: 0.85;
}
      

// No JS needed for this component
console.log("Contact Box Loaded");
      

<section class="tilt-cards">

  <div class="tilt-card">
    <div class="card-glow"></div>
    <h3>Fast Performance</h3>
    <p>Lightning-fast UI blocks designed for maximum efficiency.</p>
  </div>

  <div class="tilt-card">
    <div class="card-glow"></div>
    <h3>Premium UI</h3>
    <p>Beautiful aesthetic designs with modern gradient layers.</p>
  </div>

  <div class="tilt-card">
    <div class="card-glow"></div>
    <h3>Fully Responsive</h3>
    <p>Every component adapts to every screen intelligently.</p>
  </div>

</section>
      

.tilt-cards {
  display: flex;
  gap: 25px;
  justify-content: center;
  flex-wrap: wrap;
}

.tilt-card {
  width: 280px;
  padding: 40px 25px;
  border-radius: 20px;
  background: rgba(20, 20, 20, 0.8);
  border: 1.5px solid rgba(255, 0, 230, 0.25);
  position: relative;
  text-align: center;
  cursor: pointer;
  transition: 0.4s ease;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(138, 0, 255, 0.3);
}

.card-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #ff00e6, transparent);
  border-radius: 50%;
  top: -60px;
  right: -40px;
  filter: blur(40px);
  opacity: 0.4;
  pointer-events: none;
}

.tilt-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(255,0,230,0.4);
}

.tilt-card p {
  font-size: 15px;
  opacity: 0.8;
}

/* Hover Style */
.tilt-card:hover {
  box-shadow: 0 0 40px #ff00e666;
  border-color: #ff00e6;
}
      

document.querySelectorAll(".tilt-card").forEach(card => {
  card.addEventListener("mousemove", (e) => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;

    card.style.transform = 
      "rotateY(" + x / 20 + "deg) rotateX(" + -y / 20 + "deg)";
  });

  card.addEventListener("mouseleave", () => {
    card.style.transform = "rotateY(0deg) rotateX(0deg)";
  });
});
      

<div class="reaction-box">
  <button class="react-btn">React 👍</button>

  <div class="reaction-strip">
    <span class="emoji">👍</span>
    <span class="emoji">❤️</span>
    <span class="emoji">😂</span>
    <span class="emoji">😮</span>
    <span class="emoji">😢</span>
    <span class="emoji">😡</span>
  </div>
</div>
      

/* Reaction Box */
.reaction-box {
  position: relative;
  display: inline-block;
}

.react-btn {
  padding: 10px 18px;
  background: #6f00ff;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

/* Reaction Strip */
.reaction-strip {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  background: #fff;
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  border-radius: 40px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease;
}

/* Show on hover */
.reaction-box:hover .reaction-strip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* Emoji Style */
.emoji {
  font-size: 26px;
  cursor: pointer;
  transition: 0.25s ease;
  transform: translateY(10px);
  opacity: 0;
}

/* Pop Animation WITH DELAY */
.reaction-box:hover .emoji {
  transform: translateY(0px);
  opacity: 1;
}

.emoji:nth-child(1) { transition-delay: 0.05s; }
.emoji:nth-child(2) { transition-delay: 0.10s; }
.emoji:nth-child(3) { transition-delay: 0.15s; }
.emoji:nth-child(4) { transition-delay: 0.20s; }
.emoji:nth-child(5) { transition-delay: 0.25s; }
.emoji:nth-child(6) { transition-delay: 0.30s; }

/* Hover Grow */
.emoji:hover {
  transform: scale(1.4);
}
      

// Optional: Emoji click logger (custom actions here)
document.querySelectorAll(".emoji").forEach(e => {
  e.addEventListener("click", function(){
    console.log("Selected Reaction:", this.textContent);
  });
});
      

<section class="futuristic-faq">

  <div class="faq-item">
    <button class="faq-question">
      <span>What is Templora UI?</span>
      <i class="arrow-icon">⮟</i>
    </button>
    <div class="faq-answer">
      Templora UI provides premium futuristic components for developers, created with modern design principles.
    </div>
  </div>

  <div class="faq-item">
    <button class="faq-question">
      <span>Can I use components in any project?</span>
      <i class="arrow-icon">⮟</i>
    </button>
    <div class="faq-answer">
      Yes! All components are 100% reusable and can be integrated into any modern project easily.
    </div>
  </div>

  <div class="faq-item">
    <button class="faq-question">
      <span>Are these components Bootstrap-based?</span>
      <i class="arrow-icon">⮟</i>
    </button>
    <div class="faq-answer">
      No. Templora components are premium, custom-built blocks not available on Bootstrap or any other UI library.
    </div>
  </div>

</section>
      

.futuristic-faq {
  width: 100%;
  max-width: 650px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Question Box */
.faq-question {
  width: 100%;
  background: linear-gradient(90deg, #6f00ff, #ff00e6);
  padding: 16px 20px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 18px #ff00e666;
  transition: 0.3s;
}

.faq-question:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 28px #ff00e699;
}

/* Arrow */
.arrow-icon {
  transition: 0.3s ease;
  font-size: 20px;
}

/* Answer Panel */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
  padding: 0 20px;
  border-radius: 14px;
  transition: max-height 0.45s ease, padding 0.3s ease;
  color: #e8e8e8;
  line-height: 1.6;
}

/* Active State */
.faq-item.active .faq-answer {
  color: #0e0e0e;
  padding: 18px 20px;
  max-height: 200px;
}
.faq-item.active .arrow-icon {
  transform: rotate(180deg);
}
      

document.querySelectorAll(".faq-item").forEach(item => {
  item.querySelector(".faq-question").addEventListener("click", () => {

    // Close all others
    document.querySelectorAll(".faq-item").forEach(i => {
      if (i !== item) i.classList.remove("active");
    });

    // Toggle current
    item.classList.toggle("active");
  });
});
      

<div class="notif-bar" id="notifBar">
  <span class="notif-text">
    🎉 Big Update! — New Components Added Today.
  </span>
  <button class="notif-close" id="notifClose">
    <i class="bi bi-x-lg"></i>
  </button>
</div>
      

/* Modern Notification Bar */
.notif-bar {
  width: 100%;
  background: linear-gradient(90deg,#6f00ff,#ff00c8);
  color: #fff;
  padding: 12px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 18px rgba(111,0,255,0.28);
  position: relative;
  transform: translateY(-110%);
  opacity: 0;
  animation: slideDown 0.7s ease forwards;
  z-index: 999;
}

.notif-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
}

.notif-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.25s;
}

.notif-close:hover {
  background: rgba(255,255,255,0.3);
}

/* Slide animation */
@keyframes slideDown {
  0% { transform: translateY(-110%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Hide animation */
.hide-notif {
  animation: slideUp 0.5s ease forwards;
}

@keyframes slideUp {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-110%); opacity: 0; }
}

/* Demo wrapper */
.notif-demo {
  padding: 0 !important;
}
      

// Notification Bar JS
const notifBar = document.getElementById("notifBar");
const notifClose = document.getElementById("notifClose");

notifClose.addEventListener("click", () => {
  notifBar.classList.add("hide-notif");
});
      

<section class="grad-stats">

  <div class="stat-card" data-target="4.8">
    <div class="stat-icon">★</div>
    <div class="stat-value"><span class="num">0</span><span class="suffix">★</span></div>
    <div class="stat-label">Average Rating</div>
  </div>

  <div class="stat-card" data-target="12000">
    <div class="stat-icon">👥</div>
    <div class="stat-value"><span class="num">0</span><span class="suffix">+</span></div>
    <div class="stat-label">Monthly Users</div>
  </div>

  <div class="stat-card" data-target="98">
    <div class="stat-icon">💯</div>
    <div class="stat-value"><span class="num">0</span><span class="suffix">%</span></div>
    <div class="stat-label">Satisfaction Rate</div>
  </div>

</section>
      

/* Minimal Gradient Stats Blocks CSS */
.grad-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

/* Card base */
.stat-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  border: 1px solid #eef0f3;
  transition: transform 0.35s cubic-bezier(.2,.9,.2,1), box-shadow 0.35s;
  cursor: default;
  box-shadow: 0 6px 20px rgba(15,20,30,0.04);
}

/* subtle hover */
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(15,20,30,0.08);
}

/* Icon circle (soft gradient ring) */
.stat-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 22px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, rgba(111,0,255,0.12), rgba(255,0,150,0.06));
  color: #6f00ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Value */
.stat-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-weight: 800;
  color: #0f1724;
  font-size: 28px;
}
.stat-value .num {
  display: inline-block;
  min-width: 36px;
  text-align: right;
}
.stat-value .suffix {
  font-size: 16px;
  color: #6b7280;
  font-weight:700;
}

/* Label */
.stat-label {
  margin-top: 8px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
}

/* Micro animation for icon */
.stat-card .stat-icon {
  transition: transform 0.45s cubic-bezier(.2,.9,.2,1);
}
.stat-card:hover .stat-icon {
  transform: translateY(-4px) scale(1.03);
}

/* light gradient accent under card (thin) */
.stat-card::after {
  content: "";
  display: block;
  height: 6px;
  margin-top: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #6f00ff, #ff00b3);
  opacity: 0.06;
}

/* Responsive spacing */
@media (max-width:720px) {
  .stat-value { font-size: 22px; }
  .stat-icon { width:50px; height:50px; font-size:20px; }
}
      

// Minimal Gradient Stats Blocks JS
// - simple count-up animation triggers when visible
// - copyCode helper included for copy buttons

// copyCode helper (for the component page copy buttons)
function copyCode(id) {
  const code = document.getElementById(id).innerText;
  navigator.clipboard.writeText(code).then(()=> {
    // optional small toast or alert
    const btns = document.querySelectorAll('.copy-btn');
    // quick feedback: find the visible copy button and show text change (safe fallback)
    // (If advanced feedback script exists globally, it can override this)
    alert("Code copied to clipboard!");
  }).catch(()=> alert("Copy failed — please select and copy manually."));
}

// count-up when element visible
function animateStats() {
  const cards = document.querySelectorAll('.stat-card');
  const options = { threshold: 0.4 };
  const obs = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const card = entry.target;
        const targetRaw = card.getAttribute('data-target') || "0";
        const numEl = card.querySelector('.num');
        // handle floats like 4.8
        const isFloat = targetRaw.toString().includes('.');
        const target = isFloat ? parseFloat(targetRaw) : parseInt(targetRaw, 10);

        if (!numEl.dataset.animated) {
          numEl.dataset.animated = "true";
          const duration = 1000; // ms
          const frameRate = 60;
          const totalFrames = Math.round((duration / 1000) * frameRate);
          let frame = 0;
          const start = 0;
          const counter = setInterval(() => {
            frame++;
            const progress = frame / totalFrames;
            const eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic
            const value = isFloat
              ? (start + (target - start) * eased).toFixed(1)
              : Math.round(start + (target - start) * eased);

            numEl.textContent = value;
            if (frame >= totalFrames) {
              clearInterval(counter);
              numEl.textContent = isFloat ? target.toFixed(1) : target;
            }
          }, Math.round(1000 / frameRate));
        }
        observer.unobserve(card);
      }
    });
  }, options);

  cards.forEach(c => obs.observe(c));
}

// init on DOM ready
document.addEventListener('DOMContentLoaded', animateStats);
      

<div class="story-wrapper">

  <div class="story-visual">
    <div class="story-screen active">🚀 Fast Performance</div>
    <div class="story-screen">🎨 Modern Design</div>
    <div class="story-screen">🔒 Secure System</div>
    <div class="story-screen">📱 Fully Responsive</div>
  </div>

  <div class="story-content">
    <div class="story-step">Fast performance with optimized code and assets.</div>
    <div class="story-step">Premium UI with clean layouts and animations.</div>
    <div class="story-step">Security-focused architecture for modern apps.</div>
    <div class="story-step">Perfect experience on mobile, tablet and desktop.</div>
  </div>

</div>
      

.story-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: auto;
}

/* Sticky Visual */
.story-visual {
  position: sticky;
  top: 120px;
  height: 260px;
  background: #f6f3ff;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
}

/* Screens */
.story-screen {
  display: none;
}

.story-screen.active {
  display: block;
}

/* Content Steps */
.story-content {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.story-step {
  font-size: 18px;
  line-height: 1.6;
  padding: 80px 0;
  color: #333;
}

/* Responsive */
@media (max-width: 768px) {
  .story-wrapper {
    grid-template-columns: 1fr;
  }
  .story-visual {
    position: relative;
    top: 0;
  }
}
      

// Scroll Story Logic
(function () {
  const steps = document.querySelectorAll(".story-step");
  const screens = document.querySelectorAll(".story-screen");

  window.addEventListener("scroll", () => {
    let index = 0;

    steps.forEach((step, i) => {
      const rect = step.getBoundingClientRect();
      if (rect.top < window.innerHeight / 2) {
        index = i;
      }
    });

    screens.forEach(s => s.classList.remove("active"));
    screens[index]?.classList.add("active");
  });
})();
      

<div class="search-wrapper">

  <div class="search-box">
    <i class="bi bi-search search-icon"></i>
    <input type="text" id="searchInput" placeholder="Search components, templates, snippets…" />
    <button class="search-btn">Search</button>
  </div>

  <ul class="search-suggestions" id="searchSuggestions">
    <li><i class="bi bi-stars"></i> Premium Components</li>
    <li><i class="bi bi-layers"></i> Templates</li>
    <li><i class="bi bi-code"></i> Code Snippets</li>
    <li><i class="bi bi-lightning-charge"></i> New Releases</li>
  </ul>

</div>
      

/* SEARCH SECTION */
.search-wrapper {
  max-width: 650px;
  margin: 20px auto;
  position: relative;
}

/* Search Box */
.search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 10px 25px rgba(111,0,255,0.10);
  border: 1px solid #e8e0ff;
  transition: 0.3s ease;
}

.search-box:hover {
  box-shadow: 0 14px 35px rgba(111,0,255,0.18);
}

/* Icon */
.search-icon {
  font-size: 20px;
  color: #6f00ff;
  margin-right: 12px;
}

/* Input */
.search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: #222;
  background: transparent;
}

/* Search Button */
.search-btn {
  background: #6f00ff;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: 0.25s ease;
}

.search-btn:hover {
  opacity: 0.85;
}

/* Suggestions Box */
.search-suggestions {
  list-style: none;
  padding: 12px 0;
  margin: 10px 0 0;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ece0ff;
  box-shadow: 0 12px 30px rgba(111,0,255,0.12);
  display: none;
  animation: fadeIn 0.25s ease;
}

.search-suggestions li {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s;
}

.search-suggestions li:hover {
  background: #f6f0ff;
  color: #6f00ff;
}

/* Icons in suggestions */
.search-suggestions li i {
  font-size: 18px;
  color: #6f00ff;
}

/* Fade animation */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-4px);}
  to {opacity: 1; transform: translateY(0);}
}
      

// Search Suggestion Logic
const searchInput = document.getElementById("searchInput");
const suggestions = document.getElementById("searchSuggestions");

searchInput.addEventListener("focus", () => {
  suggestions.style.display = "block";
});

searchInput.addEventListener("blur", () => {
  setTimeout(() => {
    suggestions.style.display = "none";
  }, 150);
});
      

<section class="team-area">

  <div class="team-card">
    <div class="team-image">
      <img src="IMAGE-HERE" alt="Team Member">
    </div>
    <h3>Sarah Johnson</h3>
    <p>UI/UX Designer</p>

    <div class="team-social">
      <a href="#"><i class="bi bi-facebook"></i></a>
      <a href="#"><i class="bi bi-instagram"></i></a>
      <a href="#"><i class="bi bi-linkedin"></i></a>
    </div>
  </div>

</section>
      

/* TEAM CARDS */
.team-area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 30px;
  max-width: 1100px;
  margin: auto;
  padding: 40px 0;
}

/* Card */
.team-card {
  background: #fff;
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
  border: 1px solid #eee;
  box-shadow: 0 10px 26px rgba(0,0,0,0.07);
  transition: 0.35s ease;
  position: relative;
  cursor: pointer;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgba(111,0,255,0.25);
  border-color: #6f00ff;
}

/* Image */
.team-image img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 12px;
  transition: 0.3s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.team-card:hover .team-image img {
  transform: scale(1.08);
}

/* Name */
.team-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}

/* Role */
.team-card p {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

/* Social Icons */
.team-social a {
  margin: 0 6px;
  font-size: 18px;
  color: #6f00ff;
  transition: 0.25s ease;
}

.team-social a:hover {
  color: #ff00c8;
  transform: translateY(-3px);
}
      

// No JS required for this component
console.log("Team Hover Cards Loaded");