Browse docs
index.html
README.md
index.html
<div class="main-wrapper">
<div class="panel-1">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-lg-5 pe-lg-5">
<div class="badge-premium">
<i class="bi bi-stars"></i> New Experience
</div>
<h1 class="hero-title">Let's Discover Your Perfect Home Together</h1>
<p class="hero-subtitle">Start your journey with confidence as you explore homes designed for your lifestyle—combining comfort, style, and smart living.</p>
<div class="d-flex gap-3">
<button class="btn-premium-black">Buy a Home</button>
<button class="btn-premium-gray">Sell a Home</button>
</div>
</div>
<div class="col-lg-7">
<div class="hero-image-container">
<img src="https://images.unsplash.com/photo-1510798831971-661eb04b3739?auto=format&fit=crop&w=1200&q=80" alt="Ideal Home">
<div class="glass-card-premium">
<div class="glass-quote-section">
<p class="glass-text">"Everything was clear, professional, and easy from start to finish."</p>
</div>
<div class="user-profile-premium">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100&q=80" alt="Jane Cooper">
<span>Jane Cooper</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-2">
<div class="container">
<div class="row mb-5 d-none d-lg-block">
<div class="col-lg-6">
<div class="badge-premium">
<i class="bi bi-layers"></i> Smart Management
</div>
<p class="text-muted">Integrated platforms designed to streamline client interactions, driving direct connections and efficient workflows.</p>
</div>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card-feature d-flex align-items-start gap-3">
<div class="icon-box m-0 flex-shrink-0"><i class="bi bi-lightning-charge"></i></div>
<div>
<h4 class="mb-2">Performance</h4>
<p class="text-muted small m-0">Instant load times and a responsive interface optimized for maximum user retention.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card-feature d-flex align-items-start gap-3">
<div class="icon-box m-0 flex-shrink-0"><i class="bi bi-shield-check"></i></div>
<div>
<h4 class="mb-2">Security</h4>
<p class="text-muted small m-0">Robust infrastructure safeguarding all lead pipelines and end-to-end data integrations.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card-feature d-flex align-items-start gap-3">
<div class="icon-box m-0 flex-shrink-0"><i class="bi bi-whatsapp"></i></div>
<div>
<h4 class="mb-2">Direct Connection</h4>
<p class="text-muted small m-0">Intelligent routing to support channels, maximizing your business conversion rates.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="panel-3">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<div class="badge-premium" style="background-color: #1f1f23; color: #ffffff;">
<i class="bi bi-globe"></i> Global Scaling
</div>
<h2 class="hero-title">From Payments to Global Expansion</h2>
<p class="lead text-secondary mb-4">Your complete and integrated financial solution: high-performance checkout, higher approval rates, and structured centralized management built for the international market.</p>
<div class="d-flex gap-3">
<button class="btn-premium-black" style="background-color: #ffffff; color: var(--bg-dark);">Start Now</button>
</div>
</div>
<div class="col-lg-6">
<div class="dark-panel-card">
<div class="p-4 p-sm-5 border border-secondary border-opacity-25 rounded-4 bg-black bg-opacity-40 backdrop-blur" style="backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);">
<form action="#" method="POST" class="d-flex flex-column gap-3">
<div class="form-group position-relative">
<input type="text" class="form-control custom-input" placeholder="Your name" required autocomplete="off">
</div>
<div class="form-group position-relative">
<input type="email" class="form-control custom-input" placeholder="Your best email" required autocomplete="off">
</div>
<div class="d-flex gap-2 align-items-center">
<div class="form-group position-relative flex-grow-1 w-100">
<input type="tel" class="form-control custom-input" placeholder="Phone / WhatsApp" required autocomplete="off">
</div>
<button type="submit" class="btn-submit-arrow d-flex align-items-center justify-content-center flex-shrink-0" aria-label="Submit form">
<i class="bi bi-arrow-right"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>User Reviews
5.0
1 reviews
5 stars
1
4 stars
0
3 stars
0
2 stars
0
1 stars
0
T
Tomas
I’m loving this Stacked Cards module. It’s a clean, modern way to keep users engaged while scrolling. The reveal feels effortless and adds that high-end SaaS touch I was aiming for.
License
Copyright (c) 2026 (https://thefrontend.org/ux/sticky-scroll-reveal)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Copyright (c) 2026 (https://thefrontend.org/ux/sticky-scroll-reveal)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.