inital commit
This commit is contained in:
@@ -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;
|
||||
Reference in New Issue
Block a user