{% extends "public/base.html" %}
{% load static %}

{% block title %}StartUp Solutions — {{ site.site_name }}{% endblock %}
{% block meta_description %}From idea to presentable prototype — lean digital solutions for early-stage startups.{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    <h1>StartUp Solutions</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="hero-container">
            <div class="d-flex flex-column gspace-2">
                <div class="d-flex flex-column flex-md-row h-100 gspace-2">
                    <div class="about-details">
                        <div class="sub-heading">
                            <i class="fa-regular fa-circle-dot"></i>
                            <h6 class="font-family-1 accent-color">Startup Solutions</h6>
                        </div>
                        <h2 class="animate-box animated animate__animated" data-animate="animate__fadeInUp">
                            Build Your Startup<br>Before You Burn Your Budget
                        </h2>
                        <p>We help founders turn early-stage ideas into clean, presentable and functional digital solutions for testing, pitching, funding and launch.</p>
                        <div class="d-flex gap-2">
                            <a href="#consultation" class="btn btn-accent">Book Free Consultation</a>
                            <a href="#explore" class="btn btn-accent-outline">Explore Solutions</a>
                        </div>
                    </div>
                    <div class="about-image-wrapper">
                        <div class="image-container">
                            <img src="{% static 'images/startup-img1.jpg' %}" alt="Startup" class="img-fluid animate-box animated animate__animated" data-animate="animate__fadeInRight" />
                        </div>
                        <div class="card about-traffic-card animate-box animated animate__animated" data-animate="animate__zoomIn">
                            <div class="d-flex flex-column gspace-2 align-self-center text-center">
                                <i class="fa-solid fa-2x fa-rocket"></i>
                                <p class="secondary-accent mb-0">Projects Delivered</p>
                                <h2 class="secondary-accent">500+</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section py-0 animate-box animated animate__animated" data-animate="animate__zoomIn">
        <div class="hero-container">
            <div class="cta-banner">
                <div class="cta-content">
                    <div class="cta-container">
                        <h2 class="secondary-accent">From Idea to Presentable Prototype</h2>
                        <p>Many startups spend too much too early or build features they do not need. We help you focus on the right digital foundation, so your idea becomes understandable, usable and ready to present.</p>
                        <div class="alert alert-primary sub-heading" role="alert">
                            <i class="fa-solid fa-circle-exclamation text-white"></i>
                            <span>Our Focus: Build the smartest first version of your idea, not the most expensive one.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section" id="explore">
        <div class="hero-container">
            <div class="d-flex flex-column gspace-2">
                <div class="service-heading-container">
                    <div class="sub-heading justify-content-center">
                        <i class="fa-regular fa-circle-dot"></i>
                        <h6 class="font-family-1 accent-color">Clarity, Speed, Impact</h6>
                    </div>
                    <h2 class="text-center animate-box animated animate__animated" data-animate="animate__fadeInUp">
                        Digital Solutions for Early-Stage Startups
                    </h2>
                </div>
                <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 grid-spacer-2">
                    <div class="col">
                        <a href="{% url 'service_detail' 'startup-website' %}" class="card card-service animate-box animated animate__animated text-decoration-none" data-animate="animate__fadeIn" style="display:flex;cursor:pointer;">
                            <div class="icon-circle"><img src="{% static 'images/icon-startup-1.svg' %}"></div>
                            <h3 class="secondary-accent">Startup Website</h3>
                            <p>A professional website or landing page to explain your idea, collect leads and create a strong first impression.</p>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{% url 'service_detail' 'prototype-mvp' %}" class="card card-service animate-box animated animate__animated text-decoration-none" data-animate="animate__fadeIn" style="display:flex;cursor:pointer;">
                            <div class="icon-circle"><img src="{% static 'images/icon-startup-2.svg' %}"></div>
                            <h3 class="secondary-accent">Prototype &amp; MVP</h3>
                            <p>A lean version of your product to demonstrate the concept, test demand and prepare for investors or partners.</p>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{% url 'service_detail' 'web-portal' %}" class="card card-service animate-box animated animate__animated text-decoration-none" data-animate="animate__fadeIn" style="display:flex;cursor:pointer;">
                            <div class="icon-circle"><img src="{% static 'images/icon-startup-3.svg' %}"></div>
                            <h3 class="secondary-accent">Web Portal</h3>
                            <p>A functional portal for clients, users, bookings, registrations, submissions or service requests.</p>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{% url 'service_detail' 'mobile-app-concept' %}" class="card card-service animate-box animated animate__animated text-decoration-none" data-animate="animate__fadeIn" style="display:flex;cursor:pointer;">
                            <div class="icon-circle"><img src="{% static 'images/icon-startup-4.svg' %}"></div>
                            <h3 class="secondary-accent">Mobile App Concept</h3>
                            <p>A presentable app structure, prototype or early build to show how your idea works before full development.</p>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{% url 'service_detail' 'brand-digital-presence' %}" class="card card-service animate-box animated animate__animated text-decoration-none" data-animate="animate__fadeIn" style="display:flex;cursor:pointer;">
                            <div class="icon-circle"><img src="{% static 'images/icon-startup-5.svg' %}"></div>
                            <h3 class="secondary-accent">Brand &amp; Digital Presence</h3>
                            <p>Basic visual direction, website copy and launch materials to help your startup look credible from day one.</p>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{% url 'service_detail' 'technical-consultation' %}" class="card card-service animate-box animated animate__animated text-decoration-none" data-animate="animate__fadeIn" style="display:flex;cursor:pointer;">
                            <div class="icon-circle"><img src="{% static 'images/icon-startup-6.svg' %}"></div>
                            <h3 class="secondary-accent">Technical Consultation</h3>
                            <p>Clear guidance on what to build first, what can wait and how to avoid unnecessary early-stage costs.</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="hero-container">
            <div class="d-flex flex-column gspace-2">
                <div class="sub-heading justify-content-center">
                    <i class="fa-regular fa-circle-dot"></i>
                    <h6 class="font-family-1 accent-color">How it Works</h6>
                </div>
                <h2 class="text-center animate-box animated animate__animated" data-animate="animate__fadeInUp">A Lean Path from Idea to Launch</h2>
                <div class="row row-cols-md-4 row-cols-1 grid-spacer-2">
                    <div class="col">
                        <div class="d-flex flex-column gspace-1">
                            <div class="process-header"><span class="process-number">01</span></div>
                            <div class="card card-process animate-box animated animate__animated" data-animate="animate__fadeInUp">
                                <img src="{% static 'images/icon-startup-7.svg' %}" style="width:5em">
                                <h3 class="secondary-accent">Free Consultation</h3>
                                <p>We discuss your idea, goals, budget and the problem you want to solve.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="d-flex flex-column gspace-1">
                            <div class="process-header"><span class="process-number">02</span></div>
                            <div class="card card-process animate-box animated animate__animated" data-animate="animate__fadeInUp">
                                <img src="{% static 'images/icon-startup-8.svg' %}" style="width:5em">
                                <h3 class="secondary-accent">Technical Direction</h3>
                                <p>We recommend the right digital route, from website to prototype or MVP.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="d-flex flex-column gspace-1">
                            <div class="process-header"><span class="process-number">03</span></div>
                            <div class="card card-process animate-box animated animate__animated" data-animate="animate__fadeInUp">
                                <img src="{% static 'images/icon-startup-9.svg' %}" style="width:5em">
                                <h3 class="secondary-accent">Lean Build Plan</h3>
                                <p>We define what should be built now and what should be left for later.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="d-flex flex-column gspace-1">
                            <div class="process-header"><span class="process-number">04</span></div>
                            <div class="card card-process animate-box animated animate__animated" data-animate="animate__fadeInUp">
                                <img src="{% static 'images/icon-startup-10.svg' %}" style="width:5em">
                                <h3 class="secondary-accent">Build &amp; Present</h3>
                                <p>We create a presentable solution ready for testing or pitching.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section spacious-bottom">
        <div class="hero-container">
            <div class="d-flex flex-column flex-lg-row gap-4">
                <div class="whychooseus-image">
                    <div class="image-container">
                        <img src="{% static 'images/startup.jpg' %}" alt="Startup Solutions" class="img-fluid animate-box animated animate__animated" data-animate="animate__fadeInLeft" />
                    </div>
                    <div class="client-rating-card animate-box animated animate__animated" data-animate="animate__zoomIn">
                        <div class="client-rating-card-content">
                            <span>100%</span>
                            <div class="stars">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                            </div>
                            <h5 class="secondary-accent">Structured Process</h5>
                            <p>A complete roadmap from idea to investment.</p>
                        </div>
                    </div>
                </div>
                <div class="whychooseus-details">
                    <div class="sub-heading">
                        <i class="fa-regular fa-circle-dot"></i>
                        <h6 class="font-family-1 accent-color">From idea to investment</h6>
                    </div>
                    <h2 class="animate-box animated animate__animated" data-animate="animate__fadeInUp">Startup Solution Options</h2>
                    <p>Every startup begins somewhere. Select the solution that fits your current stage and get the tools, assets, and support needed to turn your vision into real progress.</p>
                    <div class="d-flex flex-column gspace-2">
                        <div class="whychooseus-box animate-box animated animated-fast animate__animated" data-animate="animate__fadeInRight">
                            <div class="icon-circle"><img src="{% static 'images/icon-proven.svg' %}"></div>
                            <div class="d-flex flex-column gspace-1">
                                <h4 class="secondary-accent">Launch Page</h4>
                                <p>For founders who need a professional online presence quickly.</p>
                            </div>
                        </div>
                        <div class="whychooseus-box animate-box animated animate__animated" data-animate="animate__fadeInRight">
                            <div class="icon-circle"><img src="{% static 'images/icon-startup-12.svg' %}"></div>
                            <div class="d-flex flex-column gspace-1">
                                <h4 class="secondary-accent">Prototype Build</h4>
                                <p>For startups that need to demonstrate how their idea works.</p>
                            </div>
                        </div>
                        <div class="whychooseus-box animate-box animated animate__animated" data-animate="animate__fadeInRight">
                            <div class="icon-circle"><img src="{% static 'images/icon-startup-13.svg' %}"></div>
                            <div class="d-flex flex-column gspace-1">
                                <h4 class="secondary-accent">MVP Foundation</h4>
                                <p>For founders ready to test the first working version of their platform.</p>
                            </div>
                        </div>
                        <div class="whychooseus-box animate-box animated animated-slow animate__animated" data-animate="animate__fadeInRight">
                            <div class="icon-circle"><img src="{% static 'images/icon-startup-11.svg' %}"></div>
                            <div class="d-flex flex-column gspace-1">
                                <h4 class="secondary-accent">Investor-Ready Pack</h4>
                                <p>For startups preparing to pitch, raise funding or approach strategic partners.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section py-0 animate-box animated animate__animated" data-animate="animate__zoomIn" id="consultation">
        <div class="hero-container">
            <div class="cta-banner">
                <div class="cta-content">
                    <div class="cta-container">
                        <h2 class="secondary-accent">Ready to Shape Your Startup Idea?</h2>
                        <p>Book a free initial consultation and let us help you understand what you need, what can wait and how to build a presentable version of your idea.</p>
                        <div><a href="{% url 'contact' %}" class="btn btn-accent">Start Your Free Consultation</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include "public/includes/logos_strip.html" with logos=global_clients %}

</div>
{% endblock %}