143 lines
7.7 KiB
TypeScript
143 lines
7.7 KiB
TypeScript
'use client'
|
|
import { useState } from "react"
|
|
|
|
export default function Section7() {
|
|
const [isTab, setIsTab] = useState(1)
|
|
const handleTab = (i: number) => {
|
|
setIsTab(i)
|
|
}
|
|
return (
|
|
<>
|
|
|
|
<div className="attent1-section-area sp6">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-11 m-auto">
|
|
<div className="heading8 text-center space-margin80">
|
|
<h5><img src="/assets/img/icons/sub-logo1.svg" alt="" />The Redefines Conferences</h5>
|
|
<div className="space32" />
|
|
<h2>How You Can <span>Participate</span></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="tab-container">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-1" />
|
|
<div className="col-lg-5">
|
|
<ul className="nav flex-column nav-pills" id="tab-navigation" role="tablist" aria-orientation="vertical">
|
|
<li className="nav-item" onClick={() => handleTab(1)}>
|
|
<a className={isTab == 1 ? "nav-link active" : "nav-link"} id="tab1-tab" data-bs-toggle="pill" role="tab" aria-controls="tab1" aria-selected="true">
|
|
<svg className="svg1" xmlns="http://www.w3.org/2000/svg" width={29} height={75} viewBox="0 0 29 75" fill="none">
|
|
<path d="M0.946169 36.2765C0.388977 36.997 0.388978 38.003 0.94617 38.7235L29 75L29 0L0.946169 36.2765Z" fill="white" fillOpacity="0.2" />
|
|
</svg>
|
|
<svg className="svg2" xmlns="http://www.w3.org/2000/svg" width={29} height={75} viewBox="0 0 29 75" fill="none">
|
|
<path d="M0.946169 36.2765C0.388977 36.997 0.388978 38.003 0.94617 38.7235L29 75L29 0L0.946169 36.2765Z" fill="url(#paint0_linear_2700_2802)" />
|
|
<defs>
|
|
<linearGradient id="paint0_linear_2700_2802" x1={0} y1={0} x2="50.4562" y2="19.5097" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#FF7A00" />
|
|
<stop offset={1} stopColor="#FF0000" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
Registration Form Fill Up
|
|
<span>It all starts with understanding your unique needs, Our team takes the time to learn about your goal.</span>
|
|
</a>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleTab(2)}>
|
|
<a className={isTab == 2 ? "nav-link active" : "nav-link"} id="tab2-tab" data-bs-toggle="pill" role="tab" aria-controls="tab2" aria-selected="false">
|
|
<svg className="svg1" xmlns="http://www.w3.org/2000/svg" width={29} height={75} viewBox="0 0 29 75" fill="none">
|
|
<path d="M0.946169 36.2765C0.388977 36.997 0.388978 38.003 0.94617 38.7235L29 75L29 0L0.946169 36.2765Z" fill="white" fillOpacity="0.2" />
|
|
</svg>
|
|
<svg className="svg2" xmlns="http://www.w3.org/2000/svg" width={29} height={75} viewBox="0 0 29 75" fill="none">
|
|
<path d="M0.946169 36.2765C0.388977 36.997 0.388978 38.003 0.94617 38.7235L29 75L29 0L0.946169 36.2765Z" fill="url(#paint0_linear_2700_2802)" />
|
|
<defs>
|
|
<linearGradient id="paint0_linear_2700_2802" x1={0} y1={0} x2="50.4562" y2="19.5097" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#FF7A00" />
|
|
<stop offset={1} stopColor="#FF0000" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
Invitation Card Download
|
|
<span>It all starts with understanding your unique needs, Our team takes the time to learn about your goal.</span>
|
|
</a>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleTab(3)}>
|
|
<a className={isTab == 3 ? "nav-link m-0 active" : "nav-link m-0"} id="tab3-tab" data-bs-toggle="pill" role="tab" aria-controls="tab3" aria-selected="false">
|
|
<svg className="svg1" xmlns="http://www.w3.org/2000/svg" width={29} height={75} viewBox="0 0 29 75" fill="none">
|
|
<path d="M0.946169 36.2765C0.388977 36.997 0.388978 38.003 0.94617 38.7235L29 75L29 0L0.946169 36.2765Z" fill="white" fillOpacity="0.2" />
|
|
</svg>
|
|
<svg className="svg2" xmlns="http://www.w3.org/2000/svg" width={29} height={75} viewBox="0 0 29 75" fill="none">
|
|
<path d="M0.946169 36.2765C0.388977 36.997 0.388978 38.003 0.94617 38.7235L29 75L29 0L0.946169 36.2765Z" fill="url(#paint0_linear_2700_2802)" />
|
|
<defs>
|
|
<linearGradient id="paint0_linear_2700_2802" x1={0} y1={0} x2="50.4562" y2="19.5097" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#FF7A00" />
|
|
<stop offset={1} stopColor="#FF0000" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
Join And Enjoy The Event
|
|
<span>It all starts with understanding your unique needs, Our team takes the time to learn about your goal.</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{/* Tab Content */}
|
|
<div className="col-lg-6">
|
|
<div className="tab-content" id="tab-content">
|
|
<div className={isTab == 1 ? "tab-pane fade show active" : "tab-pane fade"} id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
|
|
<div className="about3-images">
|
|
<img src="/assets/img/all-images/about/about-img10.png" alt="" className="about-img10 aniamtion-key-1" />
|
|
<div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
|
|
<img src="/assets/img/all-images/about/about-img7.png" alt="" />
|
|
</div>
|
|
<div className="img2" data-aos="zoom-in" data-aos-duration={1100}>
|
|
<img src="/assets/img/all-images/about/about-img8.png" alt="" />
|
|
</div>
|
|
<div className="img3" data-aos="zoom-in" data-aos-duration={1200}>
|
|
<img src="/assets/img/all-images/about/about-img9.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={isTab == 2 ? "tab-pane fade show active" : "tab-pane fade"} id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
|
|
<div className="about3-images">
|
|
<img src="/assets/img/all-images/about/about-img10.png" alt="" className="about-img10 aniamtion-key-1" />
|
|
<div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
|
|
<img src="/assets/img/all-images/about/about-img7.png" alt="" />
|
|
</div>
|
|
<div className="img2" data-aos="zoom-in" data-aos-duration={1100}>
|
|
<img src="/assets/img/all-images/about/about-img8.png" alt="" />
|
|
</div>
|
|
<div className="img3" data-aos="zoom-in" data-aos-duration={1200}>
|
|
<img src="/assets/img/all-images/about/about-img9.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={isTab == 3 ? "tab-pane fade show active" : "tab-pane fade"} id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
|
|
<div className="about3-images">
|
|
<img src="/assets/img/all-images/about/about-img10.png" alt="" className="about-img10 aniamtion-key-1" />
|
|
<div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
|
|
<img src="/assets/img/all-images/about/about-img7.png" alt="" />
|
|
</div>
|
|
<div className="img2" data-aos="zoom-in" data-aos-duration={1100}>
|
|
<img src="/assets/img/all-images/about/about-img8.png" alt="" />
|
|
</div>
|
|
<div className="img3" data-aos="zoom-in" data-aos-duration={1200}>
|
|
<img src="/assets/img/all-images/about/about-img9.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</>
|
|
)
|
|
}
|