@extends('front.layout')

@section('css')
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <style>
        .bg2 {
            background: #fbfbfb;
        }

        @import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
        @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        .slider {
            height: 100%;
            position: relative;
            overflow: hidden;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: row nowrap;
            -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
            -webkit-box-align: end;
            -webkit-align-items: flex-end;
            -ms-flex-align: end;
            align-items: flex-end;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .slider__nav {
            width: 12px;
            height: 12px;
            margin: 2rem 12px;
            border-radius: 50%;
            z-index: 10;
            outline: 6px solid #ccc;
            outline-offset: -6px;
            box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .slider__nav:checked {
            -webkit-animation: check 0.4s linear forwards;
            animation: check 0.4s linear forwards;
        }

        .slider__nav:checked:nth-of-type(1)~.slider__inner {
            left: 0%;
        }

        .slider__nav:checked:nth-of-type(2)~.slider__inner {
            left: -100%;
        }

        .slider__nav:checked:nth-of-type(3)~.slider__inner {
            left: -200%;
        }

        .slider__nav:checked:nth-of-type(4)~.slider__inner {
            left: -300%;
        }

        .slider__inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 400%;
            height: 100%;
            -webkit-transition: left 0.4s;
            transition: left 0.4s;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: row nowrap;
            -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
        }

        .slider__contents {
            height: 100%;
            padding: 2rem;
            text-align: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-flex-flow: column nowrap;
            -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .slider__image {
            font-size: 2.7rem;
            color: #2196F3;
        }

        .slider__caption {
            font-weight: 500;
            margin: 2rem 0 1rem;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            text-transform: uppercase;
        }

        .slider__txt {
            color: #999;
            margin-bottom: 3rem;
            max-width: 300px;
        }

        @-webkit-keyframes check {
            50% {
                outline-color: #333;
                box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
            }

            100% {
                outline-color: #333;
                box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
            }
        }

        @keyframes check {
            50% {
                outline-color: #333;
                box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
            }

            100% {
                outline-color: #333;
                box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
            }
        }


        .simple {
            position: relative;
        }

        .simple::after {
            content: '';
            width: 45%;
            height: 2px;
            background-color: #ddd;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }

        .simple::before {
            content: '';
            width: 45%;
            height: 2px;
            background-color: #ddd;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        @media (max-width: 700px) {
            .simple::after {
                width: 40%;
            }

            .simple::before {
                width: 40%;
            }

            .sm-center {
                text-align: center !important;
            }
        }

        @media (max-width: 440px) {
            .simple::after {
                width: 35%;
            }

            .simple::before {
                width: 35%;
            }
        }
    </style>
@endsection

@section('content')
    {{-- Header --}}
    <header class="py-5 my-5" id="home">
        <div class="container-fluid">
            <div class="row">
                {{-- Image --}}
                <div class="col-md-6 mb-3" data-aos="fade-up" data-aos-duration="1500">
                    <img src="{{ asset('assets/images/header.png') }}" class="img-fluid" alt="">
                </div>

                {{-- Text --}}
                <div class="col-md-6 mb-3 dir sm-center" data-aos="fade-down" data-aos-duration="1500"
                    style="color: rgb(0, 0, 0);display: flex;flex-direction: column;justify-content: center;">
                    <p class="text-primary fw-bold">
                        {{ __('f17') }}
                    </p>
                    <h2 class="fw-bold mb-4">
                    {{ __('f18') }}
                    </h2>
                    <p class="fw-bold mb-1">
                    {{ __('f19') }}
                    </p>
                    <p class="fw-bold mb-1">
                    {{ __('f20') }}
                    </p>

                    <div class="mt-3">
                        @auth
                            <a href="{{ route('dashboard') }}" class="btn btn-primary fw-bold rounded-pill px-4 py-2"
                                style="font-size: 14px">{{ __('f21') }}</a>
                        @else
                            <a href="{{ route('front.register') }}" class="btn btn-primary fw-bold rounded-pill px-4 py-2"
                                style="font-size: 14px">{{ __('f22') }}</a>
                        @endauth
                        <a href="#about" class="main-color-remain btn btn-outline-primary fw-bold rounded-pill px-4 py-2"
                            style="font-size: 14px">{{ __('f23') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    {{-- /Header --}}

    {{-- About --}}
    <section class="py-5 my-5 bg2" id="about">
        <div class="container-fluid py-5">
            <div class="row">
                {{-- Text --}}
                <div class="col-md-6 mb-3 dir sm-center" data-aos="fade-up" data-aos-duration="1500"
                    style="color: rgb(0, 0, 0);display: flex;flex-direction: column;justify-content: center;">
                    <h2 class="fw-bold mb-4">{{ __('f24') }}</h2>

                    <p class="mb-2 fw-bold">
                    {{ __('f25') }}
                    </p>
                    <p class="mb-2 fw-bold">
                    {{ __('f26') }} 
                    </p>
                    <p class="mb-2 fw-bold">
                    {{ __('f27') }}
                    </p>
                </div>

                {{-- Image --}}
                <div class="col-md-6 mb-3" data-aos="fade-down" data-aos-duration="1500">
                    <img src="{{ asset('assets/images/about.png') }}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>
    {{-- About --}}

    {{-- Features --}}
    <section class="py-5">
        <div class="container py-5">
            <h1 class="fw-bold mb-4 text-center" data-aos="zoom-in" data-aos-duration="1500">
            {{ __('f28') }}
            </h1>

            <div class="row dir">
                <div class="col-md-6 mb-3 dir text-center" data-aos="fade-up" data-aos-duration="1500">
                    <div style="position: relative;">
                        <svg style="display: inline-block;width: 100px;" viewBox="0 0 200 200"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill="#0d6efd"
                                d="M32.4,-57.1C41.6,-50.9,48.4,-41.4,54.2,-31.3C59.9,-21.2,64.7,-10.6,66,0.7C67.3,12.1,65,24.2,61,37.2C56.9,50.2,50.9,64.1,40.5,73.5C30,83,15,88,1.2,85.9C-12.6,83.8,-25.2,74.6,-37.5,66.3C-49.9,57.9,-61.9,50.3,-68.6,39.4C-75.4,28.5,-76.8,14.2,-73.6,1.9C-70.4,-10.5,-62.5,-21.1,-55.3,-31C-48,-41,-41.3,-50.5,-32.2,-56.8C-23.1,-63,-11.5,-66.1,0,-66.1C11.6,-66.2,23.2,-63.3,32.4,-57.1Z"
                                transform="translate(100 100)" />
                        </svg>
                        <i style="position: absolute;top: 40px;left: 50%;transform: translateX(-50%);font-size: 30px;color: #fff;"
                            class="fa-solid fa-shield old-white"></i>
                        <h4 class="fw-bold">
                        {{ __('f29') }}
                        </h4>

                        <p class="fw-bold w-75 mx-auto">
                        {{ __('f30') }}
                        </p>
                    </div>
                </div>

                <div class="col-md-6 mb-3 dir text-center" data-aos="fade-up" data-aos-duration="1500">
                    <div style="position: relative;">
                        <svg style="display: inline-block;width: 100px;" viewBox="0 0 200 200"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill="#0d6efd"
                                d="M32.4,-57.1C41.6,-50.9,48.4,-41.4,54.2,-31.3C59.9,-21.2,64.7,-10.6,66,0.7C67.3,12.1,65,24.2,61,37.2C56.9,50.2,50.9,64.1,40.5,73.5C30,83,15,88,1.2,85.9C-12.6,83.8,-25.2,74.6,-37.5,66.3C-49.9,57.9,-61.9,50.3,-68.6,39.4C-75.4,28.5,-76.8,14.2,-73.6,1.9C-70.4,-10.5,-62.5,-21.1,-55.3,-31C-48,-41,-41.3,-50.5,-32.2,-56.8C-23.1,-63,-11.5,-66.1,0,-66.1C11.6,-66.2,23.2,-63.3,32.4,-57.1Z"
                                transform="translate(100 100)" />
                        </svg>
                        <i style="position: absolute;top: 40px;left: 50%;transform: translateX(-50%);font-size: 30px;color: #fff;"
                            class="fa-solid fa-heart old-white"></i>
                        <h4 class="fw-bold">
                        {{ __('f31') }}
                        </h4>

                        <p class="fw-bold w-75 mx-auto">
                        {{ __('f32') }}
                        </p>
                    </div>
                </div>

                <div class="col-md-6 mb-3 dir text-center" data-aos="fade-up" data-aos-duration="1500">
                    <div style="position: relative;">
                        <svg style="display: inline-block;width: 100px;" viewBox="0 0 200 200"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill="#0d6efd"
                                d="M32.4,-57.1C41.6,-50.9,48.4,-41.4,54.2,-31.3C59.9,-21.2,64.7,-10.6,66,0.7C67.3,12.1,65,24.2,61,37.2C56.9,50.2,50.9,64.1,40.5,73.5C30,83,15,88,1.2,85.9C-12.6,83.8,-25.2,74.6,-37.5,66.3C-49.9,57.9,-61.9,50.3,-68.6,39.4C-75.4,28.5,-76.8,14.2,-73.6,1.9C-70.4,-10.5,-62.5,-21.1,-55.3,-31C-48,-41,-41.3,-50.5,-32.2,-56.8C-23.1,-63,-11.5,-66.1,0,-66.1C11.6,-66.2,23.2,-63.3,32.4,-57.1Z"
                                transform="translate(100 100)" />
                        </svg>
                        <i style="position: absolute;top: 40px;left: 50%;transform: translateX(-50%);font-size: 30px;color: #fff;"
                            class="fa-solid fa-user-plus old-white"></i>
                        <h4 class="fw-bold">
                        {{ __('f33') }}
                        </h4>

                        <p class="fw-bold w-75 mx-auto">
                        {{ __('f34') }}
                        </p>
                    </div>
                </div>

                <div class="col-md-6 mb-3 dir text-center" data-aos="fade-up" data-aos-duration="1500">
                    <div style="position: relative;">
                        <svg style="display: inline-block;width: 100px;" viewBox="0 0 200 200"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill="#0d6efd"
                                d="M32.4,-57.1C41.6,-50.9,48.4,-41.4,54.2,-31.3C59.9,-21.2,64.7,-10.6,66,0.7C67.3,12.1,65,24.2,61,37.2C56.9,50.2,50.9,64.1,40.5,73.5C30,83,15,88,1.2,85.9C-12.6,83.8,-25.2,74.6,-37.5,66.3C-49.9,57.9,-61.9,50.3,-68.6,39.4C-75.4,28.5,-76.8,14.2,-73.6,1.9C-70.4,-10.5,-62.5,-21.1,-55.3,-31C-48,-41,-41.3,-50.5,-32.2,-56.8C-23.1,-63,-11.5,-66.1,0,-66.1C11.6,-66.2,23.2,-63.3,32.4,-57.1Z"
                                transform="translate(100 100)" />
                        </svg>
                        <i style="position: absolute;top: 40px;left: 50%;transform: translateX(-50%);font-size: 30px;color: #fff;"
                            class="fa-solid fa-thumbtack old-white"></i>
                        <h4 class="fw-bold">
                        {{ __('f35') }}
                        </h4>

                        <p class="fw-bold w-75 mx-auto">
                        {{ __('f36') }}
                        </p>
                    </div>
                </div>

                <div class="col-md-6 mb-3 dir text-center" data-aos="fade-up" data-aos-duration="1500">
                    <div style="position: relative;">
                        <svg style="display: inline-block;width: 100px;" viewBox="0 0 200 200"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill="#0d6efd"
                                d="M32.4,-57.1C41.6,-50.9,48.4,-41.4,54.2,-31.3C59.9,-21.2,64.7,-10.6,66,0.7C67.3,12.1,65,24.2,61,37.2C56.9,50.2,50.9,64.1,40.5,73.5C30,83,15,88,1.2,85.9C-12.6,83.8,-25.2,74.6,-37.5,66.3C-49.9,57.9,-61.9,50.3,-68.6,39.4C-75.4,28.5,-76.8,14.2,-73.6,1.9C-70.4,-10.5,-62.5,-21.1,-55.3,-31C-48,-41,-41.3,-50.5,-32.2,-56.8C-23.1,-63,-11.5,-66.1,0,-66.1C11.6,-66.2,23.2,-63.3,32.4,-57.1Z"
                                transform="translate(100 100)" />
                        </svg>
                        <i style="position: absolute;top: 40px;left: 50%;transform: translateX(-50%);font-size: 30px;color: #fff;"
                            class="fa-solid fa-money-bill-transfer old-white"></i>
                        <h4 class="fw-bold">
                        {{ __('f37') }}
                        </h4>

                        <p class="fw-bold w-75 mx-auto">
                        {{ __('f38') }}
                        </p>
                    </div>
                </div>

                <div class="col-md-6 mb-3 dir text-center" data-aos="fade-up" data-aos-duration="1500">
                    <div style="position: relative;">
                        <svg style="display: inline-block;width: 100px;" viewBox="0 0 200 200"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill="#0d6efd"
                                d="M32.4,-57.1C41.6,-50.9,48.4,-41.4,54.2,-31.3C59.9,-21.2,64.7,-10.6,66,0.7C67.3,12.1,65,24.2,61,37.2C56.9,50.2,50.9,64.1,40.5,73.5C30,83,15,88,1.2,85.9C-12.6,83.8,-25.2,74.6,-37.5,66.3C-49.9,57.9,-61.9,50.3,-68.6,39.4C-75.4,28.5,-76.8,14.2,-73.6,1.9C-70.4,-10.5,-62.5,-21.1,-55.3,-31C-48,-41,-41.3,-50.5,-32.2,-56.8C-23.1,-63,-11.5,-66.1,0,-66.1C11.6,-66.2,23.2,-63.3,32.4,-57.1Z"
                                transform="translate(100 100)" />
                        </svg>
                        <i style="position: absolute;top: 40px;left: 50%;transform: translateX(-50%);font-size: 30px;color: #fff;"
                            class="fa-solid fa-headset old-white"></i>
                        <h4 class="fw-bold">
                        {{ __('f39') }}
                        </h4>

                        <p class="fw-bold w-75 mx-auto">
                        {{ __('f40') }}
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </section>
    {{-- Features --}}

    {{-- How To Win --}}
    <section class="py-5 dir bg2" id="how-to-win">
        <div class="container-fluid py-5">

            <h1 class="fw-bold mb-4 text-center" data-aos="zoom-in" data-aos-duration="1500">
            {{ __('f41') }}
            </h1>

            <p class="fw-bold text-center fs-6 simple" data-aos="zoom-in" data-aos-duration="1600">
            {{ __('f42') }}
            </p>

            <div class="row mt-5">

                <div class="col-md-4 mb-3 text-center" data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="100">
                    <div class="p-2">
                        <img width="90px" src="{{ asset('assets/images/step1.png') }}" alt="">
                        <p class="fw-bold mt-2">
                        {{ __('f43') }}
                        </p>
                    </div>
                </div>

                <div class="col-md-4 mb-3 text-center" data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="500">
                    <div class="p-2">
                        <img width="90px" src="{{ asset('assets/images/step2.png') }}" alt="">
                        <p class="fw-bold mt-2">
                        {{ __('f44') }}
                        </p>
                    </div>
                </div>

                <div class="col-md-4 mb-3 text-center" data-aos="zoom-in" data-aos-duration="1500"
                    data-aos-delay="1000">
                    <div class="p-2">
                        <img width="90px" src="{{ asset('assets/images/step3.png') }}" alt="">
                        <p class="fw-bold mt-2">
                        {{ __('f45') }}
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </section>
    {{-- How To Win --}}

    @if (count($faqs) > 0)
        {{-- Accordion --}}
        <section class="py-5" id="faq">
            <div class="container-fluid py-5">
                <h1 class="fw-bold text-center mb-3" data-aos="zoom-in" data-aos-duration="1500">
                {{ __('f46') }}
                </h1>

                <div class="accordion dir mt-5" id="accordionExample">
                    <div class="row">
                        @foreach ($faqs as $faq)
                            <div class="col-md-6 mb-3" data-aos="zoom-in" data-aos-duration="1500">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading{{ $faq->id }}">
                                        <button class="accordion-button collapsed " type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse{{ $faq->id }}" aria-expanded="" aria-controls="collapseOne">
                                            {{ $faq->title1 }}
                                        </button>
                                    </h2>
                                    <div id="collapse{{ $faq->id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $faq->id }}"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            {{ $faq->text1 }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>

                </div>
            </div>
        </section>
        {{-- Accordion --}}
    @endif

    @if ($feeds > 0)
        {{-- Testimonails --}}
        <section class="py-5 bg2" id="testimonials">
            <div class="container-fluid py-5">

                <h1 class="fw-bold text-center mb-3" data-aos="zoom-in" data-aos-duration="1500">
                {{ __('f47') }}
                </h1>

                <div class="slider" style="height: 50vh;">
                    <input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav" />
                    <input type="radio" name="slider" title="slide2" class="slider__nav" />
                    <input type="radio" name="slider" title="slide3" class="slider__nav" />
                    <input type="radio" name="slider" title="slide4" class="slider__nav" />
                    <div class="slider__inner">

                        {{-- 1 --}}
                        @if ($feed1[0]->stars == 1)
                            <div class="slider__contents">
                                <svg class="rating-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M328.4 428a92.8 92.8 0 0 0-145-.1 6.8 6.8 0 0 1-12-5.8 86.6 86.6 0 0 1 84.5-69 86.6 86.6 0 0 1 84.7 69.8c1.3 6.9-7.7 10.6-12.2 5.1z"
                                        fill="#3e4347" />
                                    <path
                                        d="M269.2 222.3c5.3 62.8 52 113.9 104.8 113.9 52.3 0 90.8-51.1 85.6-113.9-2-25-10.8-47.9-23.7-66.7-4.1-6.1-12.2-8-18.5-4.2a111.8 111.8 0 0 1-60.1 16.2c-22.8 0-42.1-5.6-57.8-14.8-6.8-4-15.4-1.5-18.9 5.4-9 18.2-13.2 40.3-11.4 64.1z"
                                        fill="#f4c534" />
                                    <path
                                        d="M357 189.5c25.8 0 47-7.1 63.7-18.7 10 14.6 17 32.1 18.7 51.6 4 49.6-26.1 89.7-67.5 89.7-41.6 0-78.4-40.1-82.5-89.7A95 95 0 0 1 298 174c16 9.7 35.6 15.5 59 15.5z"
                                        fill="#fff" />
                                    <path
                                        d="M396.2 246.1a38.5 38.5 0 0 1-38.7 38.6 38.5 38.5 0 0 1-38.6-38.6 38.6 38.6 0 1 1 77.3 0z"
                                        fill="#3e4347" />
                                    <path
                                        d="M380.4 241.1c-3.2 3.2-9.9 1.7-14.9-3.2-4.8-4.8-6.2-11.5-3-14.7 3.3-3.4 10-2 14.9 2.9 4.9 5 6.4 11.7 3 15z"
                                        fill="#fff" />
                                    <path
                                        d="M242.8 222.3c-5.3 62.8-52 113.9-104.8 113.9-52.3 0-90.8-51.1-85.6-113.9 2-25 10.8-47.9 23.7-66.7 4.1-6.1 12.2-8 18.5-4.2 16.2 10.1 36.2 16.2 60.1 16.2 22.8 0 42.1-5.6 57.8-14.8 6.8-4 15.4-1.5 18.9 5.4 9 18.2 13.2 40.3 11.4 64.1z"
                                        fill="#f4c534" />
                                    <path
                                        d="M155 189.5c-25.8 0-47-7.1-63.7-18.7-10 14.6-17 32.1-18.7 51.6-4 49.6 26.1 89.7 67.5 89.7 41.6 0 78.4-40.1 82.5-89.7A95 95 0 0 0 214 174c-16 9.7-35.6 15.5-59 15.5z"
                                        fill="#fff" />
                                    <path
                                        d="M115.8 246.1a38.5 38.5 0 0 0 38.7 38.6 38.5 38.5 0 0 0 38.6-38.6 38.6 38.6 0 1 0-77.3 0z"
                                        fill="#3e4347" />
                                    <path
                                        d="M131.6 241.1c3.2 3.2 9.9 1.7 14.9-3.2 4.8-4.8 6.2-11.5 3-14.7-3.3-3.4-10-2-14.9 2.9-4.9 5-6.4 11.7-3 15z"
                                        fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed1[0]->stars == 2)
                            <div class="slider__contents">
                                <svg class="rating-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M336.6 403.2c-6.5 8-16 10-25.5 5.2a117.6 117.6 0 0 0-110.2 0c-9.4 4.9-19 3.3-25.6-4.6-6.5-7.7-4.7-21.1 8.4-28 45.1-24 99.5-24 144.6 0 13 7 14.8 19.7 8.3 27.4z"
                                        fill="#3e4347" />
                                    <path d="M276.6 244.3a79.3 79.3 0 1 1 158.8 0 79.5 79.5 0 1 1-158.8 0z"
                                        fill="#fff" />
                                    <circle cx="340" cy="260.4" r="36.2" fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="rotate(-135 326.4 246.6)" cx="326.4" cy="246.6"
                                            rx="6.5" ry="10" />
                                        <path d="M231.9 244.3a79.3 79.3 0 1 0-158.8 0 79.5 79.5 0 1 0 158.8 0z" />
                                    </g>
                                    <circle cx="168.5" cy="260.4" r="36.2" fill="#3e4347" />
                                    <ellipse transform="rotate(-135 182.1 246.7)" cx="182.1" cy="246.7"
                                        rx="10" ry="6.5" fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed1[0]->stars == 3)
                            <div class="slider__contents">
                                <svg class="rating-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M407.7 352.8a163.9 163.9 0 0 1-303.5 0c-2.3-5.5 1.5-12 7.5-13.2a780.8 780.8 0 0 1 288.4 0c6 1.2 9.9 7.7 7.6 13.2z"
                                        fill="#3e4347" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <g fill="#fff">
                                        <path
                                            d="M115.3 339c18.2 29.6 75.1 32.8 143.1 32.8 67.1 0 124.2-3.2 143.2-31.6l-1.5-.6a780.6 780.6 0 0 0-284.8-.6z" />
                                        <ellipse cx="356.4" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="356.4" cy="205.3" rx="44.2" ry="44.2"
                                        fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="scale(-1) rotate(45 454 -906)" cx="375.3" cy="188.1"
                                            rx="12" ry="8.1" />
                                        <ellipse cx="155.6" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="155.6" cy="205.3" rx="44.2" ry="44.2"
                                        fill="#3e4347" />
                                    <ellipse transform="scale(-1) rotate(45 454 -421.3)" cx="174.5" cy="188"
                                        rx="12" ry="8.1" fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed1[0]->stars == 4)
                            <div class="slider__contents">
                                <svg class="rating-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M232.3 201.3c0 49.2-74.3 94.2-74.3 94.2s-74.4-45-74.4-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M96.1 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2C80.2 229.8 95.6 175.2 96 173.3z"
                                        fill="#d03f3f" />
                                    <path
                                        d="M215.2 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z"
                                        fill="#fff" />
                                    <path
                                        d="M428.4 201.3c0 49.2-74.4 94.2-74.4 94.2s-74.3-45-74.3-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M292.2 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2-77.8-65.7-62.4-120.3-61.9-122.2z"
                                        fill="#d03f3f" />
                                    <path
                                        d="M411.3 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z"
                                        fill="#fff" />
                                    <path
                                        d="M381.7 374.1c-30.2 35.9-75.3 64.4-125.7 64.4s-95.4-28.5-125.8-64.2a17.6 17.6 0 0 1 16.5-28.7 627.7 627.7 0 0 0 218.7-.1c16.2-2.7 27 16.1 16.3 28.6z"
                                        fill="#3e4347" />
                                    <path
                                        d="M256 438.5c25.7 0 50-7.5 71.7-19.5-9-33.7-40.7-43.3-62.6-31.7-29.7 15.8-62.8-4.7-75.6 34.3 20.3 10.4 42.8 17 66.5 17z"
                                        fill="#e24b4b" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed1[0]->stars == 5)
                            <div class="slider__contents">
                                <svg class="rating-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <g fill="#ffd93b">
                                        <circle cx="256" cy="256" r="256" />
                                        <path
                                            d="M512 256A256 256 0 0 1 56.8 416.7a256 256 0 0 0 360-360c58 47 95.2 118.8 95.2 199.3z" />
                                    </g>
                                    <path
                                        d="M512 99.4v165.1c0 11-8.9 19.9-19.7 19.9h-187c-13 0-23.5-10.5-23.5-23.5v-21.3c0-12.9-8.9-24.8-21.6-26.7-16.2-2.5-30 10-30 25.5V261c0 13-10.5 23.5-23.5 23.5h-187A19.7 19.7 0 0 1 0 264.7V99.4c0-10.9 8.8-19.7 19.7-19.7h472.6c10.8 0 19.7 8.7 19.7 19.7z"
                                        fill="#e9eff4" />
                                    <path
                                        d="M204.6 138v88.2a23 23 0 0 1-23 23H58.2a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z"
                                        fill="#45cbea" />
                                    <path
                                        d="M476.9 138v88.2a23 23 0 0 1-23 23H330.3a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z"
                                        fill="#e84d88" />
                                    <g fill="#38c0dc">
                                        <path
                                            d="M95.2 114.9l-60 60v15.2l75.2-75.2zM123.3 114.9L35.1 203v23.2c0 1.8.3 3.7.7 5.4l116.8-116.7h-29.3z" />
                                    </g>
                                    <g fill="#d23f77">
                                        <path
                                            d="M373.3 114.9l-66 66V196l81.3-81.2zM401.5 114.9l-94.1 94v17.3c0 3.5.8 6.8 2.2 9.8l121.1-121.1h-29.2z" />
                                    </g>
                                    <path
                                        d="M329.5 395.2c0 44.7-33 81-73.4 81-40.7 0-73.5-36.3-73.5-81s32.8-81 73.5-81c40.5 0 73.4 36.3 73.4 81z"
                                        fill="#3e4347" />
                                    <path
                                        d="M256 476.2a70 70 0 0 0 53.3-25.5 34.6 34.6 0 0 0-58-25 34.4 34.4 0 0 0-47.8 26 69.9 69.9 0 0 0 52.6 24.5z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M290.3 434.8c-1 3.4-5.8 5.2-11 3.9s-8.4-5.1-7.4-8.7c.8-3.3 5.7-5 10.7-3.8 5.1 1.4 8.5 5.3 7.7 8.6z"
                                        fill="#fff" opacity=".2" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @endif

                        {{-- 2 --}}
                        @if ($feed2[0]->stars == 1)
                            <div class="slider__contents">
                                <svg class="rating-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M328.4 428a92.8 92.8 0 0 0-145-.1 6.8 6.8 0 0 1-12-5.8 86.6 86.6 0 0 1 84.5-69 86.6 86.6 0 0 1 84.7 69.8c1.3 6.9-7.7 10.6-12.2 5.1z"
                                        fill="#3e4347" />
                                    <path
                                        d="M269.2 222.3c5.3 62.8 52 113.9 104.8 113.9 52.3 0 90.8-51.1 85.6-113.9-2-25-10.8-47.9-23.7-66.7-4.1-6.1-12.2-8-18.5-4.2a111.8 111.8 0 0 1-60.1 16.2c-22.8 0-42.1-5.6-57.8-14.8-6.8-4-15.4-1.5-18.9 5.4-9 18.2-13.2 40.3-11.4 64.1z"
                                        fill="#f4c534" />
                                    <path
                                        d="M357 189.5c25.8 0 47-7.1 63.7-18.7 10 14.6 17 32.1 18.7 51.6 4 49.6-26.1 89.7-67.5 89.7-41.6 0-78.4-40.1-82.5-89.7A95 95 0 0 1 298 174c16 9.7 35.6 15.5 59 15.5z"
                                        fill="#fff" />
                                    <path
                                        d="M396.2 246.1a38.5 38.5 0 0 1-38.7 38.6 38.5 38.5 0 0 1-38.6-38.6 38.6 38.6 0 1 1 77.3 0z"
                                        fill="#3e4347" />
                                    <path
                                        d="M380.4 241.1c-3.2 3.2-9.9 1.7-14.9-3.2-4.8-4.8-6.2-11.5-3-14.7 3.3-3.4 10-2 14.9 2.9 4.9 5 6.4 11.7 3 15z"
                                        fill="#fff" />
                                    <path
                                        d="M242.8 222.3c-5.3 62.8-52 113.9-104.8 113.9-52.3 0-90.8-51.1-85.6-113.9 2-25 10.8-47.9 23.7-66.7 4.1-6.1 12.2-8 18.5-4.2 16.2 10.1 36.2 16.2 60.1 16.2 22.8 0 42.1-5.6 57.8-14.8 6.8-4 15.4-1.5 18.9 5.4 9 18.2 13.2 40.3 11.4 64.1z"
                                        fill="#f4c534" />
                                    <path
                                        d="M155 189.5c-25.8 0-47-7.1-63.7-18.7-10 14.6-17 32.1-18.7 51.6-4 49.6 26.1 89.7 67.5 89.7 41.6 0 78.4-40.1 82.5-89.7A95 95 0 0 0 214 174c-16 9.7-35.6 15.5-59 15.5z"
                                        fill="#fff" />
                                    <path
                                        d="M115.8 246.1a38.5 38.5 0 0 0 38.7 38.6 38.5 38.5 0 0 0 38.6-38.6 38.6 38.6 0 1 0-77.3 0z"
                                        fill="#3e4347" />
                                    <path
                                        d="M131.6 241.1c3.2 3.2 9.9 1.7 14.9-3.2 4.8-4.8 6.2-11.5 3-14.7-3.3-3.4-10-2-14.9 2.9-4.9 5-6.4 11.7-3 15z"
                                        fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed2[0]->stars == 2)
                            <div class="slider__contents">
                                <svg class="rating-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M336.6 403.2c-6.5 8-16 10-25.5 5.2a117.6 117.6 0 0 0-110.2 0c-9.4 4.9-19 3.3-25.6-4.6-6.5-7.7-4.7-21.1 8.4-28 45.1-24 99.5-24 144.6 0 13 7 14.8 19.7 8.3 27.4z"
                                        fill="#3e4347" />
                                    <path d="M276.6 244.3a79.3 79.3 0 1 1 158.8 0 79.5 79.5 0 1 1-158.8 0z"
                                        fill="#fff" />
                                    <circle cx="340" cy="260.4" r="36.2" fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="rotate(-135 326.4 246.6)" cx="326.4" cy="246.6"
                                            rx="6.5" ry="10" />
                                        <path d="M231.9 244.3a79.3 79.3 0 1 0-158.8 0 79.5 79.5 0 1 0 158.8 0z" />
                                    </g>
                                    <circle cx="168.5" cy="260.4" r="36.2" fill="#3e4347" />
                                    <ellipse transform="rotate(-135 182.1 246.7)" cx="182.1" cy="246.7"
                                        rx="10" ry="6.5" fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed2[0]->stars == 3)
                            <div class="slider__contents">
                                <svg class="rating-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M407.7 352.8a163.9 163.9 0 0 1-303.5 0c-2.3-5.5 1.5-12 7.5-13.2a780.8 780.8 0 0 1 288.4 0c6 1.2 9.9 7.7 7.6 13.2z"
                                        fill="#3e4347" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <g fill="#fff">
                                        <path
                                            d="M115.3 339c18.2 29.6 75.1 32.8 143.1 32.8 67.1 0 124.2-3.2 143.2-31.6l-1.5-.6a780.6 780.6 0 0 0-284.8-.6z" />
                                        <ellipse cx="356.4" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="356.4" cy="205.3" rx="44.2" ry="44.2"
                                        fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="scale(-1) rotate(45 454 -906)" cx="375.3" cy="188.1"
                                            rx="12" ry="8.1" />
                                        <ellipse cx="155.6" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="155.6" cy="205.3" rx="44.2" ry="44.2"
                                        fill="#3e4347" />
                                    <ellipse transform="scale(-1) rotate(45 454 -421.3)" cx="174.5" cy="188"
                                        rx="12" ry="8.1" fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed2[0]->stars == 4)
                            <div class="slider__contents">
                                <svg class="rating-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M232.3 201.3c0 49.2-74.3 94.2-74.3 94.2s-74.4-45-74.4-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M96.1 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2C80.2 229.8 95.6 175.2 96 173.3z"
                                        fill="#d03f3f" />
                                    <path
                                        d="M215.2 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z"
                                        fill="#fff" />
                                    <path
                                        d="M428.4 201.3c0 49.2-74.4 94.2-74.4 94.2s-74.3-45-74.3-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M292.2 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2-77.8-65.7-62.4-120.3-61.9-122.2z"
                                        fill="#d03f3f" />
                                    <path
                                        d="M411.3 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z"
                                        fill="#fff" />
                                    <path
                                        d="M381.7 374.1c-30.2 35.9-75.3 64.4-125.7 64.4s-95.4-28.5-125.8-64.2a17.6 17.6 0 0 1 16.5-28.7 627.7 627.7 0 0 0 218.7-.1c16.2-2.7 27 16.1 16.3 28.6z"
                                        fill="#3e4347" />
                                    <path
                                        d="M256 438.5c25.7 0 50-7.5 71.7-19.5-9-33.7-40.7-43.3-62.6-31.7-29.7 15.8-62.8-4.7-75.6 34.3 20.3 10.4 42.8 17 66.5 17z"
                                        fill="#e24b4b" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed2[0]->stars == 5)
                            <div class="slider__contents">
                                <svg class="rating-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <g fill="#ffd93b">
                                        <circle cx="256" cy="256" r="256" />
                                        <path
                                            d="M512 256A256 256 0 0 1 56.8 416.7a256 256 0 0 0 360-360c58 47 95.2 118.8 95.2 199.3z" />
                                    </g>
                                    <path
                                        d="M512 99.4v165.1c0 11-8.9 19.9-19.7 19.9h-187c-13 0-23.5-10.5-23.5-23.5v-21.3c0-12.9-8.9-24.8-21.6-26.7-16.2-2.5-30 10-30 25.5V261c0 13-10.5 23.5-23.5 23.5h-187A19.7 19.7 0 0 1 0 264.7V99.4c0-10.9 8.8-19.7 19.7-19.7h472.6c10.8 0 19.7 8.7 19.7 19.7z"
                                        fill="#e9eff4" />
                                    <path
                                        d="M204.6 138v88.2a23 23 0 0 1-23 23H58.2a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z"
                                        fill="#45cbea" />
                                    <path
                                        d="M476.9 138v88.2a23 23 0 0 1-23 23H330.3a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z"
                                        fill="#e84d88" />
                                    <g fill="#38c0dc">
                                        <path
                                            d="M95.2 114.9l-60 60v15.2l75.2-75.2zM123.3 114.9L35.1 203v23.2c0 1.8.3 3.7.7 5.4l116.8-116.7h-29.3z" />
                                    </g>
                                    <g fill="#d23f77">
                                        <path
                                            d="M373.3 114.9l-66 66V196l81.3-81.2zM401.5 114.9l-94.1 94v17.3c0 3.5.8 6.8 2.2 9.8l121.1-121.1h-29.2z" />
                                    </g>
                                    <path
                                        d="M329.5 395.2c0 44.7-33 81-73.4 81-40.7 0-73.5-36.3-73.5-81s32.8-81 73.5-81c40.5 0 73.4 36.3 73.4 81z"
                                        fill="#3e4347" />
                                    <path
                                        d="M256 476.2a70 70 0 0 0 53.3-25.5 34.6 34.6 0 0 0-58-25 34.4 34.4 0 0 0-47.8 26 69.9 69.9 0 0 0 52.6 24.5z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M290.3 434.8c-1 3.4-5.8 5.2-11 3.9s-8.4-5.1-7.4-8.7c.8-3.3 5.7-5 10.7-3.8 5.1 1.4 8.5 5.3 7.7 8.6z"
                                        fill="#fff" opacity=".2" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @endif

                        {{-- 3 --}}
                        @if ($feed3[0]->stars == 1)
                            <div class="slider__contents">
                                <svg class="rating-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M328.4 428a92.8 92.8 0 0 0-145-.1 6.8 6.8 0 0 1-12-5.8 86.6 86.6 0 0 1 84.5-69 86.6 86.6 0 0 1 84.7 69.8c1.3 6.9-7.7 10.6-12.2 5.1z"
                                        fill="#3e4347" />
                                    <path
                                        d="M269.2 222.3c5.3 62.8 52 113.9 104.8 113.9 52.3 0 90.8-51.1 85.6-113.9-2-25-10.8-47.9-23.7-66.7-4.1-6.1-12.2-8-18.5-4.2a111.8 111.8 0 0 1-60.1 16.2c-22.8 0-42.1-5.6-57.8-14.8-6.8-4-15.4-1.5-18.9 5.4-9 18.2-13.2 40.3-11.4 64.1z"
                                        fill="#f4c534" />
                                    <path
                                        d="M357 189.5c25.8 0 47-7.1 63.7-18.7 10 14.6 17 32.1 18.7 51.6 4 49.6-26.1 89.7-67.5 89.7-41.6 0-78.4-40.1-82.5-89.7A95 95 0 0 1 298 174c16 9.7 35.6 15.5 59 15.5z"
                                        fill="#fff" />
                                    <path
                                        d="M396.2 246.1a38.5 38.5 0 0 1-38.7 38.6 38.5 38.5 0 0 1-38.6-38.6 38.6 38.6 0 1 1 77.3 0z"
                                        fill="#3e4347" />
                                    <path
                                        d="M380.4 241.1c-3.2 3.2-9.9 1.7-14.9-3.2-4.8-4.8-6.2-11.5-3-14.7 3.3-3.4 10-2 14.9 2.9 4.9 5 6.4 11.7 3 15z"
                                        fill="#fff" />
                                    <path
                                        d="M242.8 222.3c-5.3 62.8-52 113.9-104.8 113.9-52.3 0-90.8-51.1-85.6-113.9 2-25 10.8-47.9 23.7-66.7 4.1-6.1 12.2-8 18.5-4.2 16.2 10.1 36.2 16.2 60.1 16.2 22.8 0 42.1-5.6 57.8-14.8 6.8-4 15.4-1.5 18.9 5.4 9 18.2 13.2 40.3 11.4 64.1z"
                                        fill="#f4c534" />
                                    <path
                                        d="M155 189.5c-25.8 0-47-7.1-63.7-18.7-10 14.6-17 32.1-18.7 51.6-4 49.6 26.1 89.7 67.5 89.7 41.6 0 78.4-40.1 82.5-89.7A95 95 0 0 0 214 174c-16 9.7-35.6 15.5-59 15.5z"
                                        fill="#fff" />
                                    <path
                                        d="M115.8 246.1a38.5 38.5 0 0 0 38.7 38.6 38.5 38.5 0 0 0 38.6-38.6 38.6 38.6 0 1 0-77.3 0z"
                                        fill="#3e4347" />
                                    <path
                                        d="M131.6 241.1c3.2 3.2 9.9 1.7 14.9-3.2 4.8-4.8 6.2-11.5 3-14.7-3.3-3.4-10-2-14.9 2.9-4.9 5-6.4 11.7-3 15z"
                                        fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed3[0]->stars == 2)
                            <div class="slider__contents">
                                <svg class="rating-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M336.6 403.2c-6.5 8-16 10-25.5 5.2a117.6 117.6 0 0 0-110.2 0c-9.4 4.9-19 3.3-25.6-4.6-6.5-7.7-4.7-21.1 8.4-28 45.1-24 99.5-24 144.6 0 13 7 14.8 19.7 8.3 27.4z"
                                        fill="#3e4347" />
                                    <path d="M276.6 244.3a79.3 79.3 0 1 1 158.8 0 79.5 79.5 0 1 1-158.8 0z"
                                        fill="#fff" />
                                    <circle cx="340" cy="260.4" r="36.2" fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="rotate(-135 326.4 246.6)" cx="326.4" cy="246.6"
                                            rx="6.5" ry="10" />
                                        <path d="M231.9 244.3a79.3 79.3 0 1 0-158.8 0 79.5 79.5 0 1 0 158.8 0z" />
                                    </g>
                                    <circle cx="168.5" cy="260.4" r="36.2" fill="#3e4347" />
                                    <ellipse transform="rotate(-135 182.1 246.7)" cx="182.1" cy="246.7"
                                        rx="10" ry="6.5" fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed3[0]->stars == 3)
                            <div class="slider__contents">
                                <svg class="rating-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M407.7 352.8a163.9 163.9 0 0 1-303.5 0c-2.3-5.5 1.5-12 7.5-13.2a780.8 780.8 0 0 1 288.4 0c6 1.2 9.9 7.7 7.6 13.2z"
                                        fill="#3e4347" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <g fill="#fff">
                                        <path
                                            d="M115.3 339c18.2 29.6 75.1 32.8 143.1 32.8 67.1 0 124.2-3.2 143.2-31.6l-1.5-.6a780.6 780.6 0 0 0-284.8-.6z" />
                                        <ellipse cx="356.4" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="356.4" cy="205.3" rx="44.2" ry="44.2"
                                        fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="scale(-1) rotate(45 454 -906)" cx="375.3" cy="188.1"
                                            rx="12" ry="8.1" />
                                        <ellipse cx="155.6" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="155.6" cy="205.3" rx="44.2" ry="44.2"
                                        fill="#3e4347" />
                                    <ellipse transform="scale(-1) rotate(45 454 -421.3)" cx="174.5" cy="188"
                                        rx="12" ry="8.1" fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed3[0]->stars == 4)
                            <div class="slider__contents">
                                <svg class="rating-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M232.3 201.3c0 49.2-74.3 94.2-74.3 94.2s-74.4-45-74.4-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M96.1 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2C80.2 229.8 95.6 175.2 96 173.3z"
                                        fill="#d03f3f" />
                                    <path
                                        d="M215.2 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z"
                                        fill="#fff" />
                                    <path
                                        d="M428.4 201.3c0 49.2-74.4 94.2-74.4 94.2s-74.3-45-74.3-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M292.2 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2-77.8-65.7-62.4-120.3-61.9-122.2z"
                                        fill="#d03f3f" />
                                    <path
                                        d="M411.3 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z"
                                        fill="#fff" />
                                    <path
                                        d="M381.7 374.1c-30.2 35.9-75.3 64.4-125.7 64.4s-95.4-28.5-125.8-64.2a17.6 17.6 0 0 1 16.5-28.7 627.7 627.7 0 0 0 218.7-.1c16.2-2.7 27 16.1 16.3 28.6z"
                                        fill="#3e4347" />
                                    <path
                                        d="M256 438.5c25.7 0 50-7.5 71.7-19.5-9-33.7-40.7-43.3-62.6-31.7-29.7 15.8-62.8-4.7-75.6 34.3 20.3 10.4 42.8 17 66.5 17z"
                                        fill="#e24b4b" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed3[0]->stars == 5)
                            <div class="slider__contents">
                                <svg class="rating-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <g fill="#ffd93b">
                                        <circle cx="256" cy="256" r="256" />
                                        <path
                                            d="M512 256A256 256 0 0 1 56.8 416.7a256 256 0 0 0 360-360c58 47 95.2 118.8 95.2 199.3z" />
                                    </g>
                                    <path
                                        d="M512 99.4v165.1c0 11-8.9 19.9-19.7 19.9h-187c-13 0-23.5-10.5-23.5-23.5v-21.3c0-12.9-8.9-24.8-21.6-26.7-16.2-2.5-30 10-30 25.5V261c0 13-10.5 23.5-23.5 23.5h-187A19.7 19.7 0 0 1 0 264.7V99.4c0-10.9 8.8-19.7 19.7-19.7h472.6c10.8 0 19.7 8.7 19.7 19.7z"
                                        fill="#e9eff4" />
                                    <path
                                        d="M204.6 138v88.2a23 23 0 0 1-23 23H58.2a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z"
                                        fill="#45cbea" />
                                    <path
                                        d="M476.9 138v88.2a23 23 0 0 1-23 23H330.3a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z"
                                        fill="#e84d88" />
                                    <g fill="#38c0dc">
                                        <path
                                            d="M95.2 114.9l-60 60v15.2l75.2-75.2zM123.3 114.9L35.1 203v23.2c0 1.8.3 3.7.7 5.4l116.8-116.7h-29.3z" />
                                    </g>
                                    <g fill="#d23f77">
                                        <path
                                            d="M373.3 114.9l-66 66V196l81.3-81.2zM401.5 114.9l-94.1 94v17.3c0 3.5.8 6.8 2.2 9.8l121.1-121.1h-29.2z" />
                                    </g>
                                    <path
                                        d="M329.5 395.2c0 44.7-33 81-73.4 81-40.7 0-73.5-36.3-73.5-81s32.8-81 73.5-81c40.5 0 73.4 36.3 73.4 81z"
                                        fill="#3e4347" />
                                    <path
                                        d="M256 476.2a70 70 0 0 0 53.3-25.5 34.6 34.6 0 0 0-58-25 34.4 34.4 0 0 0-47.8 26 69.9 69.9 0 0 0 52.6 24.5z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M290.3 434.8c-1 3.4-5.8 5.2-11 3.9s-8.4-5.1-7.4-8.7c.8-3.3 5.7-5 10.7-3.8 5.1 1.4 8.5 5.3 7.7 8.6z"
                                        fill="#fff" opacity=".2" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @endif

                        {{-- 4 --}}
                        @if ($feed4[0]->stars == 1)
                            <div class="slider__contents">
                                <svg class="rating-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M328.4 428a92.8 92.8 0 0 0-145-.1 6.8 6.8 0 0 1-12-5.8 86.6 86.6 0 0 1 84.5-69 86.6 86.6 0 0 1 84.7 69.8c1.3 6.9-7.7 10.6-12.2 5.1z"
                                        fill="#3e4347" />
                                    <path
                                        d="M269.2 222.3c5.3 62.8 52 113.9 104.8 113.9 52.3 0 90.8-51.1 85.6-113.9-2-25-10.8-47.9-23.7-66.7-4.1-6.1-12.2-8-18.5-4.2a111.8 111.8 0 0 1-60.1 16.2c-22.8 0-42.1-5.6-57.8-14.8-6.8-4-15.4-1.5-18.9 5.4-9 18.2-13.2 40.3-11.4 64.1z"
                                        fill="#f4c534" />
                                    <path
                                        d="M357 189.5c25.8 0 47-7.1 63.7-18.7 10 14.6 17 32.1 18.7 51.6 4 49.6-26.1 89.7-67.5 89.7-41.6 0-78.4-40.1-82.5-89.7A95 95 0 0 1 298 174c16 9.7 35.6 15.5 59 15.5z"
                                        fill="#fff" />
                                    <path
                                        d="M396.2 246.1a38.5 38.5 0 0 1-38.7 38.6 38.5 38.5 0 0 1-38.6-38.6 38.6 38.6 0 1 1 77.3 0z"
                                        fill="#3e4347" />
                                    <path
                                        d="M380.4 241.1c-3.2 3.2-9.9 1.7-14.9-3.2-4.8-4.8-6.2-11.5-3-14.7 3.3-3.4 10-2 14.9 2.9 4.9 5 6.4 11.7 3 15z"
                                        fill="#fff" />
                                    <path
                                        d="M242.8 222.3c-5.3 62.8-52 113.9-104.8 113.9-52.3 0-90.8-51.1-85.6-113.9 2-25 10.8-47.9 23.7-66.7 4.1-6.1 12.2-8 18.5-4.2 16.2 10.1 36.2 16.2 60.1 16.2 22.8 0 42.1-5.6 57.8-14.8 6.8-4 15.4-1.5 18.9 5.4 9 18.2 13.2 40.3 11.4 64.1z"
                                        fill="#f4c534" />
                                    <path
                                        d="M155 189.5c-25.8 0-47-7.1-63.7-18.7-10 14.6-17 32.1-18.7 51.6-4 49.6 26.1 89.7 67.5 89.7 41.6 0 78.4-40.1 82.5-89.7A95 95 0 0 0 214 174c-16 9.7-35.6 15.5-59 15.5z"
                                        fill="#fff" />
                                    <path
                                        d="M115.8 246.1a38.5 38.5 0 0 0 38.7 38.6 38.5 38.5 0 0 0 38.6-38.6 38.6 38.6 0 1 0-77.3 0z"
                                        fill="#3e4347" />
                                    <path
                                        d="M131.6 241.1c3.2 3.2 9.9 1.7 14.9-3.2 4.8-4.8 6.2-11.5 3-14.7-3.3-3.4-10-2-14.9 2.9-4.9 5-6.4 11.7-3 15z"
                                        fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed4[0]->stars == 2)
                            <div class="slider__contents">
                                <svg class="rating-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M336.6 403.2c-6.5 8-16 10-25.5 5.2a117.6 117.6 0 0 0-110.2 0c-9.4 4.9-19 3.3-25.6-4.6-6.5-7.7-4.7-21.1 8.4-28 45.1-24 99.5-24 144.6 0 13 7 14.8 19.7 8.3 27.4z"
                                        fill="#3e4347" />
                                    <path d="M276.6 244.3a79.3 79.3 0 1 1 158.8 0 79.5 79.5 0 1 1-158.8 0z"
                                        fill="#fff" />
                                    <circle cx="340" cy="260.4" r="36.2" fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="rotate(-135 326.4 246.6)" cx="326.4" cy="246.6"
                                            rx="6.5" ry="10" />
                                        <path d="M231.9 244.3a79.3 79.3 0 1 0-158.8 0 79.5 79.5 0 1 0 158.8 0z" />
                                    </g>
                                    <circle cx="168.5" cy="260.4" r="36.2" fill="#3e4347" />
                                    <ellipse transform="rotate(-135 182.1 246.7)" cx="182.1" cy="246.7"
                                        rx="10" ry="6.5" fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed4[0]->stars == 3)
                            <div class="slider__contents">
                                <svg class="rating-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M407.7 352.8a163.9 163.9 0 0 1-303.5 0c-2.3-5.5 1.5-12 7.5-13.2a780.8 780.8 0 0 1 288.4 0c6 1.2 9.9 7.7 7.6 13.2z"
                                        fill="#3e4347" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <g fill="#fff">
                                        <path
                                            d="M115.3 339c18.2 29.6 75.1 32.8 143.1 32.8 67.1 0 124.2-3.2 143.2-31.6l-1.5-.6a780.6 780.6 0 0 0-284.8-.6z" />
                                        <ellipse cx="356.4" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="356.4" cy="205.3" rx="44.2" ry="44.2"
                                        fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="scale(-1) rotate(45 454 -906)" cx="375.3"
                                            cy="188.1" rx="12" ry="8.1" />
                                        <ellipse cx="155.6" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="155.6" cy="205.3" rx="44.2" ry="44.2"
                                        fill="#3e4347" />
                                    <ellipse transform="scale(-1) rotate(45 454 -421.3)" cx="174.5" cy="188"
                                        rx="12" ry="8.1" fill="#fff" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed4[0]->stars == 4)
                            <div class="slider__contents">
                                <svg class="rating-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path
                                        d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z"
                                        fill="#f4c534" />
                                    <path
                                        d="M232.3 201.3c0 49.2-74.3 94.2-74.3 94.2s-74.4-45-74.4-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M96.1 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2C80.2 229.8 95.6 175.2 96 173.3z"
                                        fill="#d03f3f" />
                                    <path
                                        d="M215.2 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z"
                                        fill="#fff" />
                                    <path
                                        d="M428.4 201.3c0 49.2-74.4 94.2-74.4 94.2s-74.3-45-74.3-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M292.2 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2-77.8-65.7-62.4-120.3-61.9-122.2z"
                                        fill="#d03f3f" />
                                    <path
                                        d="M411.3 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z"
                                        fill="#fff" />
                                    <path
                                        d="M381.7 374.1c-30.2 35.9-75.3 64.4-125.7 64.4s-95.4-28.5-125.8-64.2a17.6 17.6 0 0 1 16.5-28.7 627.7 627.7 0 0 0 218.7-.1c16.2-2.7 27 16.1 16.3 28.6z"
                                        fill="#3e4347" />
                                    <path
                                        d="M256 438.5c25.7 0 50-7.5 71.7-19.5-9-33.7-40.7-43.3-62.6-31.7-29.7 15.8-62.8-4.7-75.6 34.3 20.3 10.4 42.8 17 66.5 17z"
                                        fill="#e24b4b" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-regular fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @elseif ($feed4[0]->stars == 5)
                            <div class="slider__contents">
                                <svg class="rating-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <g fill="#ffd93b">
                                        <circle cx="256" cy="256" r="256" />
                                        <path
                                            d="M512 256A256 256 0 0 1 56.8 416.7a256 256 0 0 0 360-360c58 47 95.2 118.8 95.2 199.3z" />
                                    </g>
                                    <path
                                        d="M512 99.4v165.1c0 11-8.9 19.9-19.7 19.9h-187c-13 0-23.5-10.5-23.5-23.5v-21.3c0-12.9-8.9-24.8-21.6-26.7-16.2-2.5-30 10-30 25.5V261c0 13-10.5 23.5-23.5 23.5h-187A19.7 19.7 0 0 1 0 264.7V99.4c0-10.9 8.8-19.7 19.7-19.7h472.6c10.8 0 19.7 8.7 19.7 19.7z"
                                        fill="#e9eff4" />
                                    <path
                                        d="M204.6 138v88.2a23 23 0 0 1-23 23H58.2a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z"
                                        fill="#45cbea" />
                                    <path
                                        d="M476.9 138v88.2a23 23 0 0 1-23 23H330.3a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z"
                                        fill="#e84d88" />
                                    <g fill="#38c0dc">
                                        <path
                                            d="M95.2 114.9l-60 60v15.2l75.2-75.2zM123.3 114.9L35.1 203v23.2c0 1.8.3 3.7.7 5.4l116.8-116.7h-29.3z" />
                                    </g>
                                    <g fill="#d23f77">
                                        <path
                                            d="M373.3 114.9l-66 66V196l81.3-81.2zM401.5 114.9l-94.1 94v17.3c0 3.5.8 6.8 2.2 9.8l121.1-121.1h-29.2z" />
                                    </g>
                                    <path
                                        d="M329.5 395.2c0 44.7-33 81-73.4 81-40.7 0-73.5-36.3-73.5-81s32.8-81 73.5-81c40.5 0 73.4 36.3 73.4 81z"
                                        fill="#3e4347" />
                                    <path
                                        d="M256 476.2a70 70 0 0 0 53.3-25.5 34.6 34.6 0 0 0-58-25 34.4 34.4 0 0 0-47.8 26 69.9 69.9 0 0 0 52.6 24.5z"
                                        fill="#e24b4b" />
                                    <path
                                        d="M290.3 434.8c-1 3.4-5.8 5.2-11 3.9s-8.4-5.1-7.4-8.7c.8-3.3 5.7-5 10.7-3.8 5.1 1.4 8.5 5.3 7.7 8.6z"
                                        fill="#fff" opacity=".2" />
                                </svg>

                                <div class="mt-2">
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                    <i class="fa-solid fa-star starr" style="font-size: 20px;"></i>
                                </div>

                                <h2 class="slider__caption">{{ \App\Models\User::find($feed1[0]->user_id)->name }}</h2>
                                <p class="slider__txt fs-4 fw-bold">{{ $feed1[0]->text }}</p>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </section>
        {{-- Testimonails --}}
    @endif
@endsection

@section('js')
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <script>
        $(document).ready(function() {
            $('.starr').css('color', '#f4c534');
            $('.ligh').css('color', '#f4c534');
        });

        AOS.init();
    </script>
@endsection