1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / smartweb / priyoholidays.com / src / components / pages / About /
Filename : TripPlan.jsx
back
import PrimaryButton from '@/components/buttons/PrimaryButton'
import cn from '@/helpers/cn'
import { Flex } from 'antd'
import Image from 'next/image'
import React from 'react'

export default function TripPlan() {
    return (
        <div className='py-12 md:py-24 relative'>
            <div className='hx-container grid items-center grid-cols-1 lg:grid-cols-2 gap-12'>
                <div className='order-2 lg:order-1 relative h-full min-h-[700px]'>
                    <Image src='/assets/images/aboutus/about_3_1.jpg' alt='About Image 1' className='rounded-2xl absolute left-0 top-0' width={350} height={350} />
                    <Image
                        src='/assets/images/aboutus/about_3_2.jpg'
                        alt='About Image 2'
                        className='rounded-2xl absolute right-0 top-1/2 -translate-y-1/2 border-4 border-white'
                        width={350}
                        height={350}
                    />
                    <Image
                        src='/assets/images/aboutus/about_3_3.jpg'
                        alt='About Image 3'
                        className='rounded-2xl animate-slide absolute left-14 bottom-0 border-4 border-white'
                        width={350}
                        height={350}
                    />
                </div>
                {/*  */}
                <div className='order-1 lg:order-2 text-gray-800'>
                    <h3 className={cn('text-3xl md:text-4xl')}>Let’s Go Together</h3>
                    <h2 className='text-4xl md:text-5xl font-semibold mt-1'>
                        Plan Your Trip
                        <br />
                        With us
                    </h2>
                    <p className='my-8 text-lg'>
                        There are many variations of passages of available but the majority have suffered alteration in some form, by injected hum randomised words which don’t look even slightly.
                    </p>
                    <Flex justify='center' align='center' gap={20} className='w-3/4'>
                        <div className='bg-primary hover:bg-primary-dark p-6 rounded-full transition-colors duration-500 group'>
                            <svg className='transition-transform duration-300 group-hover:scale-x-[-1]' width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'>
                                <path
                                    d='M24.958 14.7871C24.7011 15.0309 24.3576 15.167 24.0001 15.167C23.6427 15.167 23.2992 15.0309 23.0423 14.7871C20.6889 12.5426 17.5353 10.0351 19.0733 6.39479C19.9048 4.42649 21.9009 3.16699 24.0001 3.16699C26.0993 3.16699 28.0953 4.42649 28.9269 6.39479C30.4629 10.0306 27.3171 12.5503 24.958 14.7871Z'
                                    stroke='white'
                                    strokeWidth='1.5'
                                />
                                <path d='M24 8.5H24.012' stroke='white' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
                                <path
                                    d='M6.66666 29.833C8.8758 29.833 10.6667 28.0421 10.6667 25.833C10.6667 23.6239 8.8758 21.833 6.66666 21.833C4.45752 21.833 2.66666 23.6239 2.66666 25.833C2.66666 28.0421 4.45752 29.833 6.66666 29.833Z'
                                    stroke='white'
                                    strokeWidth='1.5'
                                    strokeLinecap='round'
                                    strokeLinejoin='round'
                                />
                                <path
                                    d='M14.6667 9.83301H12.6667C10.0893 9.83301 8 11.6239 8 13.833C8 16.0422 10.0893 17.833 12.6667 17.833H16.6667C19.244 17.833 21.3333 19.6238 21.3333 21.833C21.3333 24.0422 19.244 25.833 16.6667 25.833H14.6667'
                                    stroke='white'
                                    strokeWidth='1.5'
                                    strokeLinecap='round'
                                    strokeLinejoin='round'
                                />
                            </svg>
                        </div>
                        <Flex vertical justify='center' gap={4}>
                            <p className='text-xl font-[600]'>Exclusive Trip</p>
                            <p className='text-lg'>There are many variations of passages of available but the majority.</p>
                        </Flex>
                    </Flex>
                    <Flex justify='center' align='center' gap={20} className='w-3/4 mt-6'>
                        <div className='bg-primary hover:bg-primary-dark p-6 rounded-full transition-colors duration-500 group'>
                            <svg className='transition-transform duration-300 group-hover:scale-x-[-1]' width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'>
                                <path d='M16 29.833L13.3333 21.833H2.66666L5.33332 29.833H16ZM16 29.833H21.3333' stroke='white' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
                                <path
                                    d='M16 17.833V17.1663C16 14.6522 16 13.3951 15.2189 12.6141C14.4379 11.833 13.1808 11.833 10.6667 11.833C8.15252 11.833 6.89544 11.833 6.1144 12.6141C5.33334 13.3951 5.33334 14.6522 5.33334 17.1663V17.833'
                                    stroke='white'
                                    strokeWidth='1.5'
                                    strokeLinecap='round'
                                    strokeLinejoin='round'
                                />
                                <path
                                    d='M25.3333 17.8337C25.3333 19.3065 24.1395 20.5003 22.6667 20.5003C21.1939 20.5003 20 19.3065 20 17.8337C20 16.3609 21.1939 15.167 22.6667 15.167C24.1395 15.167 25.3333 16.3609 25.3333 17.8337Z'
                                    stroke='white'
                                    strokeWidth='1.5'
                                />
                                <path
                                    d='M13.3333 5.83366C13.3333 7.30642 12.1394 8.50033 10.6667 8.50033C9.19391 8.50033 8 7.30642 8 5.83366C8 4.3609 9.19391 3.16699 10.6667 3.16699C12.1394 3.16699 13.3333 4.3609 13.3333 5.83366Z'
                                    stroke='white'
                                    strokeWidth='1.5'
                                />
                                <path
                                    d='M18.6667 23.833H26.6667C28.1395 23.833 29.3333 25.0269 29.3333 26.4997V27.1663C29.3333 28.6391 28.1395 29.833 26.6667 29.833H25.3333'
                                    stroke='white'
                                    strokeWidth='1.5'
                                    strokeLinecap='round'
                                />
                            </svg>
                        </div>
                        <Flex vertical justify='center' gap={4}>
                            <p className='text-xl font-[600]'>Professional Guide</p>
                            <p className='text-lg'>There are many variations of passages of available but the majority.</p>
                        </Flex>
                    </Flex>
                    <PrimaryButton className='mt-8 mx-auto md:mx-0'>Learn More</PrimaryButton>
                </div>
            </div>
        </div>
    )
}