first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,290 @@
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import React from 'react'
|
||||
import ScrollspyNav from "react-scrollspy-nav";
|
||||
export default function Nav() {
|
||||
return (
|
||||
<div className="terms_and_policy">
|
||||
<div className="container">
|
||||
<ScrollspyNav
|
||||
scrollTargetIds={["opt1", "opt2", "opt3", "opt4", "opt5", "opt6"]}
|
||||
activeNavClass="active"
|
||||
offset={170}
|
||||
scrollDuration="300"
|
||||
>
|
||||
<div className="row align-items-start">
|
||||
<div className="col-lg-4 sidenav-sticky">
|
||||
<ul className="nav nav-tabs">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link active" href="#opt1">
|
||||
1. Website terms of use
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="#opt2">
|
||||
2. Terms and conditions
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="#opt3">
|
||||
3. Privacy policy
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="#opt4">
|
||||
4. Cookie policy
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="#opt5">
|
||||
5. Third Party Links
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="#opt6">
|
||||
6. GDPR
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-8">
|
||||
{/* Tab panes */}
|
||||
<div className="tab-content ">
|
||||
<div id="opt1">
|
||||
<h2 className="font-gilroy-bold">Website Terms & Use</h2>
|
||||
<div className="update-date">LAST UPDATED: 6/26/2020</div>
|
||||
<h3>1. Introduction</h3>
|
||||
<p>
|
||||
We have taken a number of steps to comply with the GDPR.
|
||||
For more details about our compliance and how we handle
|
||||
your data please check our latest legal documents below:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Privacy policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Terms and conditions</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>2. About us</h3>
|
||||
<p>
|
||||
When you use Ticket Tailor for selling tickets and
|
||||
collecting data from your attendees you are the “data
|
||||
controller” of all your attendees’ data. We are a “data
|
||||
processor”, which means that we won’t do anything with
|
||||
your attendees’ data other than what you need us to in
|
||||
order to provide our service. We won’t be sending your
|
||||
attendees any marketing emails, sharing their data with
|
||||
anyone and if you want us to delete the data, just ask.
|
||||
It’s your data. 100
|
||||
</p>
|
||||
<h3>3. Accessing our Website</h3>
|
||||
<p>
|
||||
The servers and databases that power Ticket Tailor are
|
||||
located in the EU in Ireland. We inevitably use a small
|
||||
number of third parties, some of which are outside of the
|
||||
EU, to provide our ticketing service and we have contracts
|
||||
with each of them that oblige them to comply with the
|
||||
GDPR. You can find the full list of these third parties
|
||||
and what we use them for here.
|
||||
</p>
|
||||
</div>
|
||||
<div id="opt2">
|
||||
<h2 className="font-gilroy-bold">Terms & Conditions</h2>
|
||||
<div className="update-date">LAST UPDATED: 6/26/2020</div>
|
||||
<h3>1. Introduction</h3>
|
||||
<p>
|
||||
This page, together with our Privacy Policy and the
|
||||
Website Terms of Use tells you information about us and
|
||||
the legal terms and conditions (the "Terms") on which we
|
||||
make available to you our online ticket-selling solution
|
||||
(the "Service").
|
||||
</p>
|
||||
<h3>2. Information about us</h3>
|
||||
<p>
|
||||
Tickettailor.com and buytickets.at and any of their
|
||||
sub-domains is a site operated by Ticket Tailor, which is
|
||||
the trading name of Zimma Ltd ("we", “our”, “us”). We are
|
||||
registered in England and Wales under company number
|
||||
07583551 and have our registered office at Unit 6, 14A
|
||||
Andre St, London, E8 2AA. Our VAT number is GB184622203.
|
||||
</p>
|
||||
<p>
|
||||
You can contact us by emailing{" "}
|
||||
<a href="#">hi@deski.com</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div id="opt3">
|
||||
<h2 className="font-gilroy-bold">Privacy policy</h2>
|
||||
<div className="update-date">LAST UPDATED: 6/26/2020</div>
|
||||
<h3>1. Introduction</h3>
|
||||
<p>
|
||||
We have taken a number of steps to comply with the GDPR.
|
||||
For more details about our compliance and how we handle
|
||||
your data please check our latest legal documents below:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Privacy policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Terms and conditions</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>2. About us</h3>
|
||||
<p>
|
||||
When you use Ticket Tailor for selling tickets and
|
||||
collecting data from your attendees you are the “data
|
||||
controller” of all your attendees’ data. We are a “data
|
||||
processor”, which means that we won’t do anything with
|
||||
your attendees’ data other than what you need us to in
|
||||
order to provide our service. We won’t be sending your
|
||||
attendees any marketing emails, sharing their data with
|
||||
anyone and if you want us to delete the data, just ask.
|
||||
It’s your data. 100
|
||||
</p>
|
||||
<h3>3. Accessing our Website</h3>
|
||||
<p>
|
||||
The servers and databases that power Ticket Tailor are
|
||||
located in the EU in Ireland. We inevitably use a small
|
||||
number of third parties, some of which are outside of the
|
||||
EU, to provide our ticketing service and we have contracts
|
||||
with each of them that oblige them to comply with the
|
||||
GDPR. You can find the full list of these third parties
|
||||
and what we use them for here.
|
||||
</p>
|
||||
</div>
|
||||
<div id="opt4">
|
||||
<h2 className="font-gilroy-bold">Cookie policy</h2>
|
||||
<div className="update-date">LAST UPDATED: 6/26/2020</div>
|
||||
<h3>1. Introduction</h3>
|
||||
<p>
|
||||
We have taken a number of steps to comply with the GDPR.
|
||||
For more details about our compliance and how we handle
|
||||
your data please check our latest legal documents below:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Privacy policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Terms and conditions</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>2. About us</h3>
|
||||
<p>
|
||||
When you use Ticket Tailor for selling tickets and
|
||||
collecting data from your attendees you are the “data
|
||||
controller” of all your attendees’ data. We are a “data
|
||||
processor”, which means that we won’t do anything with
|
||||
your attendees’ data other than what you need us to in
|
||||
order to provide our service. We won’t be sending your
|
||||
attendees any marketing emails, sharing their data with
|
||||
anyone and if you want us to delete the data, just ask.
|
||||
It’s your data. 100
|
||||
</p>
|
||||
<h3>3. Accessing our Website</h3>
|
||||
<p>
|
||||
The servers and databases that power Ticket Tailor are
|
||||
located in the EU in Ireland. We inevitably use a small
|
||||
number of third parties, some of which are outside of the
|
||||
EU, to provide our ticketing service and we have contracts
|
||||
with each of them that oblige them to comply with the
|
||||
GDPR. You can find the full list of these third parties
|
||||
and what we use them for here.
|
||||
</p>
|
||||
</div>
|
||||
<div id="opt5">
|
||||
<h2 className="font-gilroy-bold">Third Party Links</h2>
|
||||
<div className="update-date">LAST UPDATED: 6/26/2020</div>
|
||||
<h3>1. Introduction</h3>
|
||||
<p>
|
||||
We have taken a number of steps to comply with the GDPR.
|
||||
For more details about our compliance and how we handle
|
||||
your data please check our latest legal documents below:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Privacy policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Terms and conditions</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>2. About us</h3>
|
||||
<p>
|
||||
When you use Ticket Tailor for selling tickets and
|
||||
collecting data from your attendees you are the “data
|
||||
controller” of all your attendees’ data. We are a “data
|
||||
processor”, which means that we won’t do anything with
|
||||
your attendees’ data other than what you need us to in
|
||||
order to provide our service. We won’t be sending your
|
||||
attendees any marketing emails, sharing their data with
|
||||
anyone and if you want us to delete the data, just ask.
|
||||
It’s your data. 100
|
||||
</p>
|
||||
<h3>3. Accessing our Website</h3>
|
||||
<p>
|
||||
The servers and databases that power Ticket Tailor are
|
||||
located in the EU in Ireland. We inevitably use a small
|
||||
number of third parties, some of which are outside of the
|
||||
EU, to provide our ticketing service and we have contracts
|
||||
with each of them that oblige them to comply with the
|
||||
GDPR. You can find the full list of these third parties
|
||||
and what we use them for here.
|
||||
</p>
|
||||
</div>
|
||||
<div id="opt6">
|
||||
<h2 className="font-gilroy-bold">GDPR</h2>
|
||||
<div className="update-date">LAST UPDATED: 6/26/2020</div>
|
||||
<h3>1. Introduction</h3>
|
||||
<p>
|
||||
We have taken a number of steps to comply with the GDPR.
|
||||
For more details about our compliance and how we handle
|
||||
your data please check our latest legal documents below:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Privacy policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Terms and conditions</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>2. About us</h3>
|
||||
<p>
|
||||
When you use Ticket Tailor for selling tickets and
|
||||
collecting data from your attendees you are the “data
|
||||
controller” of all your attendees’ data. We are a “data
|
||||
processor”, which means that we won’t do anything with
|
||||
your attendees’ data other than what you need us to in
|
||||
order to provide our service. We won’t be sending your
|
||||
attendees any marketing emails, sharing their data with
|
||||
anyone and if you want us to delete the data, just ask.
|
||||
It’s your data. 100
|
||||
</p>
|
||||
<h3>3. Accessing our Website</h3>
|
||||
<p>
|
||||
The servers and databases that power Ticket Tailor are
|
||||
located in the EU in Ireland. We inevitably use a small
|
||||
number of third parties, some of which are outside of the
|
||||
EU, to provide our ticketing service and we have contracts
|
||||
with each of them that oblige them to comply with the
|
||||
GDPR. You can find the full list of these third parties
|
||||
and what we use them for here.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.tab-content */}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollspyNav>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
export default function TeamDetails({data}) {
|
||||
const SliderContent = [
|
||||
{
|
||||
bigImage: "img_104",
|
||||
name: data.name || data.title || data.designation || ' Single Profile',
|
||||
designation: data.designation || "Senior Product Designer",
|
||||
aboutDetails: `Lorem ipsum dolor amet, consetre adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dole magna aliqua. Ut enim`,
|
||||
Experience: ` Lorem ipsum dolor amet, consetre adipiscing elit, sed do eiusmod
|
||||
tempor incididunt`,
|
||||
social: [
|
||||
{
|
||||
icon: "fa fa-facebook",
|
||||
link: "https://www.facebook.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa fa-twitter",
|
||||
link: "https://twitter.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa fa-dribbble",
|
||||
link: "https://dribbble.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa fa-linkedin",
|
||||
link: "https://www.linkedin.com/",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{SliderContent.map((val, i) => (
|
||||
<div className="main-bg d-lg-flex align-items-center" key={i}>
|
||||
<div className="img-meta">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content',objectFit:'cover'}}
|
||||
src={`/images/media/${data.img}.png`}
|
||||
alt="team"
|
||||
className="w-100"
|
||||
/>
|
||||
</div>
|
||||
{/* End img-meta */}
|
||||
|
||||
<div className="text-wrapper">
|
||||
<div className="name font-gilroy-bold">{val.name}</div>
|
||||
<div className="position">{val.designation}</div>
|
||||
<h6 className="font-gilroy-bold">ABOUT ME</h6>
|
||||
<p className="pb-45">{val.aboutDetails}</p>
|
||||
<h6 className="font-gilroy-bold">Experties</h6>
|
||||
<p className="pb-45">{val.Experience}</p>
|
||||
<h6 className="font-gilroy-bold">FOLLOW & CONTACT</h6>
|
||||
<ul className="social-icon d-flex pt-15">
|
||||
{val.social.map((social, i) => (
|
||||
<li key={i}>
|
||||
<a href={social.link} target="_blank" rel="noreferrer">
|
||||
<i className={social.icon}></i>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.text-wrapper */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
export default function TeamDetailsSlider({data}) {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrow: true,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
adaptiveHeight: true,
|
||||
};
|
||||
|
||||
const SliderContent = [
|
||||
{
|
||||
bigImage: data.img,
|
||||
name: data.name || data.title || data.designation || ' Single Profile',
|
||||
designation: data.designation || "Senior Product Designer",
|
||||
aboutDetails: `Lorem ipsum dolor amet, consetre adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dole magna aliqua. Ut enim`,
|
||||
Experience: ` Lorem ipsum dolor amet, consetre adipiscing elit, sed do eiusmod
|
||||
tempor incididunt`,
|
||||
social: [
|
||||
{
|
||||
icon: "fa fa-facebook",
|
||||
link: "https://www.facebook.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa fa-twitter",
|
||||
link: "https://twitter.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa fa-dribbble",
|
||||
link: "https://dribbble.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa fa-linkedin",
|
||||
link: "https://www.linkedin.com/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
bigImage: "img_104",
|
||||
name: "Erin Ferdosi",
|
||||
designation: "Software Engineer",
|
||||
aboutDetails: `Commonly used in the graphic, print & publishing industris for previewing visual mockups.`,
|
||||
Experience: `You will be creating the docs in this directory. The root directory may contain other files.`,
|
||||
social: [
|
||||
{
|
||||
icon: "fa fa-dribbble",
|
||||
link: "https://dribbble.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa fa-linkedin",
|
||||
link: "https://www.linkedin.com/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
bigImage: "img_106",
|
||||
name: "Khairan Bashir",
|
||||
designation: "Front-end Engineer",
|
||||
aboutDetails: `You will be creating the docs in this directory. The root directory may contain other files.`,
|
||||
Experience: `Commonly used in the graphic, print & publishing industris for previewing visual mockups.`,
|
||||
social: [
|
||||
{
|
||||
icon: "fa fa-facebook",
|
||||
link: "https://www.facebook.com/",
|
||||
},
|
||||
{
|
||||
icon: "fa fa-twitter",
|
||||
link: "https://twitter.com/",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Slider {...settings}>
|
||||
{SliderContent.map((val, i) => (
|
||||
<div className="main-bg d-lg-flex align-items-center" key={i}>
|
||||
<div className="img-meta">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={`/images/media/${val.bigImage}.png`}
|
||||
alt="team"
|
||||
className="w-100"
|
||||
/>
|
||||
</div>
|
||||
{/* End img-meta */}
|
||||
|
||||
<div className="text-wrapper">
|
||||
<div className="name font-gilroy-bold">{val.name}</div>
|
||||
<div className="position">{val.designation}</div>
|
||||
<h6 className="font-gilroy-bold">ABOUT ME</h6>
|
||||
<p className="pb-45">{val.aboutDetails}</p>
|
||||
<h6 className="font-gilroy-bold">Experties</h6>
|
||||
<p className="pb-45">{val.Experience}</p>
|
||||
<h6 className="font-gilroy-bold">FOLLOW & CONTACT</h6>
|
||||
<ul className="social-icon d-flex pt-15">
|
||||
{val.social.map((social, i) => (
|
||||
<li key={i}>
|
||||
<a href={social.link} target="_blank" rel="noreferrer">
|
||||
<i className={social.icon}></i>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* /.text-wrapper */}
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { TeamContent } from "@/data/team";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const TeamFive = () => {
|
||||
return (
|
||||
<>
|
||||
{TeamContent.map((item, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={item.animationDelay}
|
||||
key={i}
|
||||
>
|
||||
<Link href={`/teams/${item.id}`} className="team-member">
|
||||
<div className="img-holder">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}} src={`/images/media/${item.img}.png`} alt="team" />
|
||||
</div>
|
||||
<h6 className="name">{item.name}</h6>
|
||||
<div className="position">{item.designation}</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamFive;
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { TeamContentTwo } from "@/data/team";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const TeamFour = () => {
|
||||
return (
|
||||
<>
|
||||
{TeamContentTwo.map((item, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={item.animationDelay}
|
||||
key={i}
|
||||
>
|
||||
<Link href={`/teams/${item.id}`} className="team-member">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}} src={`/images/media/${item.img}.png`} alt="team" />
|
||||
<div className="name">{item.name}</div>
|
||||
<div className="position">{item.designation}</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamFour;
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { TeamContentFour } from "@/data/team";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const TeamOne = () => {
|
||||
return (
|
||||
<>
|
||||
{TeamContentFour.map((item, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={item.animationDelay}
|
||||
key={i}
|
||||
>
|
||||
<Link
|
||||
|
||||
href={`/team-details-v2/${item.id}`}
|
||||
className="team-member team-block-one mb-50"
|
||||
>
|
||||
<div className="info">
|
||||
<div className="desig">{item.designation}</div>
|
||||
<div className="name">{item.name}</div>
|
||||
</div>
|
||||
<div className="img-meta">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}} src={`/images/media/${item.img}.png`} alt="team" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamOne;
|
||||
@@ -0,0 +1,63 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Link from "next/link";
|
||||
import { TeamContentFive } from "@/data/team";
|
||||
|
||||
export default function TeamSlider() {
|
||||
|
||||
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrow: true,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{TeamContentFive.map((item, i) => (
|
||||
<div
|
||||
className="item"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={item.animationDelay}
|
||||
key={i}
|
||||
>
|
||||
<Link href={`/team-details-v2/${item.id}`} className="team-member team-block-one">
|
||||
<div className="info">
|
||||
<div className="desig">{item.designation}</div>
|
||||
<div className="name">{item.name}</div>
|
||||
</div>
|
||||
<div className="img-meta">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}} src={`/images/media/${item.img}.png`} alt="team" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import { All } from "@/data/team";
|
||||
|
||||
|
||||
|
||||
const TeamThree = () => {
|
||||
|
||||
const TabListContent = ["All", "Leadership", "Designer", "Developer", "Marketing"];
|
||||
const [currentCategory, setCurrentCategory] = useState('All')
|
||||
const [fitteredItems, setFitteredItems] = useState([])
|
||||
useEffect(() => {
|
||||
if (currentCategory == 'All') {
|
||||
setFitteredItems(All)
|
||||
|
||||
} else {
|
||||
setFitteredItems(All.filter(elm=>elm.category == currentCategory))
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}, [currentCategory])
|
||||
return (
|
||||
<>
|
||||
<Tabs>
|
||||
<TabList className="controls d-flex align-items-center justify-content-center mb-100 md-mb-60">
|
||||
{TabListContent.map((tab, i) => (
|
||||
<Tab onClick={()=>setCurrentCategory(tab)} key={i}>
|
||||
<button type="button" className="control">
|
||||
{tab}
|
||||
</button>
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
{/* End .Tablist */}
|
||||
<div>
|
||||
<div className="mixitUp-container">
|
||||
{fitteredItems.map((item, i) => (
|
||||
<Link href={`/teams/${item.id}`} className="mix" key={i}>
|
||||
<div className="team-member">
|
||||
<Image width={181} height={181} src={`/images/media/${item.img}.png`} alt="media" />
|
||||
<h4>{item.title}</h4>
|
||||
<strong>{item.designation}</strong>
|
||||
</div>
|
||||
{/* /.team-member */}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<div className="gap"></div>
|
||||
<div className="gap"></div>
|
||||
<div className="gap"></div>
|
||||
</div>
|
||||
{/* /.mixitUp-container */}
|
||||
</div>
|
||||
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamThree;
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { TeamContentThree } from "@/data/team";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const TeamTwo = () => {
|
||||
return (
|
||||
<>
|
||||
{TeamContentThree.map((item, i) => (
|
||||
<div
|
||||
className="col-lg-4 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
data-aos-delay={item.animationDelay}
|
||||
key={i}
|
||||
>
|
||||
<Link
|
||||
href={`/teams/${item.id}`}
|
||||
className="team-member team-block-one mb-50"
|
||||
>
|
||||
<div className="img-meta">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}} src={`/images/media/${item.img}.png`} alt="team" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<div className="desig">{item.designation}</div>
|
||||
<div className="name">{item.name}</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamTwo;
|
||||
Reference in New Issue
Block a user