inital commit
This commit is contained in:
3
templates/template_2/eventio/eventio-HTML/.eslintrc.json
Normal file
3
templates/template_2/eventio/eventio-HTML/.eslintrc.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
36
templates/template_2/eventio/eventio-HTML/.gitignore
vendored
Normal file
36
templates/template_2/eventio/eventio-HTML/.gitignore
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
34
templates/template_2/eventio/eventio-HTML/README.md
Normal file
34
templates/template_2/eventio/eventio-HTML/README.md
Normal file
@@ -0,0 +1,34 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
|
||||
|
||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
|
||||
|
||||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
@@ -0,0 +1,118 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import { bannerStates } from "../../data/bannerstate";
|
||||
import img3 from "../../public/image/about/image3.png";
|
||||
import img1 from "../../public/image/about/image1.png";
|
||||
import img2 from "../../public/image/about/image2.png";
|
||||
import rectangle from '../../public/image/about/rectangle.png'
|
||||
import aboutShape from '../../public/image/about/about-shape.png'
|
||||
import aboutCircle from '../../public/image/about/about-circle.png'
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="mt-4 md:mt-0 xl:-mt-[77px] z-20 relative max-w-[1296px] mx-auto">
|
||||
<div className="flex gap-y-10 md:gap-5 px-2 md:px-14 mx-2 xl:mx-0 flex-wrap bg-white justify-around md:my-0 rounded-none md:rounded-lg shadow-lg py-10 z-10 ">
|
||||
{bannerStates.map((item, i) => (
|
||||
<div
|
||||
className="flex w-[120px] md:w-auto flex-col items-center"
|
||||
key={item.title}
|
||||
>
|
||||
<h3
|
||||
className={`text-[#5A00CC] ${i == 0 ? "font-bold " : "font-semibold"
|
||||
} text-3xl md:text-[43px] mb-2 `}
|
||||
>
|
||||
<CountUp end={item.number} />
|
||||
<span className="primary-color">+</span>
|
||||
</h3>
|
||||
<p className="text-lg md:text-2xl after:content-[''] after:bg-[#F112A2] after:w-10 after:h-2">
|
||||
{item.title}
|
||||
</p>
|
||||
<div className="bg-[#F112A2] w-20 h-[2px] mt-4"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-[1296px] mx-auto ">
|
||||
<div className="flex flex-col-reverse mx-2 2xl:mx-0 md:flex-row pb-[70px] md:pb-[120px] md:pt-[132px] gap-7 md:gap-10 xl:gap-32 items-center ">
|
||||
<div className="hidden lg:flex relative items-center gap-5 flex-col justify-center md:flex-row">
|
||||
<div className="absolute md:-top-3 hidden md:block -right-3">
|
||||
<Image
|
||||
width={113}
|
||||
height={124}
|
||||
src={rectangle}
|
||||
alt="about image"
|
||||
/>
|
||||
</div>
|
||||
<div className=" mx-2 md:mx-0 hover:rounded-lg">
|
||||
<Image
|
||||
src={img3}
|
||||
className="imgzoom"
|
||||
height={356}
|
||||
width={306}
|
||||
alt="about image"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex rounded-lg flex-col gap-5 mb-20 md:mb-0 mx-2 md:mx-0">
|
||||
<Image
|
||||
src={img1}
|
||||
className="imgzoom"
|
||||
alt="img"
|
||||
/>
|
||||
<Image
|
||||
src={img2}
|
||||
className="imgzoom"
|
||||
alt="about image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex max-w-[526px] flex-col flex-wrap lg:col-span-6 px-3 md:px-0 mr-0 md:mr-20">
|
||||
<h2 className="text-3xl mt-16 md:mt-0 lg:text-[57px] leading-tight mb-4 md:mb-2 font-bold">
|
||||
Wolcome To Global <span className="text-[#5A00CC]">Business</span>{" "}
|
||||
Conference
|
||||
</h2>
|
||||
<p className="text-base md:text-lg mb-[32px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum
|
||||
urna sed erat tortor aliquam ipsum auctor ut. Consectetur non,
|
||||
platea id porttitor.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button className="relative rounded px-4 py-2 md:px-10 md:py-2 overflow-hidden group bg-[#5A00CC] mr-2 hover:bg-gradient-to-r hover:from-[#5A00CC] hover:to-[#5800ccc2] text-white transition-all ease-out duration-300">
|
||||
<span className="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease"></span>
|
||||
<span className="relative">Get Ticket</span>
|
||||
</button>
|
||||
|
||||
<button className="rounded-md px-4 py-2 md:px-10 md:py-3 overflow-hidden relative group cursor-pointer border-2 font-medium border-indigo-600 text-indigo-600">
|
||||
<span className="absolute w-64 h-0 transition-all duration-500 origin-center rotate-45 -translate-x-20 bg-[#5A00CC] top-1/2 group-hover:h-64 group-hover:-translate-y-32 ease"></span>
|
||||
<span className="relative text-indigo-600 transition duration-500 group-hover:text-white ease">
|
||||
Learn More
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden xl:block absolute bottom-0 left-0">
|
||||
<Image
|
||||
src={aboutShape}
|
||||
width={180}
|
||||
height={350}
|
||||
alt="shape"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden lg:block absolute right-0 top-40">
|
||||
<Image
|
||||
src={aboutCircle}
|
||||
width={60}
|
||||
height={80}
|
||||
alt="shape"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,14 @@
|
||||
import Button from '../others/Button';
|
||||
|
||||
const BookSeat = () => {
|
||||
return (
|
||||
<div className="bg-[url('/image/about/about-bg-book.png')] bg-cover bg-no-repeat">
|
||||
<div className='flex flex-col text-center justify-center items-center pt-[65px] pb-[70px] md:py-[120px]'>
|
||||
<h2 className='text-white font-bold text-4xl md:text-[57px] mb-5 md:mb-14'>Book Your Seat</h2>
|
||||
<Button name="Get Ticket" classes="text-white bg-[#F112A2]" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BookSeat;
|
||||
@@ -0,0 +1,63 @@
|
||||
import Image from "next/image";
|
||||
import { aboutBusiness } from "../../data/aboutBusiness";
|
||||
import AboutImg from "../../public/image/about/about-page-img.png";
|
||||
import AboutShape from "../../public/image/about/about-page-shape.png";
|
||||
const GlobalBusiness = () => {
|
||||
return (
|
||||
<div className="max-w-[1296px] mx-auto my-16 lg:mt-[132px] lg:pb-[140px]">
|
||||
<div className="grid grid-cols-12 mx-3 2xl:mx-0 2xl:gap-5 items-center">
|
||||
<div className="col-span-12 mx-3 xl:mx-0 flex justify-center lg:col-span-4 relative">
|
||||
<div className="absolute hidden md:left-3 lg:block -top-[150px] -left-[30px] ">
|
||||
<Image
|
||||
src={AboutImg}
|
||||
height={440}
|
||||
width={350}
|
||||
alt="about page image"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute hidden lg:block md:-top-[219px] -left-[60px]">
|
||||
<Image
|
||||
src={AboutShape}
|
||||
height={300}
|
||||
width={200}
|
||||
alt="about page image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 lg:col-span-8">
|
||||
<h2 className="mx-4 lg:mx-0 mb-7 md:mb-[41px] text-4xl md:text-[57px] leading-tight font-bold">
|
||||
Best Global <span className="text-[#F112A2]">Business</span>{" "}
|
||||
Conference
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 justify-center gap-8 xl:gap-12">
|
||||
{aboutBusiness.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="col-span-2 mx-2 h-full flex items-start gap-5 md:col-span-1 "
|
||||
>
|
||||
<div className="shadow-xl shadow-[#f112a316] w-24 px-2 py-1 rounded-lg ">
|
||||
<Image
|
||||
className=" p-5"
|
||||
src={item.img}
|
||||
alt="icon"
|
||||
width={75}
|
||||
height={75}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-lg lg:text-2xl font-bold mb-[1px] text-[#222]">
|
||||
{item.title}
|
||||
</h5>
|
||||
<p className="text-sm lg:text-lg text-[#444]">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlobalBusiness;
|
||||
@@ -0,0 +1,58 @@
|
||||
import Image from "next/image";
|
||||
import bannerImg from "../../public/image/banner/banner.png";
|
||||
import bannerShape2 from "../../public/image/banner/banner-shape2.png";
|
||||
import circleBanner from "../../public/image/banner/circle-banner.png";
|
||||
import { GoPrimitiveDot } from "react-icons/go";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const Banner = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="bg-[url('/image/banner/banner-bg.png')] bg-no-repeat bg-cover banner-bg w-full lg:h-full relative">
|
||||
<div className="hidden md:block absolute -bottom-2 z-10 right-0">
|
||||
<Image src={bannerShape2} width={800} height={1100} alt="shape" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-[1296px] mx-auto z-20 flex flex-col md:flex-row xl:min-h-[870px] h-full items-center ">
|
||||
<div className="z-10 pt-32 xl:pt-0 px-4 2xl:px-0">
|
||||
<p className="text-white text-lg md:text-2xl font-semibold mb-2 xl:mb-4 ">
|
||||
Professional
|
||||
</p>
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, scale:.8 }}
|
||||
animate={{ opacity: 1, scale:1 }}
|
||||
transition={{ duration: 1 }}
|
||||
className="font-bold leading-tight text-white text-4xl lg:text-6xl xl:text-[76px]"
|
||||
>
|
||||
Global <span className="primary-color">Business</span> Conference
|
||||
</motion.h1>
|
||||
<ul className="mt-3 md:mt-6 text-base md:text-2xl">
|
||||
<li className=" flex mb-1 md:mb-5 items-center gap-3 text-white">
|
||||
{" "}
|
||||
<GoPrimitiveDot className="text-[#F112A2]" /> 25-28 July 2022
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-white">
|
||||
{" "}
|
||||
<GoPrimitiveDot className="text-[#F112A2]" /> San Francisco,
|
||||
California
|
||||
</li>
|
||||
</ul>
|
||||
<button className="px-8 md:px-14 mt-[35px] py-2 md:py-4 lg:mb-0 hover:bg-[#F112A2] hover:text-white transition-all duration-300 rounded-md bg-white primary-color font-semibold">
|
||||
Get Ticket
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className=" z-10 h-[70%] md:pt-20 -bottom-2 relative">
|
||||
<Image src={bannerImg} alt="bannger image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute duration-1000 hidden xl:block top-36">
|
||||
<Image src={circleBanner} width={60} height={80} alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Banner;
|
||||
@@ -0,0 +1,23 @@
|
||||
import Link from "next/link";
|
||||
const TopBanner = (props) => {
|
||||
return (
|
||||
<div className="bg-[url('/image/banner/banner-bg2.png')] bg-no-repeat bg-cover relative">
|
||||
<div className="bg-gradient-to-r absolute top-0 grid-cols-12 from-[#5A00CC] to-[#B18AE1] h-full w-screen opacity-30"></div>
|
||||
<div className="flex relative z-10 max-w-[1296px] mx-auto items-center h-full pb-[62px] lg:pb-[113px] pt-[130px] lg:pt-[230px]">
|
||||
<div className="mx-5">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-[76px] mb-2 md:mb-3 text-white font-bold">
|
||||
{props.text}
|
||||
</h1>
|
||||
<p className="text-white text-base md:text-lg">
|
||||
<Link href="/">
|
||||
<a>Home </a>
|
||||
</Link>
|
||||
→ {props.indicator}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopBanner;
|
||||
@@ -0,0 +1,25 @@
|
||||
import Image from "next/image";
|
||||
import Tab from "./Tab";
|
||||
import conShape from "../../public/image/conference/conference-shape.png";
|
||||
const Conference = () => {
|
||||
return (
|
||||
<div className="relative pt-[67px] lg:pt-[123px]">
|
||||
<div className="max-w-[1296px] bg-[url('/image/conference/bg.png')] bg-conference flex flex-col items-center mx-auto">
|
||||
<h2 className="text-4xl md:text-[57px] font-bold text-center ">
|
||||
Conference <span className="text-[#5A00CC]">Schedule</span>
|
||||
</h2>
|
||||
<p className="md:max-w-md text-center text-base mx-3 md:text-lg mt-4 md:mt-[22px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum
|
||||
urna sed erat tortor aliquam ipsum
|
||||
</p>
|
||||
|
||||
<Tab />
|
||||
</div>
|
||||
<div className="absolute hidden xl:block top-0 -z-10 left-0">
|
||||
<Image src={conShape} height={550} width={380} alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Conference;
|
||||
@@ -0,0 +1,87 @@
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { conference } from "../../data/conference";
|
||||
|
||||
conference;
|
||||
const Tab = () => {
|
||||
const [currentTab, setCurrentTab] = useState("1");
|
||||
|
||||
const handleTabClick = (id) => {
|
||||
setCurrentTab(id);
|
||||
};
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<div className="max-w-[856px] mt-9 md:mt-14 mb-[70px] md:mb-[120px]">
|
||||
<div className="flex justify-center flex-wrap gap-4 mx-2 md:mx-0">
|
||||
{conference.map((speaker, i) => (
|
||||
<div
|
||||
key={i}
|
||||
id={speaker.id}
|
||||
className={`text-center md:w-[196px] p-2 px-3 md:px-10 md:py-8 cursor-pointer rounded-[10px] shadow-lg ${
|
||||
currentTab == speaker.id ? "bg-[#5A00CC]" : "bg-white"
|
||||
}`}
|
||||
onClick={() => handleTabClick(speaker.id)}
|
||||
>
|
||||
<h5
|
||||
className={`text-lg md:text-2xl font-bold mb-2 select-none ${
|
||||
currentTab === speaker.id ? "text-white" : "text-[#5A00CC]"
|
||||
}`}
|
||||
>
|
||||
{speaker.day}
|
||||
</h5>
|
||||
<p
|
||||
className={`text-sm md:text-lg select-none ${
|
||||
currentTab === speaker.id ? "text-white" : "text-black"
|
||||
}`}
|
||||
>
|
||||
{speaker.date}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="content mt-6 md:mt-[60px]">
|
||||
{conference.map((conference, i) => (
|
||||
<div key={i}>
|
||||
{currentTab === `${conference.id}` && (
|
||||
<motion.div initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }} className="flex mx-4 lg:mx-0 flex-col gap-4">
|
||||
{conference.speakers.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="bg-white p-[16px] flex items-center flex-col sm:flex-row gap-3 md:gap-8 rounded-[10px] shadow-lg"
|
||||
>
|
||||
<div className=" md:border-r max-w-xs md:pr-8 border-[#5A00CC]">
|
||||
<Image
|
||||
src={item.img}
|
||||
className="rounded-md"
|
||||
height={700}
|
||||
width={700}
|
||||
alt="conference speaker"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h6 className="text-lg mb-[3px] font-semibold">
|
||||
{item.time}
|
||||
</h6>
|
||||
<h5 className="text-xl md:text-2xl font-semibold mb-[13px] primary-color">
|
||||
{item.title}
|
||||
</h5>
|
||||
<p className="text-base md:text-lg text-[#444444]">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tab;
|
||||
@@ -0,0 +1,145 @@
|
||||
import Image from "next/image";
|
||||
import { Formik } from "formik";
|
||||
import formDots from "../../public/image/contact/form-bg-dots.png";
|
||||
const ContactForm = () => {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div>
|
||||
<div className="absolute animate-pulse top-40 left-20">
|
||||
<Image src={formDots} width={200} height={400} alt="bg dots" />
|
||||
</div>
|
||||
<div className="bg-[url('/image/contact/form-bg.png')] bg-no-repeat opacity-10 h-full w-full absolute top-0 flex items-center justify-center bg-cover"></div>
|
||||
<div className=" max-w-[1296px] mx-3 md:mx-auto h-full pt-16 md:pt-[125px] z-10 relative">
|
||||
<h2 className="text-center text-3xl md:text-[57px] font-bold mb-4 md:mb-10">
|
||||
Send <span className="text-[#F112A2]">Message</span>
|
||||
</h2>
|
||||
<p className="text-[#444] text-lg px-2 text-center mb-7 md:mb-12">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</p>
|
||||
<div className="w-full md:w-[635px] mx-auto">
|
||||
<Formik
|
||||
initialValues={{
|
||||
name: "",
|
||||
email: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
}}
|
||||
validate={(values) => {
|
||||
const errors = {};
|
||||
if (!values.email) {
|
||||
errors.email = "Email is Required";
|
||||
} else if (
|
||||
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
|
||||
) {
|
||||
errors.email = "Invalid email address";
|
||||
}
|
||||
if (!values.name) {
|
||||
errors.name = "Name is Required";
|
||||
}
|
||||
if (!values.subject) {
|
||||
errors.subject = "Subject is Required";
|
||||
}
|
||||
if (!values.message) {
|
||||
errors.message = "Message is Required";
|
||||
}
|
||||
return errors;
|
||||
}}
|
||||
onSubmit={(values, { setSubmitting }) => {
|
||||
setTimeout(() => {
|
||||
console.log(JSON.stringify(values, null, 2));
|
||||
setSubmitting(false);
|
||||
}, 400);
|
||||
}}
|
||||
>
|
||||
{({
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
/* and other goodies */
|
||||
}) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="flex flex-col">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
value={values.name}
|
||||
placeholder="Full Name"
|
||||
className="p-5 w-full shadow-lg rounded-md mt-1 mb-1 focus:outline-none"
|
||||
/>
|
||||
<span className="text-red-500 text-sm h-5">
|
||||
{" "}
|
||||
{errors.name && touched.name && errors.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<input
|
||||
type="text"
|
||||
name="email"
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
value={values.email}
|
||||
placeholder="Email"
|
||||
className="p-5 w-full shadow-lg rounded-md mt-1 mb-1 focus:outline-none"
|
||||
/>
|
||||
<span className="text-red-500 text-sm h-5">
|
||||
{" "}
|
||||
{errors.email && touched.email && errors.email}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="subject"
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
value={values.subject}
|
||||
placeholder="Subject"
|
||||
className="p-5 w-full shadow-lg rounded-md mt-1 mb-1 focus:outline-none"
|
||||
/>
|
||||
<span className="text-red-500 text-sm h-5">
|
||||
{" "}
|
||||
{errors.subject && touched.subject && errors.subject}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<textarea
|
||||
rows="8"
|
||||
onChange={handleChange}
|
||||
name="message"
|
||||
onBlur={handleBlur}
|
||||
value={values.message}
|
||||
placeholder="Type a Message"
|
||||
className=" mt-1 p-5 w-full shadow-lg rounded-md focus:outline-none"
|
||||
/>
|
||||
<span className="text-red-500 text-sm h-5">
|
||||
{" "}
|
||||
{errors.message && touched.message && errors.message}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-6 md:mt-[50px] pb-[70px] md:pb-[120px]">
|
||||
<button
|
||||
className="bg-[#F112A2] font-semibold px-12 py-4 rounded-lg text-white hover:shadow-lg hover:shadow-[#f112a360] duration-200"
|
||||
type="submit"
|
||||
>
|
||||
Contact Us
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
@@ -0,0 +1,53 @@
|
||||
import Image from "next/image";
|
||||
import { contactInfo } from "../../data/contactInfo";
|
||||
import ContactBg from "../../public/image/contact/contact-info-bg.png";
|
||||
const ContactInfo = () => {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="absolute animate-pulse top-5 right-10">
|
||||
<Image src={ContactBg} alt="bg dots" />
|
||||
</div>
|
||||
<div className="max-w-[1296px] mx-auto relative pt-16 md:pt-[125px]">
|
||||
<div className="text-center">
|
||||
<h2 className="text-center mx-3 font-bold mb-5 md:mb-6 text-3xl md:text-[57px]">
|
||||
Contact <span className="text-[#5A00CC]">Information</span>
|
||||
</h2>
|
||||
<p className=" mx-4 mb-10 md:mb-[60px] text-center text-sm md:text-lg md:mt-6">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center xl:justify-between flex-wrap md:flex-row gap-5 mb-[71px] md:mb-[120px]">
|
||||
{contactInfo.map((info) => (
|
||||
<div
|
||||
className="md:px-[30px] md:pt-[30px] md:pb-[25px] p-4 mx-3 md:mx-0 rounded-[10px] shadow-[0px_4px_23px_rgba(173,173,173,0.25)]"
|
||||
key={info.id}
|
||||
>
|
||||
<h4 className="primary-color font-semibold text-xl md:text-[32px] mb-5">
|
||||
{info.title}
|
||||
</h4>
|
||||
<ul>
|
||||
<li className="text-[#222] text-base md:text-lg">
|
||||
{" "}
|
||||
<strong>Email: </strong>
|
||||
{info.contacts.email}
|
||||
</li>
|
||||
<li className="text-[#222] text-base md:text-lg">
|
||||
{" "}
|
||||
<strong>Phone: </strong>
|
||||
{info.contacts.phone}
|
||||
</li>
|
||||
<li className="text-[#222] text-base md:text-lg">
|
||||
{" "}
|
||||
<strong>Address: </strong>
|
||||
{info.contacts.address}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ContactInfo;
|
||||
@@ -0,0 +1,44 @@
|
||||
import Image from "next/image";
|
||||
import { eventHome } from "../../data/eventhome";
|
||||
import EventShape from "../../public/image/event/event-shape.png";
|
||||
import EventShape2 from "../../public/image/event/event-shape2.png";
|
||||
|
||||
const Event = () => {
|
||||
return (
|
||||
<div className="relative bg-slate-100">
|
||||
<div className="pb-16 md:pb-[107px] pt-16 md:pt-[120px]">
|
||||
<div className="max-w-[1296px] mx-auto ">
|
||||
<div className="flex flex-col justify-center items-center ">
|
||||
<h2 className="text-4xl md:text-[57px] font-bold text-center">
|
||||
Our Event <span className="text-[#5A00CC]">Partner</span>
|
||||
</h2>
|
||||
|
||||
<p className="md:max-w-md text-center mt-4 md:mt-[23px] text-lg mx-3 z-10 md:text-lg">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum
|
||||
urna sed erat tortor aliquam ipsum
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center items-center px-5 md:px-0 md:flex-row gap-5 md:gap-4 flex-wrap mt-8 mb:mt-3 md:mt-[44px] ">
|
||||
{eventHome.map((img, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-[200px] md:w-[300] flex justify-center lg:w-auto"
|
||||
>
|
||||
<Image src={img} alt="our partner" height={80} width={306} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute hidden xl:block z-10 top-20 left-24">
|
||||
<Image src={EventShape} height={260} width={138} alt="shape" />
|
||||
</div>
|
||||
<div className="hidden xl:block absolute z-10 top-16 right-0">
|
||||
<Image src={EventShape2} height={400} width={150} alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Event;
|
||||
@@ -0,0 +1,36 @@
|
||||
import Image from "next/image";
|
||||
import { eventPricing } from "../../data/eventPricing";
|
||||
|
||||
const Event = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="min-h-[500px] bg-[url('/image/pricing/partnar-bg.png')] bg-cover bg-no-repeat h-full relative">
|
||||
<div className="max-w-[1296px] mx-auto pt-[67px] pb-[70px] lg:pb-[115px] lg:pt-[122px]">
|
||||
<div className="flex flex-col justify-center items-center ">
|
||||
<h2 className="text-3xl md:text-[57px] text-white font-bold text-center ">
|
||||
Our Event Partner{" "}
|
||||
</h2>
|
||||
|
||||
<p className="md:max-w-md text-white text-center mt-[26px] text-sm mx-3 z-10 md:text-lg ">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum
|
||||
urna sed erat tortor aliquam ipsum
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center items-center px-5 md:px-0 md:flex-row gap-7 md:gap-12 flex-wrap mt-8 mb:mt-3 md:mt-[44px] ">
|
||||
{eventPricing.map((img, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-[200px] md:w-[270] flex justify-center lg:w-auto"
|
||||
>
|
||||
<Image src={img} alt="our partner" height={80} width={272} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Event;
|
||||
@@ -0,0 +1,77 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { GoPrimitiveDot } from "react-icons/go";
|
||||
import Social from "../others/Social";
|
||||
import dots1 from "../../public/image/footer/dots1.png";
|
||||
import dots2 from "../../public/image/footer/dots2.png";
|
||||
import { footermenus } from "../../data/footermenu";
|
||||
import { Form } from "formik";
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="relative bg-[#0D0635]">
|
||||
<div className=" max-w-[1296px] mx-auto min-h-[350px]">
|
||||
<div className="absolute top-3 animate-pulse">
|
||||
<Image src={dots1} height={300} alt="footer dots" />
|
||||
</div>
|
||||
<div className="grid place-content-center xl:px-0 w-full">
|
||||
<div className="w-auto sm:px-20 md:px-32 lg:px-48 lg:bg-[url('/image/footer/footer-shape.png')] bg-no-repeat bg-left relative flex flex-col justify-center items-center bg-white px-4 rounded-md mt-[70px] mb-5 md:my-[120px] py-6 md:py-16 mx-2 md:mx-auto">
|
||||
<div className="absolute hidden md:block rounded-md top-3 right-2 animate-pulse">
|
||||
<Image src={dots2} className="rounded-md" alt="footer shape" />
|
||||
</div>
|
||||
<h4 className="text-xl md:text-[32px] font-semibold mx-2 text-center mb-4 text-[#222]">
|
||||
SUBSCRIBE TO <span className="text-[#5A00CC]">NEWSLETTER</span>
|
||||
</h4>
|
||||
<div>
|
||||
<form className="flex flex-col md:flex-row gap-2 md:px-0 max-w-md mx-auto">
|
||||
<input
|
||||
type="email"
|
||||
className="border-b py-1 w-full md:w-[250px] border-black focus:outline-none focus:border-b foucs:border-black"
|
||||
placeholder="Email"
|
||||
size={80}
|
||||
required
|
||||
/>
|
||||
<button type="submit" className="py-2 px-3 border-2 transition-all duration-300 border-[#F112A2] md:px-8 bg-[#F112A2] text-white hover:shadow-lg hover:shadow-[#f112a360]">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex mx-3 2xl:mx-0 mb-4 pl-4 pt-5 md:pl-0 md:pt-0 md:items-center flex-col sm:flex-row justify-between ">
|
||||
<div className="cursor-pointer md:-bottom-2 mb-4 md:mb-0 relative">
|
||||
<Link href="/">
|
||||
<a>
|
||||
<Image src="/icon.png" height={36} width={110} alt="logo" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="flex flex-col gap-4 sm:flex-row items-start mb-4 md:mb-0 md:items-center text-lg text-[#B3B3B3] ">
|
||||
{footermenus.map(([url, title], index) => (
|
||||
<Link key={title} href={url}>
|
||||
<li className="flex gap-4 justify-center items-center">
|
||||
<a className="cursor-pointer font-semibold">{title}</a>
|
||||
<GoPrimitiveDot
|
||||
className={`hidden md:block ${
|
||||
index == footermenus.length - 1 && "md:hidden"
|
||||
}`}
|
||||
/>
|
||||
</li>
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="flex mx-3 flex-col md:flex-row justify-between py-7 items-center">
|
||||
<p className="text-base mb-4 md:mb-0 text-[#b3b3b3]">
|
||||
© 2022 Veltio. All rights reserved
|
||||
</p>
|
||||
<Social classes="text-white" size={45} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,117 @@
|
||||
import Image from "next/image";
|
||||
import { useEffect, useState } from "react";
|
||||
import { galleryImages } from "../../data/galleryImage";
|
||||
import { MdClose } from "react-icons/md";
|
||||
import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
|
||||
const Gallery = () => {
|
||||
const [modal, setModal] = useState(false);
|
||||
const [tempImg, setTempImg] = useState({});
|
||||
|
||||
const handleImgClick = (item) => {
|
||||
setModal(true);
|
||||
setTempImg(item);
|
||||
};
|
||||
const handleRight = () => {
|
||||
const item = tempImg.id == 6 ? 1 : tempImg.id + 1;
|
||||
setTempImg(galleryImages[item - 1]);
|
||||
};
|
||||
const handleLeft = () => {
|
||||
const item = tempImg.id == 1 ? 6 : tempImg.id - 1;
|
||||
setTempImg(galleryImages[item - 1]);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (modal) {
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = "unset";
|
||||
}
|
||||
}, [modal]);
|
||||
return (
|
||||
<div className="relative">
|
||||
{modal && (
|
||||
<div
|
||||
onClick={() => setModal(!modal)}
|
||||
className="fixed top-0 w-full h-full bg-gray-400 flex items-center justify-center z-50"
|
||||
>
|
||||
<AnimatePresence>
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="relative rounded-md"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<Image
|
||||
height={800}
|
||||
width={1200}
|
||||
className={`rounded-md `}
|
||||
src={tempImg?.img}
|
||||
alt="modal"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<button
|
||||
className="absolute top-2 pinkhover right-2 p-2 bg-white rounded-full "
|
||||
onClick={() => setModal(false)}
|
||||
>
|
||||
<MdClose />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLeft}
|
||||
className="absolute pinkhover p-2 bg-white rounded-full top-[50%] left-2 "
|
||||
>
|
||||
<BsChevronLeft />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRight}
|
||||
className="absolute pinkhover p-2 bg-white rounded-full top-[50%] right-2"
|
||||
>
|
||||
<BsChevronRight />
|
||||
</button>
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute hidden md:block animate-pulse -z-10 top-5 -right-1">
|
||||
<Image
|
||||
src="/image/gallery/bg-dots-home.png"
|
||||
height={260}
|
||||
width={260}
|
||||
alt="shape"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[1296px] mx-auto mb-[70px] md:mb-[120px] mt-[66px] md:mt-[122px]">
|
||||
<h2 className="text-4xl md:text-[57px] font-bold text-center mb-6 md:mb-[37px] ">
|
||||
Our <span className="text-[#5A00CC]">Gallery</span>
|
||||
</h2>
|
||||
<p className="text-center text-lg text-[#444] mb-[35px] md:mb-[55px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</p>
|
||||
<div className="grid grid-cols-12 gap-1 md:gap-6 items-center content-center mx-2 lg:mx-0">
|
||||
{galleryImages.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="col-span-6 flex justify-center cursor-pointer lg:col-span-4"
|
||||
onClick={() => handleImgClick(item)}
|
||||
>
|
||||
<Image
|
||||
className="zoom"
|
||||
src={item.img}
|
||||
height={287}
|
||||
width={416}
|
||||
alt="gallery img"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Gallery;
|
||||
@@ -0,0 +1,133 @@
|
||||
import Image from "next/image";
|
||||
import { MdClose } from "react-icons/md";
|
||||
import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
|
||||
import { galleryPageImg } from "../../data/gallaryPageImg";
|
||||
import { useState, useEffect } from "react";
|
||||
const GalleryPage = () => {
|
||||
const [modal, setModal] = useState(false);
|
||||
const [tempImg, setTempImg] = useState({});
|
||||
|
||||
const handleImgClick = (item) => {
|
||||
setModal(true);
|
||||
setTempImg(item);
|
||||
};
|
||||
const handleRight = () => {
|
||||
const item = tempImg.id == 9 ? 1 : tempImg.id + 1;
|
||||
setTempImg(galleryPageImg[item - 1]);
|
||||
};
|
||||
const handleLeft = () => {
|
||||
const item = tempImg.id == 1 ? 9 : tempImg.id - 1;
|
||||
setTempImg(galleryPageImg[item - 1]);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (modal) {
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = "unset";
|
||||
}
|
||||
}, [modal]);
|
||||
return (
|
||||
<div className="relative">
|
||||
{modal && (
|
||||
<div onClick={()=> setModal(!modal)} className="fixed top-0 w-screen h-full bg-gray-400 flex items-center justify-center z-50">
|
||||
|
||||
<div onClick={(e) => e.stopPropagation()} className="relative rounded-md">
|
||||
<Image
|
||||
height={800}
|
||||
width={1000}
|
||||
className="rounded-md"
|
||||
src={tempImg?.img}
|
||||
alt="modal"
|
||||
/>
|
||||
<button
|
||||
className="absolute top-2 shadow-md pinkhover right-2 p-2 bg-white rounded-full "
|
||||
onClick={() => setModal(false)}
|
||||
>
|
||||
<MdClose />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLeft}
|
||||
className="absolute shadow-md pinkhover p-2 bg-white rounded-full top-[50%] left-2 "
|
||||
>
|
||||
<BsChevronLeft />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRight}
|
||||
className="absolute shadow-md pinkhover p-2 bg-white rounded-full top-[50%] right-2"
|
||||
>
|
||||
<BsChevronRight />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute top-0 right-10 animate-pulse">
|
||||
<Image
|
||||
src="/image/contact/contact-info-bg.png"
|
||||
height={550}
|
||||
width={1600}
|
||||
alt="bg dots"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-w-[1296px] mx-auto mt-16 md:mt-[120px]">
|
||||
|
||||
<div className="text-center">
|
||||
<h2 className="text-center font-bold mb-6 md:mb-10 text-4xl md:text-[57px]">
|
||||
Our <span className="text-[#5A00CC]">Gallery</span>
|
||||
</h2>
|
||||
<p className=" mx-4 mb-8 md:mb-14 text-center text-sm md:text-lg md:mt-8">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid mx-2 xl:mx-0 grid-cols-12 mb-7 md:mb-[50px] gap-4">
|
||||
{galleryPageImg.map((item) => (
|
||||
<div
|
||||
onClick={() => handleImgClick(item)}
|
||||
key={item.id}
|
||||
className={`col-span-12 sm:col-span-6 cursor-pointer md:col-span-4 ${
|
||||
item.id == 2 && "row-span-2"
|
||||
} ${item.id == 8 && "row-span-2"} ${
|
||||
item.id == 9 && "md:col-span-8"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
className="zoom"
|
||||
src={item.img}
|
||||
width={item.width}
|
||||
height={item.height}
|
||||
alt="gallery photos"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mb-[70px] md:mb-[120px] gap-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F112A2] w-7 flex justify-center text-white border border-[#F112A2]"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#F112A2] w-7 flex justify-center border border-[#F112A2]"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#F112A2] w-7 flex justify-center border border-[#F112A2]"
|
||||
>
|
||||
{" "}
|
||||
{">"}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GalleryPage;
|
||||
@@ -0,0 +1,14 @@
|
||||
import Footer from "../footer/Footer";
|
||||
import Navbar from "../navbar/Navbar";
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<main>{children}</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -0,0 +1,127 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BsChevronDown } from "react-icons/bs";
|
||||
import { HiMenu } from "react-icons/hi";
|
||||
|
||||
|
||||
const Header = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [navColor, setNavColor] = useState(false);
|
||||
const [dropdown, setDropdown] = useState(false);
|
||||
const changeNavColor = () => {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavColor(true);
|
||||
} else {
|
||||
setNavColor(false);
|
||||
}
|
||||
};
|
||||
const handleDropdownClick = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeNavColor);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`w-full fixed py-3 md:py-0 z-50 px-2 2xl:px-0 navbar ${
|
||||
navColor ? "bg-[#3D0687]" : "bg-transparent"
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-[1296px] relative z-40 mx-auto flex flex-wrap justify-between items-center">
|
||||
<Link href="/">
|
||||
<a className="flex items-center pl-2 md:pl-0">
|
||||
<Image src="/icon.png" height={36} width={112} alt="logo" />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<div
|
||||
className={` w-screen md:block md:w-auto ${
|
||||
open
|
||||
? "block absolute -left-2 h-[92vh] z-50 bg-[#5401BF] top-[52px]"
|
||||
: "hidden"
|
||||
}`}
|
||||
>
|
||||
<ul className="flex items-start px-4 md:px-0 md:items-center flex-col bg-body rounded-lg md:flex-row lg:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:gap-5">
|
||||
{[
|
||||
["/", "Home"],
|
||||
["/about", "About"],
|
||||
["/schedule", "Schedule"],
|
||||
].map(([url, title]) => (
|
||||
<li
|
||||
className="md:py-4 xl:py-9"
|
||||
key={title}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<Link href={url}>
|
||||
<a
|
||||
className="block text-white text-lg text-x py-2 pr-4 md:pl-3 rounded md:bg-transparent hover:text-primary md:p-0 dark:text-white"
|
||||
aria-current="page"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
|
||||
<li
|
||||
onClick={() => setDropdown(!dropdown)}
|
||||
className="md:py-4 xl:py-9 navitem"
|
||||
>
|
||||
<a className=" flex items-center gap-2 select-none relative cursor-pointer text-white text-lg text-x py-2 pr-4 md:pl-3 rounded md:hover:bg-transparent md:border-0 hover:text-primary md:p-0 ">
|
||||
Pages <BsChevronDown />{" "}
|
||||
</a>
|
||||
<span className="relative">
|
||||
<span
|
||||
className={`absolute dropdown bg-[#3F0985] w-40 md:top-4 xl:top-[36px] text-white text-lg ${
|
||||
dropdown ? "flex flex-col" : "hidden"
|
||||
}`}
|
||||
>
|
||||
{[
|
||||
["/speakers", "Speakers"],
|
||||
["/price", "Price"],
|
||||
["/gallery", "Gallery"],
|
||||
["/contact", "Contact Us"],
|
||||
].map(([url, title]) => (
|
||||
<Link key={title} href={url}>
|
||||
<a
|
||||
onClick={handleDropdownClick}
|
||||
className="py-2 hover:border-l-2 transition-all duration-300 border-[#F112A2] px-4 select-none hover:bg-blue-600"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className=" md:hidden mt-5">
|
||||
<Link href="/contact">
|
||||
<a className="bg-white px-6 py-2 md:px-10 md:py-4 rounded-md font-semibold text-[#F112A2] hover:bg-[#F112A2] hover:text-white duration-300">
|
||||
Book Ticket
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<Link href="/contact">
|
||||
<a className="bg-white px-10 py-4 rounded-md font-semibold text-[#F112A2] hover:bg-[#F112A2] hover:text-white duration-300">
|
||||
Book Ticket
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
className="items-center pr-2 md:pr-0 text-sm text-gray-500 rounded-lg md:hidden "
|
||||
>
|
||||
<HiMenu size={40} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,9 @@
|
||||
const Button = (props) => {
|
||||
return (
|
||||
<button className={`rounded-md px-4 hover:bg-[#F112A2] hover:text-white transition-all duration-500 py-2 xl:px-14 xl:py-[18px] font-bold ${props.classes}`}>
|
||||
{props.name}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -0,0 +1,16 @@
|
||||
import {CgFacebook} from 'react-icons/cg'
|
||||
import {AiOutlineInstagram} from 'react-icons/ai'
|
||||
import {BsTwitter} from 'react-icons/bs'
|
||||
import {TiSocialLinkedin} from 'react-icons/ti'
|
||||
const Social = (props) => {
|
||||
return (
|
||||
<div className='flex justify-center gap-4'>
|
||||
<CgFacebook className={`cursor-pointer hover:text-white hover:border-[#F112A2] duration-500 border-[1px] rounded-full p-2 transition-colors hover:bg-[#F112A2] ${props.classes}`} size={props.size} />
|
||||
<AiOutlineInstagram className={`cursor-pointer hover:text-white hover:border-[#F112A2] duration-500 border-[1px] rounded-full p-2 transition-colors hover:bg-[#F112A2] ${props.classes}`} size={props.size} />
|
||||
<BsTwitter className={`cursor-pointer hover:text-white hover:border-[#F112A2] duration-500 border-[1px] rounded-full p-2 transition-colors hover:bg-[#F112A2] ${props.classes}`} size={props.size} />
|
||||
<TiSocialLinkedin className={`cursor-pointer hover:text-white hover:border-[#F112A2] duration-500 border-[1px] rounded-full p-2 transition-colors hover:bg-[#F112A2] ${props.classes}`} size={props.size} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Social;
|
||||
@@ -0,0 +1,74 @@
|
||||
import Image from "next/image";
|
||||
import { pricing } from "../../data/price";
|
||||
import dots from "../../public/image/pricing/pricing-bg-dots.png";
|
||||
const Pricing = () => {
|
||||
return (
|
||||
<div className="relative flex items-center justify-center">
|
||||
<div className="absolute top-3 animate-pulse">
|
||||
<Image src={dots} alt="footer dots" />
|
||||
</div>
|
||||
<div className="max-w-[1296px] z-10 flex flex-col items-center mx-auto mt-[67px] md:mt-[112px] mb-[70px] md:mb-[135px]">
|
||||
<h2 className="font-bold text-2xl md:text-[57px]">
|
||||
Get Your <span className="text-[#5A00CC]">Ticket</span>
|
||||
</h2>
|
||||
<p className="md:max-w-lg mx-4 mb-9 md:mb-14 text-center mt-4 text-sm md:text-lg md:mt-[29px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum
|
||||
urna sed erat tortor aliquam ipsum
|
||||
</p>
|
||||
<div className="flex flex-col px-2 xl:px-0 items-stretch justify-center flex-wrap lg:flex-row gap-4">
|
||||
{pricing.map((item, i) => (
|
||||
<div
|
||||
className="bg-white w-[285px] md:w-[417px] shadow-[0px_4px_18px_rgba(148,148,148,0.25)] rounded-[10px] "
|
||||
key={item.title}
|
||||
>
|
||||
<div className="flex flex-col justify-between">
|
||||
<div
|
||||
className={`${
|
||||
i == 1 && "bg-[#F112A2] text-white"
|
||||
} pt-16 rounded-t-md`}
|
||||
>
|
||||
<h2
|
||||
className={`text-center font-bold text-2xl md:text-[57px] mb-3 md:mb-7 ${
|
||||
i == 1 ? "bg-[#F112A2] text-white":"primary-color"
|
||||
}`}
|
||||
>
|
||||
${item.price}
|
||||
</h2>
|
||||
<h3
|
||||
className={`text-lg md:text-3xl text-center font-semibold mb-4 md:mb-10 ${
|
||||
i == 1 ? "text-white" : "text-[#222]"
|
||||
}`}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
</div>
|
||||
{i !== 1 && (
|
||||
<div className="w-28 h-1 mx-auto bg-[#5A00CC]"></div>
|
||||
)}
|
||||
<div className="p-6 md:p-10">
|
||||
<ul className="flex flex-col gap-4 items-center my-4 md:my-8">
|
||||
{item.features.map((feature, i) => (
|
||||
<li
|
||||
className="text-[#222] text-base md:text-lg "
|
||||
key={i}
|
||||
>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex justify-center w-full">
|
||||
<button className="text-white self-end text-lg py-3 rounded-md px-4 bg-[#F112A2] hover:shadow-lg hover:shadow-[#f112a360] duration-200">
|
||||
Purchase Ticket
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pricing;
|
||||
@@ -0,0 +1,69 @@
|
||||
import { pricing } from "../../data/price";
|
||||
|
||||
const Pricing = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="bg-[url('/image/pricing/bg.png')] bg-no-repeat bg-cover">
|
||||
<div className=" max-w-[1296px] z-10 flex flex-col items-center mx-auto pt-[65px] pb-[70px] md:pt-[127px] md:pb-[120px]">
|
||||
<h2 className="text-white font-bold text-3xl md:text-[57px]">
|
||||
Get Your Ticket
|
||||
</h2>
|
||||
<p className="md:max-w-lg mx-3 mb-10 md:mb-14 text-white text-center mt-5 text-sm md:text-lg md:mt-[28px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum
|
||||
urna sed erat tortor aliquam ipsum
|
||||
</p>
|
||||
<div className="flex flex-wrap max-w-full px-3 xl:px-0 justify-center gap-4">
|
||||
{pricing.map((item, i) => (
|
||||
<div
|
||||
className=" bg-white w-[300px] lg:w-[417px] shadow-[0px_4px_18px_rgba(148,148,148,0.25)] rounded-[10px] "
|
||||
key={item.title}
|
||||
>
|
||||
<div className="flex flex-col justify-between">
|
||||
<div
|
||||
className={`${
|
||||
i == 1 && "bg-[#F112A2] text-white"
|
||||
} pt-10 md:pt-[69px] rounded-t-lg`}
|
||||
>
|
||||
<h2
|
||||
className={`text-center font-bold text-2xl md:text-[57px] mb-3 md:mb-[34px] ${
|
||||
i == 1 ? "bg-[#F112A2] text-white" : "primary-color"
|
||||
}`}
|
||||
>
|
||||
${item.price}
|
||||
</h2>
|
||||
<h4
|
||||
className={`text-lg md:text-3xl text-center font-semibold mb-4 md:mb-8 ${
|
||||
i == 1 ? "text-white" : "text-[#222]"
|
||||
}`}
|
||||
>
|
||||
{item.title}
|
||||
</h4>
|
||||
</div>
|
||||
{i !== 1 && (
|
||||
<div className="w-28 h-1 mx-auto bg-[#5A00CC]"></div>
|
||||
)}
|
||||
<div className="px-10 pb-8 md:pb-[60px]">
|
||||
<ul className="flex flex-1 flex-col gap-2 items-center mt-[34px] mb-9">
|
||||
{item.features.map((feature) => (
|
||||
<li className="text-[#222] text-lg " key={feature}>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex justify-center w-full">
|
||||
<button className="text-white self-end font-semibold text-lg py-2 md:py-4 rounded-md px-4 md:px-6 bg-[#F112A2] hover:shadow-[#f112a360] hover:shadow-lg duration-200">
|
||||
Purchase Ticket
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pricing;
|
||||
@@ -0,0 +1,40 @@
|
||||
import Image from "next/image";
|
||||
import { reviews } from "../../data/review";
|
||||
|
||||
const Review = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="relative">
|
||||
<div className="bg-[url('/image/review/review-bg.png')] bg-no-repeat bg-cover opacity-10 h-full w-full absolute top-0 flex items-center justify-center"></div>
|
||||
<div className="pb-[71px] md:pb-[120px] pt-16 md:pt-[127px] max-w-[1296px] mx-auto z-10 relative">
|
||||
<h2 className="text-center text-3xl md:text-[57px] font-bold mb-4 md:mb-[25px]">
|
||||
Previous <span className="text-[#F112A2]">Event</span>
|
||||
</h2>
|
||||
<p className="text-[#444] text-base md:text-lg px-2 text-center mb-10 md:mb-14">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</p>
|
||||
<div className="flex flex-col mx-2 md:mx-0 flex-wrap md:flex-row gap-4 md:gap-6 justify-center items-center">
|
||||
{reviews.map((review) => (
|
||||
<div
|
||||
key={review.id}
|
||||
className="flex flex-col rounded-sm hover:shadow-xl cursor-pointer transition-all duration-300 pb-[30px] px-3 md:px-[30px] pt-1 text-center bg-white w-[300px] md:w-[400px]"
|
||||
>
|
||||
<div className="pt-4">
|
||||
<Image
|
||||
src={review.image}
|
||||
width={118}
|
||||
height={130}
|
||||
alt="review image"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-lg text-[#444] text-center">{review.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Review;
|
||||
@@ -0,0 +1,41 @@
|
||||
import Image from "next/image";
|
||||
import CountUp from "react-countup";
|
||||
import { statics } from "../../data/statics";
|
||||
const Statics = () => {
|
||||
return (
|
||||
<div className="bg-[url('/image/statics/statics-bg.png')] bg-right w-screen statics-bg">
|
||||
<div className="flex flex-col max-w-[1296px] mx-auto items-center justify-center">
|
||||
<h2 className="text-3xl px-4 mt-16 md:mt-[110px] leading-tight mb-4 md:mb-[7px] font-bold md:text-[57px] text-center">
|
||||
Our Present <span className="primary-color">Statics</span>
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-[#444444] text-center mx-2 lg:mx-0 mb-[37px] md:mb-[53px] max-w-lg">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum
|
||||
urna sed erat tortor aliquam ipsum
|
||||
</p>
|
||||
<div className="flex justify-center 2xl:justify-between flex-wrap mx-2 2xl:mx-0 mb-[70px] md:mb-[120px] gap-4 md:gap-6 ">
|
||||
{statics.map((stat) => (
|
||||
<div
|
||||
key={stat.title}
|
||||
className="flex gap-3 md:gap-7 w-[200px] md:w-[416px] items-center bg-white rounded-[10px] shadow-lg px-4 md:px-[30px] py-3 md:py-6"
|
||||
>
|
||||
<div className="w-14 h-14 md:w-24 md:h-24 ">
|
||||
<Image src={stat.icon} width={100} height={100} alt="icon" />
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-[#5A00CC]"></div>
|
||||
<div>
|
||||
<h2 className="text primary-color font-bold text-xl md:text-[43px] md:mb-3">
|
||||
<CountUp end={stat.number} />
|
||||
</h2>
|
||||
<p className="text-sm md:text-lg text-[#222222]">
|
||||
{stat.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Statics;
|
||||
@@ -0,0 +1,82 @@
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { speakers } from "../../data/speakers";
|
||||
import Social from "../others/Social";
|
||||
import Placeholder from "../../public/image/team/placeholder.jpg";
|
||||
const SpeakerDetails = () => {
|
||||
const [speaker, setSpeaker] = useState({});
|
||||
const { query } = useRouter();
|
||||
useEffect(() => {
|
||||
const speaker = speakers.find((item) => item.id == parseInt(query.id));
|
||||
setSpeaker(speaker);
|
||||
}, [query.id]);
|
||||
const ids = speakers.map((speaker) => speaker.id);
|
||||
if (ids.indexOf(parseInt(query.id)) == -1) {
|
||||
return (
|
||||
<div className="py-40 w-full flex flex-col gap-8 items-center justify-center">
|
||||
<h3 className=" mx-3 lg:mx-0 text-6xl font-semibold">
|
||||
Oops! Page Not Found!
|
||||
</h3>
|
||||
<Link href="/">
|
||||
<a className="text-2xl bg-[#F112A2] btnhover px-6 py-3 rounded-lg text-white">
|
||||
Go to Home
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="relative bg-[url('/image/team/single-speaker-bg.png')] bg-no-repeat bg-cover">
|
||||
<div className="max-w-[1296px] mx-2 bg-white xl:mx-auto md:gap-8 xl:gap-20 flex flex-col lg:flex-row pt-[46px] pb-[70px] md:py-[120px]">
|
||||
<div className="shadow-xl rounded-md flex flex-col items-center ">
|
||||
<div className="h-[250px] w-[250px] my-[25px] rounded-full border-4 border-[#F112A2]">
|
||||
<Image
|
||||
className="rounded-full"
|
||||
src={speaker?.photo ? speaker?.profilePic : Placeholder}
|
||||
height={250}
|
||||
width={250}
|
||||
alt="speaker image"
|
||||
/>
|
||||
</div>
|
||||
<h5 className="font-semibold text-2xl text-[#222]">
|
||||
{speaker?.name}
|
||||
</h5>
|
||||
<p className="text-lg text-[#222] mb-[27px]">Speakers</p>
|
||||
<div className="bg-[#F112A2] h-[.5px] w-36 mb-[25px]"></div>
|
||||
<p className="text-lg text-[#444] px-2 md:px-5 mb-8 text-center">
|
||||
{speaker?.biography}
|
||||
</p>
|
||||
<Social classes="border-[#222] text-[#222]" size={40} />
|
||||
<div className="mb-[30px]"></div>
|
||||
</div>
|
||||
<div className="col-span-12 md:col-span-7 mx-3 md:mx-0">
|
||||
<h2 className="text-3xl mt-16 md:mt-0 md:text-[57px] text-[#F112A2] font-bold mb-4 md:mb-[40px]">
|
||||
Biography
|
||||
</h2>
|
||||
<p className="text-lg text-[#444] mb-8 md:mb-[46px]">
|
||||
{speaker?.biography}
|
||||
</p>
|
||||
<h2 className="text-3xl leading-tight md:text-[57px] font-bold mb-4 md:mb-[24px]">
|
||||
Personal Experience
|
||||
</h2>
|
||||
<p className="text-lg text-[#444] mb-7 md:mb-[51px]">
|
||||
{speaker?.experience}
|
||||
</p>
|
||||
|
||||
<h6 className="text-lg font-bold mb-2">Business</h6>
|
||||
<div className="xl:w-1/3 rounded-xl bg-gray-200 h-1 mb-5">
|
||||
<div className="bg-[#F112A2] rounded-xl h-1 w-10/12"></div>
|
||||
</div>
|
||||
<h6 className="text-lg font-bold mb-2">Entrepreneur</h6>
|
||||
<div className="xl:w-1/3 rounded-xl bg-gray-200 h-1 md:mb-5">
|
||||
<div className="bg-[#F112A2] rounded-xl h-1 w-11/12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpeakerDetails;
|
||||
@@ -0,0 +1,57 @@
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
import { speakers } from "../../data/speakers";
|
||||
import Social from "../others/Social";
|
||||
|
||||
const Team = () => {
|
||||
const router = useRouter();
|
||||
const handleClick = (id) => {
|
||||
router.push(`/speakers/${id}`);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div className="bg-[url('/image/team/team-bg.png')] bg-no-repeat bg-cover relative flex items-center justify-center">
|
||||
<div className="pt-[66px] pb-[70px] md:pt-[123px] md:pb-[120px] max-w-[1296px] mx-auto z-10">
|
||||
<div className="mx-auto">
|
||||
<h2 className="text-center mx-5 text-3xl lg:text-[57px] text-white font-bold mb-5 md:mb-[41px]">
|
||||
Meet Our Event Speakers
|
||||
</h2>
|
||||
<p className="text-white max-w-2xl mx-auto text-base md:text-lg px-2 text-center mb-5 md:mb-[37px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum{" "}
|
||||
urna sed erat tortor aliquam ipsum
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col flex-wrap md:flex-row gap-4 justify-center items-center pt-5 text-center">
|
||||
{speakers.slice(0, 4).map((person) => (
|
||||
<div
|
||||
key={person.name}
|
||||
onClick={() => handleClick(person.id)}
|
||||
className="bg-white p-[7px] mx-2 md:mx-0 lg:w-[306px] flex flex-col cursor-pointer items-center rounded-lg relative card"
|
||||
>
|
||||
<Image
|
||||
width={300}
|
||||
className="rounded-lg"
|
||||
height={400}
|
||||
src={person.photo}
|
||||
alt="team member"
|
||||
/>
|
||||
|
||||
<div className="bg-[#5A00CC] w-[95%] pt-10 pb-4 rounded-b-md rounded-t-[50%] transition-all card-inner">
|
||||
<h5 className="text-white text-xl md:text-2xl font-semibold">
|
||||
{person.name}
|
||||
</h5>
|
||||
<p className="text-white text-base md:text-lg my-2">
|
||||
Speakers
|
||||
</p>
|
||||
<Social classes="text-white" size={40} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
@@ -0,0 +1,55 @@
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
import { speakers } from "../../data/speakers";
|
||||
import Social from "../others/Social";
|
||||
import dots1 from "../../public/image/team/allteam-bg-dot.png";
|
||||
const Team = () => {
|
||||
const router = useRouter();
|
||||
const handleClick = (id) => {
|
||||
router.push(`/speakers/${id}`);
|
||||
};
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="absolute top-0 animate-pulse">
|
||||
<Image src={dots1} height={1200} alt="conference dots" />
|
||||
</div>
|
||||
<div className="mt-[64px] mb-[70px] md:my-[120px] max-w-[1296px] mx-auto z-10">
|
||||
<h2 className="text-center text-3xl md:text-[57px] font-bold mb-6 md:mb-[30px]">
|
||||
Meet Our Event <span className="text-[#F112A2]"> Speakers</span>
|
||||
</h2>
|
||||
<p className="text-base md:text-lg px-2 text-center mt-3 mb-8 md:mb-[56px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum{" "}
|
||||
<br /> urna sed erat tortor aliquam ipsum
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col mx-3 lg:mx-0 flex-wrap md:flex-row gap-4 md:gap-6 lg:gap-y-[60px] justify-center items-center text-center">
|
||||
{speakers.map((person) => (
|
||||
<div
|
||||
key={person.name}
|
||||
onClick={() => handleClick(person.id)}
|
||||
className="hover:bg-[#F112A2] z-10 p-[7px] bg-white shadow-md lg:w-[306px] flex flex-col cursor-pointer items-center rounded-lg relative card"
|
||||
>
|
||||
<Image
|
||||
width={300}
|
||||
className="rounded-lg"
|
||||
height={420}
|
||||
src={person.photo}
|
||||
alt="team member"
|
||||
/>
|
||||
|
||||
<div className="bg-[#5A00CC] rounded-b-lg mx-auto w-[96%] pt-10 pb-3 rounded-t-[50%] transition-all card-inner">
|
||||
<h5 className="text-white text-2xl font-semibold">
|
||||
{person.name}
|
||||
</h5>
|
||||
<p className="text-white text-lg my-2">Speakers</p>
|
||||
<Social classes="text-white" size={40} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
@@ -0,0 +1,32 @@
|
||||
import microphone from '../public/image/about/microphone.png'
|
||||
import people from '../public/image/about/people.png'
|
||||
import diagram from '../public/image/about/diagram.png'
|
||||
import party from '../public/image/about/party.png'
|
||||
|
||||
|
||||
export const aboutBusiness = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Great Speakers',
|
||||
desc: 'Lorem ipsum dolor xc all sit amet, consectetur ',
|
||||
img:microphone
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'New People',
|
||||
desc: 'Lorem ipsum dolor xc all sit amet, consectetur ',
|
||||
img:people
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Networking',
|
||||
desc: 'Lorem ipsum dolor xc all sit amet, consectetur ',
|
||||
img: diagram
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Have Fun',
|
||||
desc: 'Lorem ipsum dolor xc all sit amet, consectetur ',
|
||||
img:party
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,18 @@
|
||||
export const bannerStates = [
|
||||
{
|
||||
title: 'Journalists',
|
||||
number:150,
|
||||
},
|
||||
{
|
||||
title:"CEO's",
|
||||
number: 60
|
||||
},
|
||||
{
|
||||
title: 'Speakers',
|
||||
number: 55,
|
||||
},
|
||||
{
|
||||
title:'Attendees',
|
||||
number: 4500
|
||||
}
|
||||
]
|
||||
88
templates/template_2/eventio/eventio-HTML/data/conference.js
Normal file
88
templates/template_2/eventio/eventio-HTML/data/conference.js
Normal file
@@ -0,0 +1,88 @@
|
||||
|
||||
import speaker1 from '../public/image/conference/1.png'
|
||||
import speaker2 from '../public/image/conference/2.png'
|
||||
import speaker3 from '../public/image/conference/3.png'
|
||||
|
||||
|
||||
export const conference = [
|
||||
{
|
||||
id: "1",
|
||||
day: "Day 01",
|
||||
date: "25 July 2022",
|
||||
speakers: [
|
||||
|
||||
|
||||
{
|
||||
time: "01 AM-03 PM",
|
||||
title: "Business Analytics",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae eget pharetra, pharetra netus dictum massa cursus nisi. Tincidunt amet massa quis purus tincidunt varius sed ultrices.",
|
||||
img: speaker1,
|
||||
},
|
||||
{
|
||||
time: "12 PM-01 PM",
|
||||
title: "Business Management",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae eget pharetra, pharetra netus dictum massa cursus nisi. Tincidunt amet massa quis purus tincidunt varius sed ultrices.",
|
||||
img: speaker2,
|
||||
},
|
||||
{
|
||||
time: "10 AM-12 PM",
|
||||
title: "Business Introduction",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae eget pharetra, pharetra netus dictum massa cursus nisi. Tincidunt amet massa quis purus tincidunt varius sed ultrices.",
|
||||
img: speaker3,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id:"2",
|
||||
day: "Day 02",
|
||||
date: "26 July 2022",
|
||||
speakers: [
|
||||
{
|
||||
time: "10 AM-12 PM",
|
||||
title: "Business Introduction",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae eget pharetra, pharetra netus dictum massa cursus nisi. Tincidunt amet massa quis purus tincidunt varius sed ultrices.",
|
||||
img: speaker3,
|
||||
},
|
||||
{
|
||||
time: "01 AM-03 PM",
|
||||
title: "Business Analytics",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae eget pharetra, pharetra netus dictum massa cursus nisi. Tincidunt amet massa quis purus tincidunt varius sed ultrices.",
|
||||
img: speaker1,
|
||||
},
|
||||
{
|
||||
time: "12 PM-01 PM",
|
||||
title: "Business Management",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae eget pharetra, pharetra netus dictum massa cursus nisi. Tincidunt amet massa quis purus tincidunt varius sed ultrices.",
|
||||
img: speaker2,
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
id:"3",
|
||||
day: "Day 03",
|
||||
date: "27 July 2022",
|
||||
speakers: [
|
||||
|
||||
{
|
||||
time: "12 PM-01 PM",
|
||||
title: "Business Management",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae eget pharetra, pharetra netus dictum massa cursus nisi. Tincidunt amet massa quis purus tincidunt varius sed ultrices.",
|
||||
img: speaker2,
|
||||
},
|
||||
{
|
||||
time: "10 AM-12 PM",
|
||||
title: "Business Introduction",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae eget pharetra, pharetra netus dictum massa cursus nisi. Tincidunt amet massa quis purus tincidunt varius sed ultrices.",
|
||||
img: speaker3,
|
||||
},
|
||||
{
|
||||
time: "01 AM-03 PM",
|
||||
title: "Business Analytics",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae eget pharetra, pharetra netus dictum massa cursus nisi. Tincidunt amet massa quis purus tincidunt varius sed ultrices.",
|
||||
img: speaker1,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
];
|
||||
@@ -0,0 +1,29 @@
|
||||
export const contactInfo = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Tickets Info',
|
||||
contacts: {
|
||||
email: 'Contact@gmail.com',
|
||||
phone: '+123 456 789 110',
|
||||
address: '123H, San Fransisco, California'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Programme Details',
|
||||
contacts: {
|
||||
email: 'Contact@gmail.com',
|
||||
phone: '+123 456 789 110',
|
||||
address: '123H, San Fransisco, California'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Partnerships Info',
|
||||
contacts: {
|
||||
email: 'Contact@gmail.com',
|
||||
phone: '+123 456 789 110',
|
||||
address: '123H, San Fransisco, California'
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,5 @@
|
||||
import logo1 from "../public/image/pricing/partner1.png";
|
||||
import logo2 from "../public/image/pricing/partner2.png";
|
||||
import logo3 from "../public/image/pricing/partner3.png";
|
||||
import logo4 from "../public/image/pricing/partner4.png";
|
||||
export const eventPricing = [logo1, logo2, logo3, logo4];
|
||||
@@ -0,0 +1,5 @@
|
||||
import logo1 from "../public/image/event/partner1.png";
|
||||
import logo2 from "../public/image/event/partner2.png";
|
||||
import logo3 from "../public/image/event/partner3.png";
|
||||
import logo4 from "../public/image/event/partner4.png";
|
||||
export const eventHome = [logo1, logo2, logo3, logo4];
|
||||
@@ -0,0 +1,6 @@
|
||||
export const footermenus = [
|
||||
["/", "Home"],
|
||||
["/about", "About"],
|
||||
["/schedule", "Schedule"],
|
||||
["/page", "Page"],
|
||||
];
|
||||
@@ -0,0 +1,67 @@
|
||||
import img1 from "../public/image/gallery/img1.png";
|
||||
import img2 from "../public/image/gallery/img2.png";
|
||||
import img3 from "../public/image/gallery/img3.png";
|
||||
import img4 from "../public/image/gallery/img4.png";
|
||||
import img5 from "../public/image/gallery/img5.png";
|
||||
import img6 from "../public/image/gallery/img6.png";
|
||||
import img7 from "../public/image/gallery/img7.png";
|
||||
import img8 from "../public/image/gallery/img8.png";
|
||||
import img9 from "../public/image/gallery/img9.png";
|
||||
export const galleryPageImg = [
|
||||
{
|
||||
id:1,
|
||||
img: img1,
|
||||
width: 432,
|
||||
height: 407
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
img: img2,
|
||||
width: 418,
|
||||
height: 821
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
img: img3,
|
||||
width: 432,
|
||||
height: 407
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
img: img4,
|
||||
width: 432,
|
||||
height: 407
|
||||
},
|
||||
|
||||
{
|
||||
id:5,
|
||||
img: img5,
|
||||
width: 432,
|
||||
height: 407
|
||||
},
|
||||
{
|
||||
id:6,
|
||||
img: img6,
|
||||
width: 432,
|
||||
height: 407
|
||||
},
|
||||
{
|
||||
id:7,
|
||||
img: img7,
|
||||
width: 432,
|
||||
height: 407
|
||||
},
|
||||
{
|
||||
id:8,
|
||||
img: img8,
|
||||
width: 418,
|
||||
height: 821
|
||||
|
||||
},
|
||||
{
|
||||
id:9,
|
||||
img: img9,
|
||||
width: 864,
|
||||
height:407
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,38 @@
|
||||
import img1 from "../public/image/gallery/gallery1.png";
|
||||
import img2 from "../public/image/gallery/gallery2.png";
|
||||
import img3 from "../public/image/gallery/gallery3.png";
|
||||
import img4 from "../public/image/gallery/gallery4.png";
|
||||
import img5 from "../public/image/gallery/gallery5.png";
|
||||
import img6 from "../public/image/gallery/gallery6.png";
|
||||
|
||||
export const galleryImages = [
|
||||
{
|
||||
id: 1,
|
||||
img: img1,
|
||||
},
|
||||
|
||||
{
|
||||
id: 2,
|
||||
img: img2,
|
||||
},
|
||||
|
||||
{
|
||||
id: 3,
|
||||
img: img3,
|
||||
},
|
||||
|
||||
{
|
||||
id: 4,
|
||||
img: img4,
|
||||
},
|
||||
|
||||
{
|
||||
id: 5,
|
||||
img: img5,
|
||||
},
|
||||
|
||||
{
|
||||
id: 6,
|
||||
img: img6,
|
||||
}
|
||||
];
|
||||
17
templates/template_2/eventio/eventio-HTML/data/price.js
Normal file
17
templates/template_2/eventio/eventio-HTML/data/price.js
Normal file
@@ -0,0 +1,17 @@
|
||||
export const pricing = [
|
||||
{
|
||||
title: 'Basic Pass',
|
||||
price: 150,
|
||||
features: ['Conference Tickets', 'One catered lunch', 'Private Access', 'Experts Contacts']
|
||||
},
|
||||
{
|
||||
title: 'Standard Pass',
|
||||
price: 250,
|
||||
features: ['Conference Tickets', 'One catered lunch', 'Private Access', 'Experts Contacts']
|
||||
},
|
||||
{
|
||||
title: 'Premium Pass',
|
||||
price: 450,
|
||||
features: ['Conference Tickets', 'One catered lunch', 'Private Access', 'Experts Contacts']
|
||||
}
|
||||
]
|
||||
18
templates/template_2/eventio/eventio-HTML/data/review.js
Normal file
18
templates/template_2/eventio/eventio-HTML/data/review.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import shape from '../public/image/review/shape.png'
|
||||
export const reviews = [
|
||||
{
|
||||
id: 1,
|
||||
image: shape,
|
||||
desc: 'Lorem ipsum at most dolor sit amet, consectetur adipiscing elit. Nulla posuere tristique diam, sociis sem facilisi. Libero lois dinonisl morbi.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: shape,
|
||||
desc: 'Lorem ipsum at most dolor sit amet, consectetur adipiscing elit. Nulla posuere tristique diam, sociis sem facilisi. Libero lois dinonisl morbi.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: shape,
|
||||
desc: 'Lorem ipsum at most dolor sit amet, consectetur adipiscing elit. Nulla posuere tristique diam, sociis sem facilisi. Libero lois dinonisl morbi.'
|
||||
}
|
||||
]
|
||||
147
templates/template_2/eventio/eventio-HTML/data/speakers.js
Normal file
147
templates/template_2/eventio/eventio-HTML/data/speakers.js
Normal file
@@ -0,0 +1,147 @@
|
||||
import team1 from '../public/image/team/team1.png'
|
||||
import team2 from '../public/image/team/team2.png'
|
||||
import team3 from '../public/image/team/team3.png'
|
||||
import team4 from '../public/image/team/team4.png'
|
||||
import team5 from '../public/image/team/team5.png'
|
||||
import team6 from '../public/image/team/team6.png'
|
||||
import team7 from '../public/image/team/team7.png'
|
||||
import team8 from '../public/image/team/team8.png'
|
||||
import teams1 from '../public/image/team/teams1.png'
|
||||
import teams2 from '../public/image/team/teams2.png'
|
||||
import teams3 from '../public/image/team/teams3.png'
|
||||
import teams4 from '../public/image/team/teams4.png'
|
||||
import teams5 from '../public/image/team/teams5.png'
|
||||
import teams6 from '../public/image/team/teams6.png'
|
||||
import teams7 from '../public/image/team/teams7.png'
|
||||
import teams8 from '../public/image/team/teams8.png'
|
||||
|
||||
export const speakers = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Robard Milan',
|
||||
biography: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod.',
|
||||
experience: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit.',
|
||||
photo: team1,
|
||||
profilePic:teams1,
|
||||
business: 8,
|
||||
entrepreneur: 9,
|
||||
links: {
|
||||
facebook: 'https://facebook.com',
|
||||
instagram: 'https://instagram.com',
|
||||
twitter:'https://twitter.com',
|
||||
linkedin:'https://linkedin.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name: 'Richard Bandi',
|
||||
biography: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod.',
|
||||
experience: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit.',
|
||||
business: 8,
|
||||
entrepreneur: 9,
|
||||
photo: team2,
|
||||
profilePic:teams2,
|
||||
links: {
|
||||
facebook: 'https://facebook.com',
|
||||
instagram: 'https://instagram.com',
|
||||
twitter:'https://twitter.com',
|
||||
linkedin:'https://linkedin.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
name: 'Monika Moni',
|
||||
biography: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod.',
|
||||
experience: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit.',
|
||||
photo: team3,
|
||||
profilePic:teams3,
|
||||
business: 8,
|
||||
entrepreneur: 9,
|
||||
links: {
|
||||
facebook: 'https://facebook.com',
|
||||
instagram: 'https://instagram.com',
|
||||
twitter:'https://twitter.com',
|
||||
linkedin:'https://linkedin.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Sara Gomez',
|
||||
biography: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod.',
|
||||
experience: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit.',
|
||||
business: 8,
|
||||
entrepreneur: 9,
|
||||
photo: team4,
|
||||
profilePic:teams4,
|
||||
links: {
|
||||
facebook: 'https://facebook.com',
|
||||
instagram: 'https://instagram.com',
|
||||
twitter:'https://twitter.com',
|
||||
linkedin:'https://linkedin.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Santa Gomez',
|
||||
biography: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod.',
|
||||
experience: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit.',
|
||||
photo: team5,
|
||||
profilePic:teams5,
|
||||
business: 8,
|
||||
entrepreneur: 9,
|
||||
links: {
|
||||
facebook: 'https://facebook.com',
|
||||
instagram: 'https://instagram.com',
|
||||
twitter:'https://twitter.com',
|
||||
linkedin:'https://linkedin.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Sara Nowmi',
|
||||
biography: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod.',
|
||||
experience: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit.',
|
||||
photo: team6,
|
||||
profilePic:teams6,
|
||||
business: 8,
|
||||
entrepreneur: 9,
|
||||
links: {
|
||||
facebook: 'https://facebook.com',
|
||||
instagram: 'https://instagram.com',
|
||||
twitter:'https://twitter.com',
|
||||
linkedin:'https://linkedin.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Sara Clown',
|
||||
biography: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod.',
|
||||
experience: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit.',
|
||||
photo: team7,
|
||||
profilePic:teams7,
|
||||
business: 8,
|
||||
entrepreneur: 9,
|
||||
links: {
|
||||
facebook: 'https://facebook.com',
|
||||
instagram: 'https://instagram.com',
|
||||
twitter:'https://twitter.com',
|
||||
linkedin:'https://linkedin.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'Sara Laura',
|
||||
biography: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod.',
|
||||
experience: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit, quam mauris varius quis amet. Integer nisl, ut eget bibendum mauris aenean euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper mattis lectus pellentesque eu. Sed amet, duis vitae sapien non. Diam ac elit.',
|
||||
photo: team8,
|
||||
profilePic:teams8,
|
||||
business: 8,
|
||||
entrepreneur: 9,
|
||||
links: {
|
||||
facebook: 'https://facebook.com',
|
||||
instagram: 'https://instagram.com',
|
||||
twitter:'https://twitter.com',
|
||||
linkedin:'https://linkedin.com'
|
||||
}
|
||||
}
|
||||
]
|
||||
21
templates/template_2/eventio/eventio-HTML/data/statics.js
Normal file
21
templates/template_2/eventio/eventio-HTML/data/statics.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import ticket from '../public/image/statics/ticket-icon.png'
|
||||
import calender from '../public/image/statics/calender-icon.png'
|
||||
import microphone from '../public/image/statics/microphone-icon.png'
|
||||
|
||||
export const statics = [
|
||||
{
|
||||
title: 'Tickets Booked',
|
||||
number: 1125,
|
||||
icon: ticket
|
||||
},
|
||||
{
|
||||
title: 'Usefull Sessions',
|
||||
number: 450,
|
||||
icon: calender
|
||||
},
|
||||
{
|
||||
title: 'Speakers',
|
||||
number: 55,
|
||||
icon: microphone
|
||||
}
|
||||
]
|
||||
11
templates/template_2/eventio/eventio-HTML/next.config.js
Normal file
11
templates/template_2/eventio/eventio-HTML/next.config.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
swcMinify: true,
|
||||
i18n: {
|
||||
locales: ["en"],
|
||||
defaultLocale: "en",
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
7911
templates/template_2/eventio/eventio-HTML/package-lock.json
generated
Normal file
7911
templates/template_2/eventio/eventio-HTML/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
templates/template_2/eventio/eventio-HTML/package.json
Normal file
28
templates/template_2/eventio/eventio-HTML/package.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "navbar",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"formik": "^2.2.9",
|
||||
"framer-motion": "^7.6.5",
|
||||
"next": "12.3.1",
|
||||
"react": "18.2.0",
|
||||
"react-countup": "^6.3.2",
|
||||
"react-dom": "18.2.0",
|
||||
"react-icons": "^4.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint": "8.25.0",
|
||||
"eslint-config-next": "12.3.1",
|
||||
"postcss": "^8.4.18",
|
||||
"tailwindcss": "^3.1.8"
|
||||
}
|
||||
}
|
||||
32
templates/template_2/eventio/eventio-HTML/pages/_app.js
Normal file
32
templates/template_2/eventio/eventio-HTML/pages/_app.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import Layout from "../components/layout/Layout";
|
||||
import "../styles/globals.css";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
function MyApp({ Component, pageProps, router }) {
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
key={router.route}
|
||||
initial="pageInitial"
|
||||
animate="pageAnimate"
|
||||
exit="pageExit"
|
||||
variants={{
|
||||
pageInitial: {
|
||||
opacity: 0,
|
||||
},
|
||||
pageAnimate: {
|
||||
opacity: 1,
|
||||
},
|
||||
pageExit: {
|
||||
opacity: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import BookSeat from '../../components/about/BookSeat';
|
||||
import GlobalBusiness from '../../components/about/GlobalBusiness';
|
||||
import TopBanner from '../../components/banner/TopBanner';
|
||||
import Event from '../../components/event/Event';
|
||||
import Team from '../../components/team/Team';
|
||||
import Statics from '../../components/statics/Statics'
|
||||
import Head from 'next/head';
|
||||
const About = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>About</title>
|
||||
</Head>
|
||||
<TopBanner text="About Us" indicator="About Us" />
|
||||
<GlobalBusiness />
|
||||
<Team />
|
||||
<Event />
|
||||
<BookSeat />
|
||||
<Statics />
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,5 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default function handler(req, res) {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import Head from "next/head";
|
||||
import React from "react";
|
||||
import TopBanner from "../../components/banner/TopBanner";
|
||||
import ContactForm from "../../components/contact/ContactForm";
|
||||
import ContactInfo from "../../components/contact/ContactInfo";
|
||||
|
||||
const Contact = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Contact</title>
|
||||
</Head>
|
||||
<TopBanner text="Contact Us" indicator="Pages → Contact Us" />
|
||||
<ContactInfo />
|
||||
<ContactForm />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
@@ -0,0 +1,18 @@
|
||||
import Head from "next/head";
|
||||
import React from "react";
|
||||
import TopBanner from "../../components/banner/TopBanner";
|
||||
import GalleryPage from "../../components/gallery/GalleryPage";
|
||||
|
||||
const gallary = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Gallery</title>
|
||||
</Head>
|
||||
<TopBanner text="Gallery" indicator="Pages → Gallery" />
|
||||
<GalleryPage />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default gallary;
|
||||
33
templates/template_2/eventio/eventio-HTML/pages/index.js
Normal file
33
templates/template_2/eventio/eventio-HTML/pages/index.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import Head from "next/head";
|
||||
import About from "../components/about/About";
|
||||
import Banner from "../components/banner/Banner";
|
||||
import Conference from "../components/conference/Conference";
|
||||
import Event from "../components/event/Event";
|
||||
import Gallery from "../components/gallery/Gallery";
|
||||
import Pricing from "../components/pricing/Pricing";
|
||||
import Statics from "../components/statics/Statics";
|
||||
import Team from "../components/team/Team";
|
||||
import Review from '../components/review/Review'
|
||||
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
|
||||
<Head>
|
||||
<title>Veltio | Event Management website</title>
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Banner />
|
||||
<About />
|
||||
<Statics />
|
||||
<Team />
|
||||
<Event />
|
||||
<Conference />
|
||||
<Pricing />
|
||||
<Gallery />
|
||||
<Review />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import Head from "next/head";
|
||||
import React from "react";
|
||||
import TopBanner from "../../components/banner/TopBanner";
|
||||
import EventPricing from "../../components/event/EventPricing";
|
||||
import PricePlan from "../../components/pricing/PricePlan";
|
||||
|
||||
const Price = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Pricing</title>
|
||||
</Head>
|
||||
<TopBanner text="Price Plan" indicator="Pages → Pricing" />
|
||||
<PricePlan />
|
||||
<EventPricing />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Price;
|
||||
@@ -0,0 +1,18 @@
|
||||
import Head from "next/head";
|
||||
import React from "react";
|
||||
import TopBanner from "../../components/banner/TopBanner";
|
||||
import Conference from "../../components/conference/Conference";
|
||||
|
||||
const Schedule = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Schedule</title>
|
||||
</Head>
|
||||
<TopBanner text="Schedule" indicator="Schedule" />
|
||||
<Conference />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Schedule;
|
||||
@@ -0,0 +1,19 @@
|
||||
import Head from "next/head";
|
||||
import TopBanner from "../../components/banner/TopBanner";
|
||||
import Statics from "../../components/statics/Statics";
|
||||
import SpeakerDetails from "../../components/team/SpeakerDetails";
|
||||
|
||||
const Speakers = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Speaker Details</title>
|
||||
</Head>
|
||||
<TopBanner text="Speakers Single" indicator="Pages → Speakers" />
|
||||
<SpeakerDetails />
|
||||
<Statics />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Speakers;
|
||||
@@ -0,0 +1,18 @@
|
||||
import Head from "next/head";
|
||||
import React from "react";
|
||||
import TopBanner from "../../components/banner/TopBanner";
|
||||
import TeamAll from "../../components/team/TeamAll";
|
||||
|
||||
const Speakers = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Speakers</title>
|
||||
</Head>
|
||||
<TopBanner text="Speakers" indicator="Pages → Speakers" />
|
||||
<TeamAll />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Speakers;
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
BIN
templates/template_2/eventio/eventio-HTML/public/favicon.ico
Normal file
BIN
templates/template_2/eventio/eventio-HTML/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
templates/template_2/eventio/eventio-HTML/public/icon.png
Normal file
BIN
templates/template_2/eventio/eventio-HTML/public/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 600 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1007 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 989 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 889 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 400 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user