@extends('layoutsweb.app')
@section('content')


<link rel="stylesheet" href="style.css">
{{-- <meta name="viewport" content="width=device-width, intial-scale=1.0"></meta> --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        @media only screen and (max-width: 768px) {

            #edc-orijin-section,
            #edc-carousel-section,
            #edc-terminal-section,
            #edc-orga-section,
            #edc-project-section,
            #go-cashless-section,
            #edc-why-section,
            #edc-eligible-section,
            #edc-app-section,
            #edc-faq-section,
            #edc-commercial-section {
                padding: 20px;
            }
        }

        #edc-orijin-section {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
        url('{{ asset('imgs/canteen.png') }}') no-repeat center center;
        background-size: cover; /* Ensures the image covers the section */
        padding: 100px;
        height: auto;
        background-attachment: scroll;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a light shadow for depth */
        }



        #edc-project-section {
            background: url('{{ asset('imgs/background main page.png') }}') no-repeat center center;
            background-size: cover; 
            height: auto;
            background-attachment: scroll;
        }

        #edc-orga-section {
            background: url('{{ asset('imgs/background main page.png') }}') no-repeat center center;
            background-size: cover;
            padding: 70px;
            height: auto;
            background-attachment: scroll;
        }


            .button-24, .button-25 {
                background: #248bf1;
                border: 1px solid #248bf1;
                border-radius: 6px;
                box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
                box-sizing: border-box;
                color: #FFFFFF;
                cursor: pointer;
                display: inline-block;
                font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
                font-size: 16px;
                font-weight: 800;
                line-height: 16px;
                min-height: 40px;
                outline: 0;
                padding: 12px 14px;
                text-align: center;
                text-rendering: geometricprecision;
                text-transform: none;
                user-select: none;
                -webkit-user-select: none;
                touch-action: manipulation;
                vertical-align: middle;
                }

                .button-24:hover,
                .button-24:active,
                .button-25:hover,
                .button-25:active
                {
                background-color: initial;
                background-position: 0 0;
                color: #000000;
                }

                .button-24:active,
                .button-25:active
                {
                opacity: .5;
                }
        

        #go-cashless-section {
            background: url('{{ asset('imgs/edc-gocashless.png') }}') no-repeat center center;
            padding: 90px;
            min-height: 100vh;
            background-attachment: scroll;
        }

        #edc-terminal-section {
            background: url('{{ asset('imgs/edc-commercial.png') }}') no-repeat center center;
            background-size: cover;
            padding: 70px;
            height: auto;
            background-attachment: scroll;
        }

        #edc-eligible-section {
            background-color: #fff;
            padding: 90px;
            padding-top: 50px;
            padding-bottom: 15px;
            min-height: 90vh;
            background-attachment: scroll;
        }

        #edc-why-section {
            background: url('{{ asset('imgs/edc-why.png') }}') no-repeat center center;
            background-size: cover;
            padding: 70px;
            padding-top: 50px;
            padding-bottom: 25px;
            min-height: 100vh;
            background-attachment: scroll;
        }

        #edc-app-section {
            background: url('{{ asset('imgs/edc-app-bg.png') }}') no-repeat center center;
            background-size: cover;
            padding: 70px;
            padding-top: 5px;
            padding-bottom: 25px;
            max-height: 100vh;
            background-attachment: scroll;
        }

        #edc-commercial-section {
            background: url('{{ asset('imgs/edc-commercial.png') }}') no-repeat center center;
            background-size: cover;
            padding: 70px;
            padding-top: 5px;
            padding-bottom: 25px;
            height: auto;
            background-attachment: scroll;
        }

        #edc-anywhere-section {
            padding: 70px;
            padding-top: 5px;
            padding-bottom: 25px;
            max-height: 100vh;
            background-attachment: scroll;
        }
        #edc-contact-section {
            background: url('{{ asset('imgs/edc-terminal.png') }}') no-repeat center center;
            background-size: cover;
            padding: 70px;
            height: auto;
            background-attachment: scroll;
        }

        #edc-faq-section {
            background-color: #fff ;
            background-size: cover;
            padding: 70px;
            height: auto;
            background-attachment: scroll;
            font-family: nunito, roboto, proxima-nova, "proxima nova", sans-serif;
            color: #fff;
            background-color: #000;
            box-sizing: border-box;
            }

        #edc-pagination-section {
            background-color: #000;
            background-size: cover;
            padding: 70px;
            height: auto;
            background-attachment: scroll;
        }

        .container-logooriijin {
            max-width: 100%;
            padding: 15px;
            box-sizing: border-box;
        }

        .responsive-image {
            max-width: 100%;
            height: auto;
            width: 200px; /* Optional, can be adjusted */
            padding-bottom:10px;
        }

        .description-text {
            font-size: 16px; /* Adjusted for smaller screens */
            color: #fff;
            font-weight: bold;
            margin: 0;
            font-family: 'Nunito', 'Roboto', 'Proxima Nova', sans-serif;
            line-height: 1.5;
            
        }

        /* Media Query for Responsive Design */
        @media (max-width: 768px) {
            .description-text {
                font-size: 14px; /* Smaller font size for mobile screens */
            }

            .responsive-image {
                width: 100%;
                max-width: 300px; /* Ensure it stays within container bounds */
            }
        }

            .footer .footer-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 3.5rem;
            padding: 60px;
            }
            .footer-row .footer-col h4 {
            color: #fff;
            font-size: 1.2rem;
            font-weight: 400;
            }
            .footer-col .links {
            margin-top: 20px;
            }
            .footer-col .links li {
            list-style: none;
            margin-bottom: 10px;
            }
            .footer-col .links li a {
            text-decoration: none;
            color: #bfbfbf;
            }
            .footer-col .links li a:hover {
            color: #fff;
            }
            .footer-col p {
            margin: 20px 0;
            color: #bfbfbf;
            max-width: 300px;
            }
            .footer-col form {
            display: flex;
            gap: 5px;
            }
            .footer-col input {
            height: 40px;
            border-radius: 6px;
            background: none;
            width: 100%;
            outline: none;
            border: 1px solid #7489C6 ;
            caret-color: #fff;
            color: #fff;
            padding-left: 10px;
            }
            .footer-col input::placeholder {
            color: #ccc;
            }
            .footer-col form button {
            background: #fff;
            outline: none;
            border: none;
            padding: 10px 15px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: 0.2s ease;
            }
            .footer-col form button:hover {
            background: #cecccc;
            }
            .footer-col .icons {
            display: flex;
            margin-top: 30px;
            gap: 30px;
            cursor: pointer;
            }
            .footer-col .icons i {
            color: #afb6c7;
            }
            .footer-col .icons i:hover  {
            color: #fff;
            }
            @media (max-width: 768px) {
            .footer {
                position: relative;
                bottom: 0;
                left: 0;
                transform: none;
                width: 100%;
                border-radius: 0;
            }
            .footer .footer-row {
                padding: 20px;
                gap: 1rem;
            }
            .footer-col form {
                display: block;
            }
            .footer-col form :where(input, button) {
                width: 100%;
            }
            .footer-col form button {
                margin: 10px 0 0 0;
            }
            }

            .title-faq{
                font-size: 50px;
                text-align: center;
                margin-top: 80px;
                margin-bottom: 40px;
                text-decoration: underline 4px;
                color: #fff
            }

            .questions-container{
                max-width: 800px;
                margin: 0 auto;
            }

            .question{
                border-bottom: 1px solid #fff;
            }
            .question button{
                width: 100%;
                background-color: #000;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 15px;
                border:none;
                outline: none;
                font-size: 22px;
                color: #fff;
                font-weight: 700;
                cursor: pointer;
                border-radius:100px;
            }
            .question p{
                font-size: 22px;
                max-height: 0;
                opacity: 0;
                line-height: 1.5;
                overflow: hidden;
                transition: all 0.6s ease;
            }
            .d-arrow{
                transition: transform 0.5s ease-in ;
                color: #fff;
            }

            /*add this class when click*/
            .question p.show{
                max-height: 200px; 
                opacity: 1;
                padding:0px 15px 30px 15px;
            }
            .question button .d-arrow.rotate{
                transform: rotate(180deg) ;
            }

            .container-logooriijin1 {
                display: flex;
                flex-wrap: nowrap; /* Ensure content stays in a single row */
                gap: 20px; /* Add spacing between the image and text */
                padding: 20px;
                font-family: nunito, roboto, proxima-nova, "proxima nova", sans-serif;
            }
            .responsive-image1 {
                background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), ;
                max-width: 100%; /* Make the image responsive */
                height: auto;
            }
            .logoorijin1 {
                margin-top:50px;
                max-width: 100%; /* Limit the text width */
            }
            .logoorijin2 {
                margin-top:100px;
                max-width: 100%; /* Limit the text width */
                align-items: center; /* Center text vertically */
                justify-content: center; /* Center text horizontally */
                text-align: center; /* Align text inside the element */
            }
            .description-text1 {
                font-size: 60px;
                color: #333;
                line-height: 1.5;
                color:#fff;
                display: flex;
                align-items: center; /* Center text vertically */
                justify-content: center; /* Center text horizontally */
                text-align: center; /* Align text inside the element */
            }
            .description-text2 {
                font-size: 35px;
                color: #333;
                line-height: 1.5;
                color:#fff;
                display: flex;
                align-items: center; /* Center text vertically */
                justify-content: center; /* Center text horizontally */
                text-align: center; /* Align text inside the element */
            }
            .description-text3 {
                font-size: 35px;
                color: #333;
                line-height: 1.5;
                color:#fff;
                padding-top:20px;
                display: flex;
                align-items: center; /* Center text vertically */
                justify-content: center; /* Center text horizontally */
                text-align: center; /* Align text inside the element */
                padding: 20px;
            }
            .responsive-image1 {
                max-width: 100%; /* Make the image responsive */
                height: auto;
            }
            .responsive-button1 {
                background: url('{{ asset('imgs/daftar.png') }}') no-repeat center center;
                background-size: contain;
                border: none;
                width: 500px; /* Set button width */
                height: 500px; /* Set button height */
                cursor: pointer;
            }



                .button-26 {
                background: #248bf1;
                border: 1px solid #248bf1;
                border-radius: 6px;
                box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
                box-sizing: border-box;
                color: #FFFFFF;
                cursor: pointer;
                display: inline-block;
                font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
                font-size: 16px;
                font-weight: 800;
                line-height: 50px;
                min-height: 40px;
                outline: 0;
                padding: 12px 14px;
                text-align: center;
                text-rendering: geometricprecision;
                text-transform: none;
                user-select: none;
                -webkit-user-select: none;
                touch-action: manipulation;
                vertical-align: middle;
                width:50%;
                }

                .button-26:hover,
                .button-26:active
                {
                background-color: initial;
                background-position: 0 0;
                color: #000000;
                }

                .button-26:active
                {
                opacity: .5;
                }

                .logoorijin5{
                    display: flex;
                    align-items: center; /* Center text vertically */
                    justify-content: center; /* Center text horizontally */
                    text-align: center; /* Align text inside the element */
                }

    </style>

  
    <section id="edc-orijin-section">
         <div class="container-logooriijin d-flex flex-column justify-content-center align-items-center text-center">
            <div class="mb-1">
                <img src="{{ asset('imgs/origin_school.png') }}" alt="orijin wallet" class="responsive-image" />
            </div>
            <div class="col-6">
                <div class="logoorijin pb-2">
                    <p class="description-text">
                        Satu aplikasi atau platform digital yang membolehkan murid menyimpan dan mengurus wang secara elektronik. Ia berfungsi seperti dompet biasa.
                    </p>
                </div>
            </div>
    </section>


    <section id="edc-project-section">
        <!-- Container for Image and Text -->
        <div class="container-logooriijin1">
            <!-- Left: Image -->
            <div class="mb-1">
                <img src="{{ asset('imgs/school-12.png') }}" alt="Orijin Wallet" class="responsive-image1" />
            </div>
            <!-- Right: Text -->
            <div class="col-6">
                <div class="logoorijin1 pb-2">
                    <p class="description-text1">
                        <b>Sekolah Tanpa Tunai</b>
                    </p>
                    <p class="description-text2">
                        Program tanpa tunai di sekolah untuk memupuk sifat celik kewangan dalam kalangan pelajar
                    </p>
                </div>
            </div>
        </div>
    
        <!-- Registration Section -->
        <div class="container-logooriijin1">
            <div class="logoorijin2 pb-2">
                <p class="description-text3" style="font-size: 50px; font-weight: bold;">
                    <b>Daftar Sekarang</b>
                </p>
                <p class="description-text3" style="font-size: 40px;">
                    Adakah anda berminat untuk menyertai program ini.
                </p>
                <button class="button-26" role="button" onclick="window.location.href='{{ route('register') }}'">
                    Klik disini jika anda ingin mendaftar
                </button>
            </div>
            <div class="col-md-5">
                <button class="responsive-button1" 
                    onclick="window.location.href='{{ route('register') }}'">
                </button>
            </div>
        </div>
    
        <!-- Carousel Section -->
        {{-- <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <!-- First Carousel Item -->
                <div class="carousel-item active">
                    <div class="card" style="width: 18rem;">
                        <img src="..." class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <!-- Additional Carousel Items -->
                <div class="carousel-item">
                    <div class="card" style="width: 18rem;">
                        <img src="..." class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <!-- Repeat for Additional Items as Needed -->
            </div>
            <!-- Carousel Controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div> --}}
    </section>    

    <section id="edc-contact-section">
        <div class="container-fluid pt-5">
            <div class="row">
                <div class="col-md-8 col-12">
                    {{-- whatsapp url tbc --}}
                    <a href="{{ url('https://wa.link/1zrxom')}}">
                    
                    </a>
                </div>
                <div class="col-md-4 col-12  p-3 p-md-5 mt-5 card d-flex flex-column justify-content-start text-right"
                    style="background-color:#fff; border-radius: 30px;">
                    <div class="row">
                        <div class="col-12 text-left">
                            <p style="font-size: 22px; font-weight: bold; margin: 0; color: #aaaaaa">Alamat</p>
                            <p style="font-size: 18px; font-weight: bold; margin: 0;">CPRO SOLUTIONS SDN BHD</p>
                            <p style="font-size: 16px; margin: 0;">P-1-8, Plaza Damas<br>
                                Jalan Sri Hartamas 1<br>
                                Taman Sri Hartamas<br>
                                50480 Kuala Lumpur. MALAYSIA
                            </p><br>
                            <p style="font-size: 16px; margin: 0;">F-3-4, Plaza Damas<br>
                                Jalan Sri Hartamas 1<br>
                                Taman Sri Hartamas<br>
                                50480 Kuala Lumpur. MALAYSIA
                            </p><br>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-left">
                            <p style="font-size: 22px; font-weight: bold; margin: 0; color: #aaaaaa">Phone Number</p>
                            <p style="font-size: 16px; margin: 0;">+603 62118831</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-left">
                            <p style="font-size: 22px; font-weight: bold; margin: 0; color: #aaaaaa">Email Address</p>
                            <p style="font-size: 16px; margin: 0;">enquiry@cprosolutions.com.my
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection