Content Blocks

Versatile content layouts for building engaging e-commerce pages

🎨 Content Block Demonstrations

Versatile content layouts for building engaging e-commerce pages

Hero Sections

Eye-catching hero sections for homepage and landing pages

Full Width Hero

Discover Premium Sparkles

Transform your projects with our exclusive collection

<div class="relative overflow-hidden rounded-2xl bg-slate-900">
    <div class="sparkles-hero-parallax-bg absolute inset-0 z-0">
        <img src="hero-bg.jpg" alt="Hero Background" class="w-full h-full object-cover">
    </div>
    <div class="relative z-10 max-w-7xl mx-auto px-4 py-24 text-center">
        <h1 class="text-fluid-4xl font-bold text-white section-mb-md sparkles-reveal">
            Hero Title
        </h1>
        <p class="text-fluid-lg text-white/90 section-mb-xxl sparkles-reveal" style="--reveal-delay:100ms">
            Hero subtitle text
        </p>
        <button class="sparkles-btn sparkles-btn-primary sparkles-btn-lg">
            Call to Action
        </button>
    </div>
</div>

Split Hero Section

Crafted with Excellence

Experience the perfect blend of quality and elegance in every piece. Our collection is designed to bring brilliance to your creations.

<div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
        <div class="flex items-center p-12">
            <div>
                <h2 class="section-mb-md text-2xl font-bold text-secondary sparkles-reveal fade-right">
                    Title Here
                </h2>
                <p class="text-gray-600 section-mb-xl">Description text</p>
                <button class="sparkles-btn sparkles-btn-primary">CTA Button</button>
            </div>
        </div>
        <div class="sparkles-hero-image relative overflow-hidden">
            <img src="image.jpg" alt="Hero Image" class="w-full h-full object-cover">
        </div>
    </div>
</div>

Feature Blocks

Highlight key features and benefits with engaging visual elements

Icon Feature Cards

Fast Delivery

Get your orders delivered within 24-48 hours with our express shipping service.

Secure Payment

Your transactions are protected with industry-leading encryption technology.

Quality Guarantee

100% satisfaction guaranteed or your money back within 30 days.

<div class="sparkles-card relative overflow-hidden p-8 text-center shadow-sm sparkles-reveal">
    <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-primary to-primary-dark"></div>
    <div class="mx-auto section-mb-xl flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-primary-dark text-white shadow-md">
        <!-- SVG Icon -->
    </div>
    <h3 class="section-mb-md text-xl font-semibold text-gray-800">Feature Title</h3>
    <p class="leading-relaxed text-gray-600">
        Feature description text here.
    </p>
</div>

Feature Content Blocks

Premium Materials

Crafted from the finest sources

Our products are made from carefully selected materials that ensure durability and beauty. Each piece undergoes rigorous quality control.

<div class="rounded-lg border border-gray-200 bg-white p-8 shadow-sm transition hover:shadow-md sparkles-reveal">
    <div class="section-mb-xl">
        <h3 class="section-mb-xs text-2xl font-bold text-secondary">Title</h3>
        <p class="text-lg text-gray-600">Subtitle</p>
    </div>
    <div class="section-mb-xl">
        <p>Content text</p>
    </div>
    <div class="flex justify-end gap-3">
        <button class="sparkles-btn sparkles-btn-primary">CTA</button>
    </div>
</div>

Text & Image Layouts

Flexible layouts combining text content with imagery

Image Left Layout

Exceptional Craftsmanship

Every piece in our collection is handcrafted by skilled artisans who take pride in their work. The attention to detail ensures that each product meets our exacting standards.

Hand-selected materials
Expert craftsmanship
Quality guaranteed

Alternating Image Layout

Design Excellence

Our design team creates timeless pieces that blend contemporary aesthetics with classic elegance.

Unmatched Quality

Each product undergoes rigorous testing to ensure it meets our high standards for durability and beauty.

