hugo-saasify-theme/layouts/index.html

{{ define "main" }}
<!-- Hero Section -->
<section class="relative overflow-hidden bg-gradient-to-b from-gray-50 to-white">
    <div class="container pt-16 pb-20 md:pt-24 md:pb-28">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-8">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
                    Unlock the Hidden Revenue in Your User Journeys
                </h1>
                <p class="text-xl text-gray-600">
                    Transform your user experience with powerful analytics and insights that drive growth and engagement.
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="#" class="btn-primary text-center">
                        Get Started Free
                    </a>
                    <a href="#" class="btn-outline text-center">
                        Schedule Demo
                    </a>
                </div>
            </div>
            <div class="relative">
                <div class="relative z-10">
                    <img src="{{ "images/hero-dashboard.svg" | relURL }}" alt="Analytics Dashboard" class="rounded-xl shadow-elevation">
                </div>
                <!-- Background decoration -->
                <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary-100 rounded-full filter blur-3xl opacity-50"></div>
                <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-secondary-100 rounded-full filter blur-3xl opacity-50"></div>
            </div>
        </div>
    </div>
</section>

<!-- Client Logos -->
<section class="border-y border-gray-100">
    <div class="container py-12">
        <p class="text-center text-sm font-medium text-gray-600 mb-8">Trusted by leading companies worldwide</p>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center justify-items-center opacity-70">
            <img src="{{ "images/client-logo-1.svg" | relURL }}" alt="Client Logo" class="h-8">
        </div>
    </div>
</section>

<!-- Feature Sections -->
<section class="section">
    <div class="container">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Powerful Features for Modern Teams</h2>
            <p class="text-xl text-gray-600">Discover how our platform helps you understand and optimize every aspect of your user experience.</p>
        </div>

        <!-- Feature Grid -->
        <div class="space-y-24">
            <!-- Feature 1 -->
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div class="space-y-6">
                    <div class="inline-block px-4 py-2 rounded-full bg-primary-100 text-primary-700 font-medium">User Analytics</div>
                    <h3 class="text-2xl md:text-3xl font-bold">Deep Insights into User Behavior</h3>
                    <p class="text-lg text-gray-600">Track and analyze user interactions in real-time. Understand how users navigate your product and identify opportunities for improvement.</p>
                    <ul class="space-y-4">
                        {{ range (slice "Real-time user tracking" "Behavioral analytics" "Custom event tracking" "User flow visualization") }}
                        <li class="flex items-center space-x-3">
                            <svg class="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span>{{ . }}</span>
                        </li>
                        {{ end }}
                    </ul>
                    <a href="#" class="btn-primary inline-block">Learn More</a>
                </div>
                <div class="relative">
                    <img src="{{ "images/feature-analytics.svg" | relURL }}" alt="Analytics Feature" class="rounded-xl shadow-elevation">
                </div>
            </div>

            <!-- Feature 2 -->
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div class="relative order-2 lg:order-1">
                    <img src="{{ "images/feature-session.svg" | relURL }}" alt="Session Replay Feature" class="rounded-xl shadow-elevation">
                </div>
                <div class="space-y-6 order-1 lg:order-2">
                    <div class="inline-block px-4 py-2 rounded-full bg-secondary-100 text-secondary-700 font-medium">Session Replay</div>
                    <h3 class="text-2xl md:text-3xl font-bold">Watch Real User Sessions</h3>
                    <p class="text-lg text-gray-600">Understand exactly how users interact with your product through high-fidelity session recordings and heatmaps.</p>
                    <ul class="space-y-4">
                        {{ range (slice "Full session recordings" "Click and scroll heatmaps" "Error tracking" "User journey analysis") }}
                        <li class="flex items-center space-x-3">
                            <svg class="w-5 h-5 text-secondary-600" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span>{{ . }}</span>
                        </li>
                        {{ end }}
                    </ul>
                    <a href="#" class="btn-secondary inline-block">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials -->
<section class="section bg-gray-50">
    <div class="container">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Loved by Teams Worldwide</h2>
            <p class="text-xl text-gray-600">See what our customers have to say about their experience with our platform.</p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="card">
                <div class="flex items-center space-x-4 mb-6">
                    <img src="{{ "images/testimonial-1.svg" | relURL }}" alt="Testimonial" class="w-12 h-12 rounded-full">
                    <div>
                        <h4 class="font-bold">John Smith</h4>
                        <p class="text-gray-600">Product Manager at Company</p>
                    </div>
                </div>
                <p class="text-gray-600">"This platform has transformed how we understand our users. The insights we've gained have been invaluable for our product development."</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section bg-primary-600">
    <div class="container">
        <div class="text-center max-w-3xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Transform Your User Experience?</h2>
            <p class="text-xl text-primary-100 mb-8">Join thousands of companies already using our platform to drive growth.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#" class="btn bg-white text-primary-600 hover:bg-gray-100">
                    Get Started Free
                </a>
                <a href="#" class="btn border-2 border-white text-white hover:bg-primary-700">
                    Schedule Demo
                </a>
            </div>
        </div>
    </div>
</section>
{{ end }}