Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
38 kB
1
Indexable
Never
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruit Shop</title>
    <link rel="icon" type="image/x-png" href="./images/logo.png">

    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@3.4.0/dist/full.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

        <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
    .font-poppin{
        font-family: 'Poppins', sans-serif;
    }
</style>

</head>

<body class="font-poppin">
 <!-- Header Section -->
<header class="my-4 sm:my-10">
    <div class="p-0 lg:p-4 bg-none lg:bg-rose-500 sm:rounded-full mx-4 lg:mx-60">
        <div class="flex flex-row-reverse lg:flex-row justify-between items-center px-0 lg:px-5">

<!-- Hamburger Menu -->
<div class="lg:hidden ">
    <div class="drawer lg:drawer-open">
        <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
        <div class="drawer-content flex flex-col items-center justify-center">
          <!-- Page content here -->
          <label for="my-drawer-2" class="btn btn-primary bg-transparent text-black border-none drawer-button lg:hidden z-100"><i class="fa-solid fa-bars"></i></label>
        
        </div> 
        <div class="drawer-side z-10">
          <label for="my-drawer-2" class="drawer-overlay "></label> 
          <ul class="menu p-4 w-80 h-full bg-base-200 text-base-content">
            <!-- Sidebar content here -->
            <li><a>Home</a></li>
            <li><a>About Us</a></li>
            <li><a>Shop</a></li>
            <li><a>All Fruits</a></li>
          </ul>
        
        </div>
      </div>
</div>




            <!-- Left Menu for desktop -->
            <div class="hidden lg:flex">
                <ul class="flex space-x-4">
                    <li><a href="#" class="text-white">Home</a></li>
                    <li><a href="#" class="text-white">About</a></li>
                    <li><a href="#" class="text-white">Shop</a></li>
                    <li><a href="#" class="text-white">All Fruits</a></li>
                </ul>
            </div>

            <!-- Logo -->
            <div class="flex justify-center text-center gap-4">
                <img src="./images/logo.png" alt="Logo">
                <h2 class="text-left text-black font-bold lg:text-white text-2xl lg:text-4xl align-baseline m-auto">
                    Fruit Burst</h2>
            </div>

            <!-- Search Form for desktop -->
            <div class="hidden lg:flex">
                <form class="flex items-center">
                    <input type="text" class="rounded-full px-4 py-2 mr-2" placeholder="Search">
                    <button type="submit" class="bg-white rounded-full p-2">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor" class="h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </button>
                </form>
            </div>
        </div>
    </div>
