@extends('front.mainLayout.app')

@section('title', 'Shortties Series')

@section('content')

    <!-- Hero Section -->
    <section class="shortties-series">
        <div class="container">
            <div class="text-center text-light my-5 py-5">
                <h1>Shortties Series</h1>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="power-section" style="background-color: white;">
        <div class="container">
            <div class="row m-auto">
                <div class="col-md-6 d-flex justify-content-center position-relative" style="margin-top: 7%;">
                    <div class="gradient-circle"></div> <!-- Gradient Background -->
                    <img src="{{ asset('assets/front/comming-soon-img.png') }}" class="img-fluid phone-img" alt="Mobile 1">
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="power-text">
                        <h2 style="font-weight: 800; font-size: 3em;">The Power of Shortties Series</h2>
                        <p>Turn your 1-13 second videos into a captivating ultra-short movie series.</p>
                        <div class="d-flex">
                            <i class="fa-solid fa-check me-2"></i>
                            <p>Each Shortties can be up to 13 seconds long. Create a series of up to 2-13 videos, crafting a total of 169 seconds of pure storytelling.</p>
                        </div>
                        <div class="d-flex">
                            <i class="fa-solid fa-check me-2"></i>
                            <p>Release your series your way: drop all parts at once or release them episodically.</p>
                        </div>
                        <div class="d-flex">
                            <i class="fa-solid fa-check me-2"></i>
                            <p>Add custom titles, descriptions, and storylines to make your series stand out.</p>
                        </div>
                    </div>
                    <hr>
                    <div class="downloads-users">
                        <div class="row m-auto">
                            <div class="col-md-4">
                                <h4 style="font-weight: 800; font-size: 2em;">0M+</h4>
                                <p>App Downloads</p>
                            </div>
                            <div class="col-md-4">
                                <h4 style="font-weight: 800; font-size: 2em;">0M+</h4>
                                <p>User Reviews</p>
                            </div>
                        </div>
                        <div class="row m-auto">
                            <div class="col-md-6">
                                <a class="signUp-button" href="#">App Coming Soon</a>
                            </div>
                            <div class="col-md-6">
                                <a class="learn-more-btn" href="#">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection