'use client'
import Link from 'next/link'

export default function Section1() {

  return (
    <>
      <div className="about6-section-area sp2">
        <div className="container">
          <div className="row d-flex align-items-stretch">
            <div className="col-lg-5">
               <div className="row h-100">
                  <div className="flex_column av-cx34h4-a8d3062fb9de0a0faadd0da67fb825e0 av_one_half avia-builder-el-0 el_before_av_one_half avia-builder-el-first first flex_column_div av-zero-column-padding h-100">
                    <section className="avia_codeblock_section avia_code_block_0 h-100" itemScope itemType="https://schema.org/CreativeWork">
                      <div className="avia_codeblock h-100" itemProp="text">
                        <div style={{
                          position: "relative",
                          overflow: "hidden",
                          width: "100%",
                          height: "100%",
                          paddingTop: "0px",
                        }}>
                          <iframe
                              title="Donation form powered by Zeffy"
                              style={{
                                  position: "absolute",
                                  border: "0",
                                  top: "0",
                                  left: "0",
                                  bottom: "0",
                                  right: "0",
                                  width: "100%",
                                  height: "100%",
                                        }}
                                        data-src="https://www.zeffy.com/en-CA/embed/ticketing/e47157fc-9a22-45ae-b295-e5f924a111d4"
                                        allowPaymentRequest
                                        allowTransparency
                                        scrolling="no"
                                        src="https://www.zeffy.com/en-CA/embed/ticketing/e47157fc-9a22-45ae-b295-e5f924a111d4"
                                        className="lazyloaded"
                                        data-load-mode="1"
                                    ></iframe>

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

            <div className="col-lg-7">
              <div className="h-100 w-100">
                <div className="event2-section-area p-3">
                  <div className="container">

                    <div className="col-lg-10 m-auto">
                      <div className="space24" />
                      <div className="event2-header  heading4 space-margin60 ">
                        <h2>ANNUAL MEMBERSHIP - 2024</h2>
                        <div className="space18" />
                        <p>By Tamil Cultural Association of Waterloo Region</p>
                        <div className='text-start' />
                      </div>
                    </div>

               
                    <div className="row">
                      <div className="col-lg-12" data-aos="fade-up" data-aos-duration={1000}>

                        <div>

                              <div className="event-widget-area">
                                <div className="row">
                                  <div className="col-lg-10 m-auto">
                                    <div className="event2-boxarea box1">
                                      {/* <div className="col-lg-12">
                                        <div className="img1">
                                          <img src="/assets/img/all-images/event/event-img1.png" alt="" />
                                        </div>
                                      </div> */}
                                      {/* <div className="space18" />
                                      <div className="space18" /> */}
                                      <div className="col-lg-12">
                                        <div className="content-area text-start">
                                          <ul>
                                            <div className="space18" />
                                            <div className="event2-header heading4 space-margin60 mb-4">
                                              <p>Thank you very much for joining the TCA family. With this membership you and your family are opening yourselves up to a series of programs and services offered by us. As members you will also receive admission to some free events and discounts on tickets. Community volunteer and networking will be part of the package.</p>
                                              <div className="space18" />
                                              <p>Please note that our memberships are renewable each year during the month of January.  The membership fee covers the calendar year, January 01 to December 31. We invite you to purchase your membership in the month of January to get the most value. Membership card is also available for print.  The fee for your family membership or single person is $20 . Student under 18 is $15.</p>
                                              <div className="space18" />
                                              <p>Membership period:  January 1st to December 31st.</p>
                                              <div className="space18" />
                                              <p>Tamil Cultural Association of Waterloo Region is registered non profit community organisation.  Ontario Corporation # 1509837. It was established in 1989 in the region of Waterloo, Ontario, Canada.  Visit our website for more information.</p>
                                            
                                               <div className="space18" />
                                                  <p>
                                                    Note: Zeffy is a third party Canadian payment platform. Accessing will be subjected to Zeffy’s terms and conditions policy.
                                                  </p>
                                         
                                            </div>
                                          </ul>
                                      
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                               
                                </div>
                              </div>
                           
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
