@extends('layouts.app')
@section('content')
    @include('partials.navbar')
    @include('articles.partials.home-css')
    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <div class="about-hero">
        <div class="hero-inner text-center">
            <h1 class="hero-title">
                {{ $about->hero_title ?? 'About AfricaTechInsights' }}
            </h1>
            <p class="hero-sub">
                {!! $about->hero_description !!}
            </p>
        </div>
    </div>


    <div class="container about-content mb-4">

        <!-- FEATURES -->

        <div class="row text-center g-4 mb-5">

            <div class="col-md-3">
                <div class="feature-card">
                    <i class="fas fa-newspaper"></i>
                    <h5
                        style="color: #eee;
                              text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
                          ">
                        Tech News</h5>
                    <p>Breaking stories shaping Africa's digital economy.</p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="feature-card">
                    <i class="fas fa-rocket"></i>
                    <h5 style="color: #eee;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black">Startups</h5>
                    <p>Innovative founders building Africa’s next unicorns.</p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="feature-card">
                    <i class="fas fa-chart-line"></i>
                    <h5 style="color: #eee;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black">Funding</h5>
                    <p>Track venture capital, investments, and startup exits.</p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="feature-card">
                    <i class="fas fa-calendar"></i>
                    <h5 style="color: #eee;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; ">Tech Events
                    </h5>
                    <p>Major innovation conferences across the continent.</p>
                </div>
            </div>
        </div>
        <!-- MISSION / VISION -->
        <div class="row g-5">

            <div class="col-md-6">
                <div class="mission-box">
                    <h3 style="color: #10df13">Our Mission</h3>
                    <p class="poa">
                        {!! $about->mission !!}
                    </p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="vision-box">
                    <h3 style="color:#10df13">Our Vision</h3>
                    <p class="poa">
                        {!! $about->vision !!}
                    </p>
                </div>
            </div>
            <br>

            <div class="about-description shadow-sm bg-light poa mt-4">

                {!! $about->description !!}
                {{-- <a href="{{ route('contact') }}">

                    <span>Contact Us</span>
                </a> --}}

                <button class="button-seven"> <a href="{{ route('contact') }}">

                        <span style="color:#0f172a">Contact Us</span>
                    </a></button>
                <style>
                    .button-seven {
                        background-color: white;
                        color: #6c757d;
                        border: 2px dashed #6c757d;

                    }

                    .button-seven a {
                        text-decoration: none !important;
                    }

                    .button-seven:hover {
                        background-color: #007BFF;
                        color: white !important;
                    }

                    .button-seven:hover span {
                       
                        color: white !important;
                    }

                    .button-seven {
                        padding: 15px 25px;

                        cursor: pointer;
                        font-family: 'Arial', sans-serif;
                        text-transform: uppercase;
                        font-size: 16px;
                        transition: all 0.3s ease;
                        /* Smooth transition for hover effects */
                    }
                </style>
            </div>
        </div>
    </div>
    <br>
    <br>
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        /* HERO */
        .about-hero {
            background: linear-gradient(135deg, #0f172a, #1e293b, #334155);
            color: white;
            padding: 150px 20px 130px;
            position: relative;
            overflow: hidden;
            border-top: 4px dotted #10df13;
            border-right: 12px solid #10df13;
            border-bottom: 12px solid #a2147c;
            border-left: 12px solid #10df13;
        }

        .about-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 60px 60px;
        }

        .hero-inner {
            position: relative;
            z-index: 2;
        }

        .hero-title {
            font-family: 'Anton', sans-serif;
            font-size: 120px;
            letter-spacing: -2px;
            line-height: 0.95;
            margin-bottom: 30px;
            color: #10df13;

        }

        .hero-sub {

            font-size: 18px;
            max-width: 750px;
            margin: auto;
            line-height: 1.8;
            color: #cbd5e1;

        }


        /* CONTENT */

        .about-content {
            margin-top: -70px;
        }


        /* FEATURE CARDS */

        .feature-card {

            background: white;
            padding: 40px 30px;
            border-radius: 1px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
            transition: all .35s ease;
            position: relative;
            overflow: hidden;

        }

        .feature-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #0d6efd, #0dcaf0);

        }

        .feature-card i {
            font-size: 36px;
            color: #ab179e;
            margin-bottom: 18px;


        }

        .feature-card h5 {
            font-weight: 600;
            margin-bottom: 10px;
        }

        .feature-card p {
            font-size: 14px;
            color: #666;
        }

        .feature-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);

        }


        /* MISSION / VISION */

        .mission-box,
        .vision-box {

            padding: 50px;

            border-radius: 16px;

            background: white;

            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

            position: relative;

        }

        .mission-box::before {

            content: "MISSION";

            position: absolute;

            top: 20px;

            right: 20px;

            font-size: 12px;

            font-weight: 600;

            color: #0d6efd;

            letter-spacing: 1px;

        }

        .vision-box::before {

            content: "VISION";

            position: absolute;

            top: 20px;

            right: 20px;

            font-size: 12px;

            font-weight: 600;

            color: #20c997;

            letter-spacing: 1px;

        }

        .mission-box h3,
        .vision-box h3 {
            margin-bottom: 20px;
        }

        .hero-title {
            text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
        }

        .about-description {
            max-width: 1000px !important;
            margin: 0 auto;
            margin-top: 2rem !important;
            font-size: 14px;
            line-height: 1.2;
            color: #222;
        }

        .about-description {

            background: white;
            padding: 40px 30px;
            border-radius: 1px;

            transition: all .35s ease;
            position: relative;
            overflow: hidden;

        }
    </style>
@endsection