</header>



    <main>

        <!-- slider section -->
        <section class="my-4 sm:my-10 md:mx-30 lg:mx-4">

            <div class="mx-4 sm:mx-60">

                <!-- slider or carousel -->
                <div class="carousel w-full h-48  lg:h-[550px]">
                    <!-- slide 1 -->
                    <div id="slide1"
                        class="flex justify-content items-center carousel-item relative h-48 lg:h-auto w-full bg-[url('./images/banner1.png')] bg-cover">
                        <div class="m-auto">
                            <div class="text-center">
                                <h2 class="text-white text-2xl mb-2 font-bold sm:text-3xl sm:mb-4">Exotic tastes at your
                                    doorstep</h2>
                                <p class="text-white mb-2 sm:mb-4">We supply highly quality organic products</p>
                                <a href="#" class="bg-red-500 text-white px-2 sm:px-4 py-2 rounded">Shop Now</a>
                            </div>

                        </div>
                        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                            <a href="#slide4" class="btn btn-sm">❮</a>
                            <a href="#slide2" class="btn btn-sm">❯</a>
                        </div>
                    </div>
                    <!-- slide 2 -->
                    <div id="slide2"
                        class="flex justify-content items-center carousel-item relative h-48 lg:h-auto w-full bg-[url('./images/banner2.png')] bg-cover">
                        <div class="m-auto">
                            <div class="text-center">
                                <h2 class="text-white text-2xl mb-2 font-bold sm:text-3xl sm:mb-4">Exotic tastes at your
                                    doorstep</h2>
                                <p class="text-white mb-2 sm:mb-4">We supply highly quality organic products</p>
                                <a href="#" class="bg-red-500 text-white px-2 sm:px-4 py-2 rounded">Shop Now</a>
                            </div>

                        </div>
                        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                            <a href="#slide1" class="btn btn-sm">❮</a>
                            <a href="#slide3" class="btn btn-sm">❯</a>
                        </div>
                    </div>

                    <!-- slide 3 -->
                    <div id="slide3"
                        class="flex justify-content items-center carousel-item relative h-48 lg:h-auto w-full bg-[url('./images/banner3.png')] bg-cover">
                        <div class="m-auto">
                            <div class="text-center">
                                <h2 class="text-white text-2xl mb-2 font-bold sm:text-3xl sm:mb-4">Exotic tastes at your
                                    doorstep</h2>
                                <p class="text-white mb-2 sm:mb-4">We supply highly quality organic products</p>
                                <a href="#" class="bg-red-500 text-white px-2 sm:px-4 py-2 rounded">Shop Now</a>
                            </div>

                        </div>
                        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                            <a href="#slide2" class="btn btn-sm">❮</a>
                            <a href="#slide4" class="btn btn-sm">❯</a>
                        </div>
                    </div>

                    <!-- slide 4 -->
                    <div id="slide4"
                        class="flex justify-content items-center carousel-item relative h-48 lg:h-auto w-full bg-[url('./images/banner4.png')] bg-cover">
                        <div class="m-auto">
                            <div class="text-center">
                                <h2 class="text-white text-2xl mb-2 font-bold sm:text-3xl sm:mb-4">Exotic tastes at your
                                    doorstep</h2>
                                <p class="text-white mb-2 sm:mb-4">We supply highly quality organic products</p>
                                <a href="#" class="bg-red-500 text-white px-2 sm:px-4 py-2 rounded">Shop Now</a>
                            </div>

                        </div>
                        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                            <a href="#slide3" class="btn btn-sm">❮</a>
                            <a href="#slide1" class="btn btn-sm">❯</a>
                        </div>
                    </div>
                </div>

            </div>

        </section>
        <!-- slider section end -->



        <!-- image under slide -->
        <div
            class="hidden lg:flex justify-center space-x-8 gap-16 p-4 mx-72 bg-white rounded-xl shadow-md relative -top-24">
            <div class="text-center">
                <img src="./images/fruit1.png" alt="Image 1" class="w-36 h-28 object-cover">
                <p class="text-sm">Grapes</p>
            </div>
            <div class="text-center">
                <img src="./images/fruit2.png" alt="Image 2" class="w-36 h-28 object-cover">
                <p class="text-sm">Orange</p>
            </div>
            <div class="text-center">
                <img src="./images/fruit3.png" alt="Image 3" class="w-36 h-28 object-cover">
                <p class="text-sm">Mango</p>
            </div>
            <div class="text-center">
                <img src="./images/fruit4.png" alt="Image 4" class="w-36 h-28 object-cover">
                <p class="text-sm">Strawberry</p>
            </div>
            <div class="text-center">
                <img src="./images/fruit5.png" alt="Image 5" class="w-36 h-28 object-cover">
                <p class="text-sm">Pomegranate</p>
            </div>
        </div>

        <!-- image under slide end -->

        <!-- Deal of the day -->
        <section class=" mx-4 sm:mx-60 my-4 sm:my-10">

            <!-- Deal of the day - first block    -->
            <div class="flex lg:justify-between my-12 flex-col lg:flex-row">
                <!-- Left Block -->
                <div class="w-auto lg:w-1/2 pr-4 text-center lg:text-left">
                    <h2 class="font-bold text-2xl lg:text-5xl  my-4">Deal of the day</h2>
                    <p>Contrary to popular belief, is not simply random text. It has roots in a piece of classical Latin
                        literature from 45 BC, making it over 2000 years old.</p>
                </div>

                <!-- Right Block -->
                <div class="w-auto lg:w-1/2 pr-4 text-center lg:text-right mt-6">
                    <div class="text-center flex justify-center lg:justify-end">
                        <!-- Countdown -->
                        <div class="grid grid-flow-col gap-5 text-center auto-cols-max ">
                            <div class="flex flex-col">
                                <span class="countdown font-mono font-bold text-2xl lg:text-5xl  my-4">
                                    <span style="--value:15;"></span>
                                </span>
                                days
                            </div>
                            <div class="flex flex-col">
                                <span class="countdown font-mono font-bold text-2xl lg:text-5xl  my-4">
                                    <span style="--value:10;"></span>
                                </span>
                                hours
                            </div>
                            <div class="flex flex-col">
                                <span class="countdown font-mono font-bold text-2xl lg:text-5xl  my-4">
                                    <span style="--value:24;"></span>
                                </span>
                                min
                            </div>
                            <div class="flex flex-col">
                                <span class="countdown font-mono font-bold text-2xl lg:text-5xl  my-4">
                                    <span style="--value:16;"></span>
                                </span>
                                sec
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <!-- Deal of the day - first block end    -->



            <!-- Deal of the day - box  start  -->

            <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 ">
                <!-- First box -->
                <div
                    class="flex flex-col items-center bg-white mx-4 lg:mx-0 p-4 rounded shadow border-1 border-black gap-4 ">
                    <img src="./images/fruit6.png" class="my-10">
                    <h3 class="text-lg mb-2 text-2xl font-bold text-black">12.90$ - 18.85$</h3>
                    <hr class="w-9/12 lg:w-full mb-2">
                    <p class="mb-2 text-gray-500">Apples</p>


                    <div class="rating">
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                    </div>


                    <!-- Open the modal using ID.showModal() method -->
                    <button class="text-orange-600" onclick="my_modal_1.showModal()">Details</button>
                    <dialog id="my_modal_1" class="modal modal-bottom sm:modal-middle">
                        <form method="dialog"
                            class="modal-box bg-white  flex flex-col items-center p-4 rounded shadow border-1 border-black gap-4 rounded-3xl">

                            <img src="./images/fruit6.png" class="my-10 m-auto">

                            <h2 class="text-lg mb-2 text-2xl font-bold text-black">Apple</h2>
                            <p class="text-gray-600 max-w-md text-center">Professional employees are there for you to
                                pick the most amazing and fresh fruits.</p>



                            <div class="rating">
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                            </div>
                            <br>


                            <div class="modal-action">
                                <!-- if there is a button in form, it will close the modal -->
                                <button class="btn">Close</button>

                                <a href="#" class="bg-red-500 text-white px-4 py-2 rounded">Buy Now</a>
                            </div>


                        </form>
                    </dialog>
                </div>
                <!-- second box -->
                <div
                    class="flex flex-col items-center bg-white mx-4 lg:mx-0 p-4 rounded shadow border-1 border-black gap-4 ">
                    <img src="./images/fruit7.png" class="my-10">
                    <h3 class="text-lg mb-2 text-2xl font-bold text-black">12.90$ - 18.85$</h3>
                    <hr class="w-9/12 lg:w-full mb-2">
                    <p class="mb-2 text-gray-500">Orange</p>


                    <div class="rating">
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                    </div>


                    <!-- Open the modal using ID.showModal() method -->
                    <button class="text-orange-600" onclick="my_modal_2.showModal()">Details</button>
                    <dialog id="my_modal_2" class="modal modal-bottom sm:modal-middle">
                        <form method="dialog"
                            class="modal-box bg-white  flex flex-col items-center p-4 rounded shadow border-1 border-black gap-4 rounded-3xl">

                            <img src="./images/fruit7.png" class="my-10 m-auto">

                            <h2 class="text-lg mb-2 text-2xl font-bold text-black">Orange</h2>
                            <p class="text-gray-600 max-w-md text-center">Professional employees are there for you to
                                pick the most amazing and fresh fruits.</p>

                            <div class="rating">
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                            </div>
                            <br>


                            <div class="modal-action">
                                <!-- if there is a button in form, it will close the modal -->
                                <button class="btn">Close</button>

                                <a href="#" class="bg-red-500 text-white px-4 py-2 rounded">Buy Now</a>
                            </div>


                        </form>
                    </dialog>
                </div>
                <!-- third box -->
                <div
                    class="flex flex-col items-center bg-white mx-4 lg:mx-0 p-4 rounded shadow border-1 border-black gap-4 ">
                    <img src="./images/fruit8.png" class="my-10">
                    <h3 class="text-lg mb-2 text-2xl font-bold text-black">12.90$ - 18.85$</h3>
                    <hr class="w-9/12 lg:w-full mb-2">
                    <p class="mb-2 text-gray-500">Red Dragon</p>


                    <div class="rating">
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                    </div>


                    <!-- Open the modal using ID.showModal() method -->
                    <button class="text-orange-600" onclick="my_modal_3.showModal()">Details</button>
                    <dialog id="my_modal_3" class="modal modal-bottom sm:modal-middle">
                        <form method="dialog"
                            class="modal-box bg-white  flex flex-col items-center p-4 rounded shadow border-1 border-black gap-4 rounded-3xl">

                            <img src="./images/fruit8.png" class="my-10 m-auto">

                            <h2 class="text-lg mb-2 text-2xl font-bold text-black">Red Dragon</h2>
                            <p class="text-gray-600 max-w-md text-center">Professional employees are there for you to
                                pick the most amazing and fresh fruits.</p>



                            <div class="rating">
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                            </div>
                            <br>


                            <div class="modal-action">
                                <!-- if there is a button in form, it will close the modal -->
                                <button class="btn">Close</button>

                                <a href="#" class="bg-red-500 text-white px-4 py-2 rounded">Buy Now</a>
                            </div>


                        </form>
                    </dialog>
                </div>
                <!-- forth box -->
                <div
                    class="flex flex-col items-center bg-white mx-4 lg:mx-0 p-4 rounded shadow border-1 border-black gap-4 ">
                    <img src="./images/fruit9.png" class="my-10">
                    <h3 class="text-lg mb-2 text-2xl font-bold text-black">12.90$ - 18.85$</h3>
                    <hr class="w-9/12 lg:w-full mb-2">
                    <p class="mb-2 text-gray-500">Banana</p>


                    <div class="rating">
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                        <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                    </div>


                    <!-- Open the modal using ID.showModal() method -->
                    <button class="text-orange-600" onclick="my_modal_4.showModal()">Details</button>
                    <dialog id="my_modal_4" class="modal modal-bottom sm:modal-middle">
                        <form method="dialog"
                            class="modal-box bg-white  flex flex-col items-center p-4 rounded shadow border-1 border-black gap-4 rounded-3xl">

                            <img src="./images/fruit9.png" class="my-10 m-auto">

                            <h2 class="text-lg mb-2 text-2xl font-bold text-black">Banana</h2>
                            <p class="text-gray-600 max-w-md text-center">Professional employees are there for you to
                                pick the most amazing and fresh fruits.</p>



                            <div class="rating">
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
                            </div>
                            <br>


                            <div class="modal-action">
                                <!-- if there is a button in form, it will close the modal -->
                                <button class="btn">Close</button>

                                <a href="#" class="bg-red-500 text-white px-4 py-2 rounded">Buy Now</a>
                            </div>


                        </form>
                    </dialog>
                </div>

            </div>

            <!-- Deal of the day - box end  -->

            <div class="flex justify-center m-10">
                <a href="#" class="bg-red-500 text-white px-4 py-2 rounded text-center">Shop Now</a>
            </div>
        </section>



        <!-- Meet the team section start  -->
        <section class="mx-4 sm:mx-60 my-4 sm:my-10">

            <div class="hero" style="background-image: url('./images/banner1.png');">
                <div class="hero-overlay bg-opacity-60"></div>

                <div class="hero-content flex flex-col py-0 lg:py-24">


                    <div class="text-center text-white">
                        <h1 class="font-bold text-2xl lg:text-5xl  my-4">Meet the team</h1>
                        <p class="m-auto">
                            Contrary to popular belief, is not simply random text. It has
                            roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
                        </p>
                    </div>

                    <!-- Meet the Team members -->
                    <div class="text-center">

                        <!-- Team Grid -->
                        <div class="grid grid-cols-1 my-12  gap-12 lg:gap-24 lg:grid-cols-4 ">
                            <!-- Team Member 1 -->
                            <div class="text-white">
                                <img src="./images/member1.png" alt="Team Member Name"
                                    class="w-24 h-24 sm:w-36 sm:h-36 object-cover rounded-full mb-4 m-auto">
                                <h3 class="text-lg">Awlad Hossain</h3>
                                <p class="text-sm mb-4">Fruits Expert</p>
                                <!-- Social Icons -->
                                <div class="flex justify-center space-x-4">
                                    <a href="#">
                                        <i class="fa-brands fa-facebook"></i>
                                    </a>
                                    <a href="#">
                                        <i class="fa-brands fa-twitter"></i>
                                    </a>
                                    <a href="#">
                                        <i class="fa-brands fa-linkedin"></i>
                                    </a>
                                </div>
                            </div>

                            <!-- Team Member 2 -->
                            <div class="text-white">
                                <img src="./images/member2.png" alt="Team Member Name"
                                    class="w-24 h-24 sm:w-36 sm:h-36 object-cover rounded-full mb-4 m-auto">
                                <h3 class="text-lg">Safia Chowdhury</h3>
                                <p class="text-sm mb-4">Fruits Expert</p>
                                <!-- Social Icons -->
                                <div class="flex justify-center space-x-4">
                                    <a href="#">
                                        <i class="fa-brands fa-facebook"></i>
                                    </a>
                                    <a href="#">
                                        <i class="fa-brands fa-twitter"></i>
                                    </a>
                                    <a href="#">
                                        <i class="fa-brands fa-linkedin"></i>
                                    </a>
                                </div>
                            </div>

                            <!-- Team Member 3 -->
                            <div class="text-white">
                                <img src="./images/member3.png" alt="Team Member Name"
                                    class="w-24 h-24 sm:w-36 sm:h-36 object-cover rounded-full mb-4 m-auto">
                                <h3 class="text-lg">Rokib Hossain</h3>
                                <p class="text-sm mb-4">Fruits Expert</p>
                                <!-- Social Icons -->
                                <div class="flex justify-center space-x-4">
                                    <a href="#">
                                        <i class="fa-brands fa-facebook"></i>
                                    </a>
                                    <a href="#">
                                        <i class="fa-brands fa-twitter"></i>
                                    </a>
                                    <a href="#">
                                        <i class="fa-brands fa-linkedin"></i>
                                    </a>
                                </div>
                            </div>


                            <!-- Team Member 4 -->
                            <div class="text-white">
                                <img src="./images/member4.png" alt="Team Member Name"
                                    class="w-24 h-24 sm:w-36 sm:h-36 object-cover rounded-full mb-4 m-auto">
                                <h3 class="text-lg">Chaity</h3>
                                <p class="text-sm mb-4">Fruits Expert</p>
                                <!-- Social Icons -->
                                <div class="flex justify-center space-x-4">
                                    <a href="#">
                                        <i class="fa-brands fa-facebook"></i>
                                    </a>
                                    <a href="#">
                                        <i class="fa-brands fa-twitter"></i>
                                    </a>
                                    <a href="#">
                                        <i class="fa-brands fa-linkedin"></i>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </section>
        <!-- Meet the team section end -->

        <!-- why choose use section start -->
        <section class=" mx-4 sm:mx-60 my-4 sm:my-10">


            <div class="text-center mt-20 mb-10">
                <h2 class="font-bold text-2xl lg:text-5xl  my-4">Why Choose Us</h2>
                <p class="text-black">Contrary to popular belief, is not simply random text. It has roots in a piece of
                    classical Latin literature from 45 BC, making it over 2000 years old.</p>
            </div>

            <div class="flex flex-col lg:flex-row justify-between items-center gap-4 lg:gap-10">



                <!-- fist-left -->
                <div class="order-2 lg:order-1">

                    <!-- box 1 -->
                    <div class="flex flex-col lg:flex-row justify-center items-center gap-4 pb-12">
                        <div class="border-gray-800 border rounded-full p-2">
                            <i class="fa-solid fa-fire fa-2xl"></i>
                        </div>
                        <div class="flex flex-col items-center lg:items-start">
                            <h1 class="font-bold">Dedicated Team</h1>
                            <hr class="w-24 my-2">
                            <p class="text-center lg:text-left">Professional employees are there for you to pick the
                                most amazing and fresh fruits.
                            </p>
                        </div>

                    </div>


                    <!-- box 2 -->
                    <div class="flex flex-col lg:flex-row justify-center items-center gap-4 pb-12">
                        <div class="border-gray-800 border rounded-full p-2">
                            <i class="fa-solid fa-tree fa-2xl"></i>
                        </div>
                        <div class="flex flex-col items-center lg:items-start">
                            <h1 class="font-bold">Fresh is Best</h1>
                            <hr class="w-24 my-2">
                            <p class="text-center lg:text-left">Professional employees are there for you to pick the
                                most amazing and fresh fruits.
                            </p>
                        </div>

                    </div>

                    <!-- box 3 -->
                    <div class="flex flex-col lg:flex-row justify-center items-center gap-4 pb-12">
                        <div class="border-gray-800 border rounded-full p-2">
                            <i class="fa-solid fa-certificate fa-2xl"></i>
                        </div>
                        <div class="flex flex-col items-center lg:items-start">
                            <h1 class="font-bold">Gift Certificates</h1>
                            <hr class="w-24 my-2">
                            <p class="text-center lg:text-left">Professional employees are there for you to pick the
                                most amazing and fresh fruits.
                            </p>
                        </div>

                    </div>

                </div>
                <!-- image -->
                <div class="pb-4 lg:pb-0 order-1 lg:order-2">
                    <img class="w-full" src="./images/whychoose1.png" alt="Logo">
                </div>

                <!-- fist-right -->
                <div class="text-left lg:text-right order-3 lg:order-3">


                    <!-- box 1 -right -->
                    <div class="flex flex-col lg:flex-row-reverse justify-center items-center gap-4 pb-12">
                        <div class="border-gray-800 border rounded-full p-2">
                            <i class="fa-brands fa-dropbox fa-xl"></i>
                        </div>
                        <div class="flex flex-col items-center lg:items-end">
                            <h1 class="font-bold">Integrated Supplier</h1>
                            <hr class="w-24 my-2">
                            <p class="text-center lg:text-right">Professional employees are there for you to pick
                                the most amazing and fresh fruits.
                            </p>
                        </div>
                    </div>

                    <!-- box 2 -right-->
                    <div class="flex flex-col lg:flex-row-reverse justify-center items-center gap-4 pb-12">
                        <div class="border-gray-800 border rounded-full p-2">
                            <i class="fa-solid fa-percent fa-2xl"></i>
                        </div>
                        <div class="flex flex-col items-center lg:items-end">
                            <h1 class="font-bold">Sustainable Practice</h1>
                            <hr class="w-24 my-2">
                            <p class="text-center lg:text-right">Professional employees are there for you to pick
                                the most amazing and fresh fruits.
                            </p>
                        </div>

                    </div>

                    <!-- box 3 -right-->
                    <div class="flex flex-col lg:flex-row-reverse justify-center items-center gap-4 pb-12">
                        <div class="border-gray-800 border rounded-full p-2">
                            <i class="fa-solid fa-earth-americas fa-2xl"></i>
                        </div>
                        <div class="flex flex-col items-center lg:items-end">
                            <h1 class="font-bold">The Benefits Only</h1>
                            <hr class="w-24 my-2">
                            <p class="text-center lg:text-right">Professional employees are there for you to pick
                                the most amazing and fresh fruits.
                            </p>
                        </div>

                    </div>

                </div>
            </div>
        </section>




        <footer class="footer footer-center p-10 bg-base-200 text-base-content rounded bg-black text-white">

            <div class="flex gap-4">
                <img src="./images/logo.png">
                <h2 class="text-left text-black font-bold text-white text-2xl lg:text-4xl align-baseline m-auto">Fruit
                    Burst</h2>
            </div>


            <div class="grid grid-flow-col gap-4">
                <a class="#">Home</a>
                <a class="#">About</a>
                <a class="#">Shop</a>
                <a class="#">Support</a>
            </div>
            <div>
                <div class="grid grid-flow-col gap-4">
                    <a><i class="fa-brands fa-youtube fa-xl"></i></a>
                    <a><i class="fa-brands fa-twitter fa-xl"></i></a>
                    <a><i class="fa-brands fa-facebook fa-xl"></i></a>
                    <a><i class="fa-brands fa-instagram fa-xl"></i></a>
                    <a><i class="fa-brands fa-linkedin fa-xl"></i></a>

                </div>
            </div>

        </footer>

    </main>


</body>

</html>