'use client'
import CountUp from 'react-countup'
import Link from 'next/link'

export default function AboutSection() {
    return (
        <>

            <div className="about3-section-area sp4">
                <div className="container">
                    <div className="row align-items-center justify-content-between  gx-5">
                        <div className='col-lg-10'>
                            <div className='row align-items-center justify-content-between'>
                                <div className="col-lg-6">
                                    <div className="about-images-area">
                                        {/* <img src="/assets/img/elements/elements14.png" alt="" className="elements14" /> */}
                                        {/* <div className="row align-items-center">
                                            <div className="col-lg-6 col-md-6">
                                                <div className="img1 image-anime reveal">
                                                    <img src="/assets/img/all-images/about/about-img4.png" alt="" />
                                                </div>
                                                <div className="space24 d-md-none d-block" />
                                            </div>
                                            <div className="col-lg-6 col-md-6">
                                                <div className="img1 image-anime reveal">
                                                    <img src="/assets/img/all-images/about/about-img5.png" alt="" />
                                                </div>
                                                <div className="space24" />
                                                <div className="img1 image-anime reveal">
                                                    <img src="/assets/img/all-images/about/about-img6.png" alt="" />
                                                </div>
                                            </div>
                                        </div> */}
                                        <div className="img2">
                                            <img src="/assets/img/home/about/about.webp" alt="" style={{ width: "100%" }} />
                                        </div>
                                        {/* <div className="about3-images">
								
								<div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
									<img src="/assets/img/home/about/big-circle.webp" alt="" />
								</div>
								
								<div className="img3" data-aos="zoom-in" data-aos-duration={1200}>
									<img src="/assets/img/home/about/small-circle-2.webp" alt="" />
								</div>
							</div> */}
                                    </div>
                                </div>
                                <div className="col-lg-6">
                                    <div className="about-header heading5">
                                        {/* <h5 data-aos="fade-left" data-aos-duration={800}>about our Designer conferences</h5> */}
                                        {/* <div className="space18" /> */}
                                        <h2 className="text-anime-style-3">Welcome to TCA website</h2>
                                        <div className="space18" />
                                        <p data-aos="fade-left" data-aos-duration={900}>
                                            Learn Tamil Arts, Culture and Heritage and events in and around Waterloo – Guelph Region in the province of Ontario, Canada.
                                        </p>

                                        <div className="space8" />
                                        <p data-aos="fade-left" data-aos-duration={900}>
                                            The website has a wealth of information that would interest you.
                                        </p>

                                        <div className="space8" />
                                        <p data-aos="fade-left" data-aos-duration={900}>
                                            Our main goal is to expose local Tamil culture to others and also for next generation of Canadians to understand who we are in the cultural mosaic.
                                        </p>

                                        <div className="space12" />
                                        <p data-aos="fade-left" data-aos-duration={900}>
                                            We strive to bring together the Tamil community through festivals, workshops, and cultural activities. Our events showcase traditional dance, music, literature, and cuisine to celebrate Tamil heritage. By participating, you become part of preserving and promoting Tamil identity for future generations.
                                        </p>

                                        {/* <div className="counter-area" data-aos="fade-left" data-aos-duration={1000}>
                                            <div className="counter-box">
                                                <h3><CountUp className="odometer" enableScrollSpy={true} end={250} />+</h3>
                                                <div className="space18" />
                                                <p>Our Journalist</p>
                                            </div>
                                            <div className="counter-box">
                                                <h3><CountUp className="odometer" enableScrollSpy={true} end={15} />+</h3>
                                                <div className="space18" />
                                                <p>Our Speaker</p>
                                            </div>
                                            <div className="counter-box" style={{ border: 'none' }}>
                                                <h3><CountUp className="odometer" enableScrollSpy={true} end={7} />K+</h3>
                                                <div className="space18" />
                                                <p>Attendees</p>
                                            </div>
                                        </div> */}
                                        <div className="space32" />
                                        <div className="btn-area1" data-aos="fade-left" data-aos-duration={1200}>
                                            <Link href="/about/" className="vl-btn3">know More</Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='col-2 ad-banner'>
                            <div className="memory-boxarea pl-3">

                                <div className="img1 image-new" data-aos="zoom-in" data-aos-duration={1000} >
                                    <img src="/assets/img/home/ad-banner/ad.webp" alt="" style={{ height: "500px", width: "100%" }} />
                                </div>
                            </div>
                        </div>

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

        </>
    )
}