Testimonials

Customer testimonials and reviews in various layouts

Testimonial Cards Grid

"The quality exceeded my expectations. Every detail is perfect and the customer service was exceptional throughout the process."

Sarah Johnson

Verified Buyer

"I've been a customer for 3 years and the consistency in quality and service keeps me coming back. Highly recommended!"

Michael Chen

Loyal Customer

"Beautiful products that arrived quickly and well-packaged. The attention to detail is impressive."

Emily Davis

First-time Buyer

<div class="sparkles-card flex h-full flex-col rounded-3xl bg-white p-6 text-center shadow-sm sparkles-reveal">
    <div class="section-mb-md text-5xl leading-none text-primary/20" aria-hidden="true">"</div>
    <blockquote class="section-mb-xl text-lg italic leading-relaxed text-gray-700">
        "Customer testimonial text here..."
    </blockquote>
    <div class="mt-auto flex items-center gap-3 text-left">
        <img src="avatar.jpg" alt="Customer" class="h-16 w-16 rounded-full object-cover">
        <div>
            <div class="font-semibold text-secondary">Customer Name</div>
            <div class="text-sm text-gray-500">Role/Title</div>
        </div>
    </div>
</div>

Call to Action Blocks

Compelling CTA sections to drive conversions

Simple CTA Block

Ready to Get Started?

Join thousands of satisfied customers who have transformed their projects with our premium collection.

Gradient CTA Block

Limited Time Offer

Get 20% off your first order when you sign up for our newsletter

Stats & Numbers

Display impressive numbers and statistics

Statistics Grid

Happy Customers

Products

Satisfaction Rate

Hour Support

<div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sparkles-reveal">
    <div class="text-fluid-4xl font-bold text-primary section-mb-xs" 
         x-data="{ count: 0 }" 
         x-init="setTimeout(() => { sparklesShowcaseAnimateCounter($el, 0, 10000) }, 500)">
        0
    </div>
    <div class="text-gray-600">Label</div>
</div>

Progress Indicators

Customer Satisfaction 98%

On-Time Delivery 95%

Product Quality 100%

Process Steps

Show multi-step processes and workflows

Horizontal Process Steps

Browse

Explore our collection

Select

Choose your items

Checkout

Secure payment

Receive

Enjoy your order

<div class="flex flex-wrap items-start gap-4">
    <div class="flex flex-1 flex-col items-center text-center">
        <div class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">1</div>
        <div class="section-mt-sm space-y-1">
            <h4 class="text-base font-semibold text-gray-900">Step Title</h4>
            <p class="text-sm text-gray-600">Description</p>
        </div>
    </div>
    <div class="section-mt-md hidden h-0.5 flex-1 bg-primary md:block"></div>
    <!-- More steps... -->
</div>

Timeline Layout

✓

Order Placed

Your order has been received

2 hours ago

✓

Processing

We're preparing your items

1 hour ago

Shipping

On the way to you

Expected tomorrow

Content Variations

Different styles and layouts for content blocks

Overlapping Layout

Special Offer

Get exclusive access to our premium collection with member pricing.

Pattern Background Block

Crafted with Love

Every piece tells a story of dedication and artistry

📝 Usage Examples

</div>

<div class="relative z-10 text-center">Hero Content</div>

</div>

<h3 class="section-mb-md text-xl font-semibold text-gray-800">Title</h3>

<p class="leading-relaxed text-gray-600">Description</p>

</div>

<blockquote class="section-mb-xl text-lg italic leading-relaxed text-gray-700">Quote text</blockquote>

<div class="mt-auto flex items-center gap-3 text-left">Author info</div>

</div>

⚡ Performance & Accessibility

Content Block Best Practices

🎯 Semantic HTML structure for better SEO and accessibility
⚡ Optimized scroll animations with reduced motion support
♿ Proper heading hierarchy and ARIA labels
📱 Responsive layouts tested across all device sizes