1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / smartweb / priyoholidays.com / src / components / pages / Contact /
Filename : GetInTouch.jsx
back
import cn from '@/helpers/cn'
import React from 'react'
import { MdOutlinePhoneInTalk } from 'react-icons/md'
import { MdOutlineEmail } from 'react-icons/md'
import { IoLocationOutline } from 'react-icons/io5'
import Link from 'next/link'

export default function GetInTouch() {
    return (
        <section className="py-16 md:py-28">
            <div className="mx-container">
                <h1 className={cn('text-2xl md:text-4xl text-center text-gray-800')}>Get In Touch</h1>
                <h1 className="text-4xl md:text-5xl font-semibold mt-1 text-center text-gray-800">Our Home Office</h1>
            </div>
            <div
                className="hx-container gap-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center items-center mt-12">
                <div className="flex justify-start h-full items-center gap-7 border py-4 px-8 rounded-lg group">
                    <div
                        className="min-w-[72px] min-h-[72px] rounded-full flex justify-center items-center bg-primary group-hover:bg-primary-dark transition-colors duration-300">
                        <IoLocationOutline size={25}
                                           className="text-white group-hover:scale-x-[-1] transition-transform duration-300" />
                    </div>
                    <div className="flex flex-col justify-center items-start gap-1">
                        <h3 className="text-primary text-xl font-semibold">Priyo Holidays Ltd.</h3>
                        <div className="flex flex-col justify-center items-start">
                            <address> House-09, Shahajadpur, Badda, Gulshan, Dhaka-1212</address>
                        </div>
                    </div>
                </div>
                <div className="flex justify-start h-full items-center gap-7 border py-4 px-8 rounded-lg group">
                    <div
                        className="min-w-[72px] min-h-[72px] rounded-full flex justify-center items-center bg-primary group-hover:bg-primary-dark transition-colors duration-300">
                        <MdOutlinePhoneInTalk
                            size={25}
                            className="text-white group-hover:scale-x-[-1] transition-transform duration-300"
                        />
                    </div>
                    <div className="flex flex-col justify-center items-start gap-1">
                        <h3 className="text-primary text-xl font-semibold">Phone Number</h3>
                        <div className="flex flex-col justify-center items-start">
                            <Link href="#" className="link-primary text-black font-normal">
                                +8801970016228
                            </Link>
                            <Link href="#" className="link-primary text-black font-normal">
                                +02-9823328
                            </Link>
                        </div>
                    </div>
                </div>
                <div
                    className="flex justify-start h-full md:col-span-2 lg:col-span-1 items-center gap-7 border py-4 px-8 rounded-lg group">
                    <div
                        className="min-w-[72px] min-h-[72px] rounded-full flex justify-center items-center bg-primary group-hover:bg-primary-dark transition-colors duration-300">
                        <MdOutlineEmail size={25}
                                        className="text-white group-hover:scale-x-[-1] transition-transform duration-300" />
                    </div>
                    <div className="flex flex-col justify-center items-start gap-1">
                        <h3 className="text-primary text-xl font-semibold">Email Address</h3>
                        <div className="flex flex-col justify-center items-start">
                            <Link href="mailto:priyoholidays@gmail.com" className="link-primary text-black font-normal">
                                priyoholidays@gmail.com
                            </Link>
                            {/* <Link href='#' className='link-primary text-black font-normal'>
                                support@tourm.com
                            </Link> */}
                        </div>
                    </div>
                </div>
            </div>
            <div className="mx-container">
                <h2 className="text-2xl md:text-4xl font-semibold mt-14 text-center text-gray-800">
                    Sylhet Office Address :
                </h2>
            </div>
            <div
                className="hx-container gap-3 grid grid-cols-1 lg:grid-cols-5 justify-center items-center mt-8 md:mt-12">
                <div
                    className="lg:col-start-2 lg:col-span-3 flex justify-start h-full items-center gap-7 border py-4 px-8 rounded-lg group">
                    <div
                        className="min-w-[72px] min-h-[72px] rounded-full flex justify-center items-center bg-primary group-hover:bg-primary-dark transition-colors duration-300">
                        <IoLocationOutline
                            className="text-white text-2xl group-hover:scale-x-[-1] transition-transform duration-300"
                        />
                    </div>
                    <div className="flex flex-col justify-center items-start gap-1">
                        <h3 className="text-primary text-xl font-semibold">
                            Priyo Holidays Ltd.
                        </h3>
                        <div className={'flex items-center gap-x-2'}>
                            <span>Mobile</span>
                            <Link href={'tel:+8801812016228'} className={'link-primary text-black font-normal'}>+8801812016228</Link>
                        </div>
                        <address className="flex flex-col justify-center items-start">
                            Rasus-1, East Mirabazar, <br/>
                            Sylhet, Bangladesh.
                        </address>
                    </div>
                </div>
            </div>
        </section>
    )
}