first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,66 @@
|
||||
import React from "react";
|
||||
import { about5, h, videoIcon, whiteWebIcon } from "../../constant/images";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className="about-area section-padding-top pb-16 relative z-[1]">
|
||||
<div className=" absolute right-[7%] top-[20%] z-[-1] hidden xl:block">
|
||||
<img src={h} alt="" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-12 xl:gap-[70px] lg:gap-10 gap-6">
|
||||
<div className="xl:col-span-7 lg:col-span-6 col-span-12">
|
||||
<img src={about5} alt="" />
|
||||
</div>
|
||||
<div className="xl:col-span-5 lg:col-span-6 col-span-12 ">
|
||||
<div className="mini-title">About Edumim</div>
|
||||
<h4 className="column-title ">
|
||||
You Can Learn Anything, Anytime From{" "}
|
||||
<span className="shape-bg">Anywhere</span>
|
||||
</h4>
|
||||
<div>
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
but the majority have suffered.
|
||||
</div>
|
||||
<ul className=" list-item space-y-6 pt-8">
|
||||
<li className="flex">
|
||||
<div className="flex-none mr-6">
|
||||
<div className="h-20 w-20 rounded-full bg-white shadow-box10 flex flex-col justify-center items-center">
|
||||
<img src={videoIcon} alt="" className="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className=" text-xl mb-1">
|
||||
All classNamees Video Provided
|
||||
</h4>
|
||||
<div>
|
||||
There are many variations of passages of the Lorem Ipsum
|
||||
available.
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex">
|
||||
<div className="flex-none mr-6">
|
||||
<div className="h-20 w-20 rounded-full bg-white shadow-box10 flex flex-col justify-center items-center">
|
||||
<img src={whiteWebIcon} alt="" className=" " />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className=" text-xl mb-1">
|
||||
Online className From Expert Teachers
|
||||
</h4>
|
||||
<div>
|
||||
There are many variations of passages of the Lorem Ipsum
|
||||
available.
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,97 @@
|
||||
import { Disclosure } from "@headlessui/react";
|
||||
import React from "react";
|
||||
import { faq } from "../../constant/images";
|
||||
|
||||
const Accordion = () => {
|
||||
return (
|
||||
<div className="section-padding bg-white bg-[url('../images/all-img/section-bg-15.png')] bg-bottom bg-cover bg-no-repeat">
|
||||
<div className="container">
|
||||
<div className="grid lg:grid-cols-2 grid-cols-1 gap-[30px]">
|
||||
<div>
|
||||
<div className="mini-title">Frequently Asked Question</div>
|
||||
<div className="column-title ">
|
||||
General <span className="shape-bg">Questions</span>
|
||||
</div>
|
||||
<ul className="list accrodains space-y-[30px] lg:max-w-[470px]">
|
||||
<Disclosure >
|
||||
{({ open }) => (
|
||||
<li className={open ? "open" : null} >
|
||||
<Disclosure.Button type="button" className="accrodain-button">
|
||||
<span>What does it take excellent author?</span>
|
||||
<span className="icon-pm"></span>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Disclosure.Panel className="content">
|
||||
Learn at your own pace, move between multiple courses, or
|
||||
switch to a different course. Earn a certificate for every
|
||||
learning program that you complete at no additional cost.
|
||||
</Disclosure.Panel>
|
||||
</li>
|
||||
)}
|
||||
|
||||
</Disclosure>
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<li className={open ? "open" : null} >
|
||||
<Disclosure.Button type="button" className="accrodain-button">
|
||||
<span>What does it take excellent author?</span>
|
||||
<span className="icon-pm"></span>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Disclosure.Panel className="content">
|
||||
Learn at your own pace, move between multiple courses, or
|
||||
switch to a different course. Earn a certificate for every
|
||||
learning program that you complete at no additional cost.
|
||||
</Disclosure.Panel>
|
||||
</li>
|
||||
)}
|
||||
|
||||
</Disclosure>
|
||||
<Disclosure >
|
||||
{({ open }) => (
|
||||
<li className={open ? "open" : null} >
|
||||
<Disclosure.Button type="button" className="accrodain-button">
|
||||
<span>What does it take excellent author?</span>
|
||||
<span className="icon-pm"></span>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Disclosure.Panel className="content">
|
||||
Learn at your own pace, move between multiple courses, or
|
||||
switch to a different course. Earn a certificate for every
|
||||
learning program that you complete at no additional cost.
|
||||
</Disclosure.Panel>
|
||||
</li>
|
||||
)}
|
||||
|
||||
</Disclosure>
|
||||
<Disclosure >
|
||||
{({ open }) => (
|
||||
<li className={open ? "open" : null} >
|
||||
<Disclosure.Button type="button" className="accrodain-button">
|
||||
<span>What does it take excellent author?</span>
|
||||
<span className="icon-pm"></span>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Disclosure.Panel className="content">
|
||||
Learn at your own pace, move between multiple courses, or
|
||||
switch to a different course. Earn a certificate for every
|
||||
learning program that you complete at no additional cost.
|
||||
</Disclosure.Panel>
|
||||
</li>
|
||||
)}
|
||||
|
||||
</Disclosure>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<img src={faq} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Accordion;
|
||||
@@ -0,0 +1,35 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { man3 } from "../../constant/images";
|
||||
|
||||
const Banner = () => {
|
||||
return (
|
||||
<section className=" xl:min-h-screen bg-[url('../images/banner/3.png')] bg-no-repeat bg-center overflow-hidden">
|
||||
<div className="container relative">
|
||||
<div className="xl:max-w-[570px] lg:max-w-[770px] xl:py-[174px] lg:py-28 md:py-20 py-14">
|
||||
<h1>
|
||||
Classical
|
||||
<span className=" text-secondary inline-block bg-[url('../images/banner/shape.svg')] bg-no-repeat bg-bottom">
|
||||
Education
|
||||
</span>{" "}
|
||||
For The Future
|
||||
</h1>
|
||||
<div className=" plain-text text-gray leading-[30px] mt-8 mb-14">
|
||||
It is long established fact that reader distracted by the readable
|
||||
content.
|
||||
</div>
|
||||
<div className="md:flex md:space-x-4 space-y-3 md:space-y-0">
|
||||
<a href="#" className="btn btn-primary">
|
||||
Learn From Today
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="imge-box absolute right-[-60px] top-1/2 -translate-y-1/2 hidden xl:block ">
|
||||
<img src={man3} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Banner;
|
||||
@@ -0,0 +1,26 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { b1, b2, b3, b4, b5 } from "../../constant/images";
|
||||
|
||||
const Brands = () => {
|
||||
return (
|
||||
<div className="brands-area pt-20 pb-14 bg-black ">
|
||||
<div className="container">
|
||||
<ul className="flex flex-wrap items-center lg:justify-between justify-center ">
|
||||
{[b1, b2, b3, b4, b5].map((item, index) => (
|
||||
<li
|
||||
className=" mb-6 last:mb-0 mr-6 last:mr-0 transition duration-150 "
|
||||
key={index}
|
||||
>
|
||||
<a href="#" className=" block">
|
||||
<img src={item} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Brands;
|
||||
@@ -0,0 +1,46 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
|
||||
const CourseBlock = () => {
|
||||
return (
|
||||
<div
|
||||
className="lg:pt-10 section-padding-bottom bg-white bg-[url('../images/all-img/section-bg-14.png')] bg-center bg-no-repeat
|
||||
bg-cover"
|
||||
>
|
||||
<div className="container">
|
||||
<div className="grid lg:grid-cols-2 grid-cols-1 gap-7">
|
||||
<div className="bg-[url('../images/all-img/bg-ins-1.png')] bg-cover bg-no-repeat p-10 rounded-md">
|
||||
<div className="max-w-[337px]">
|
||||
<div className="mini-title">Build Your Career</div>
|
||||
<div className=" text-[34px] text-black leading-[51px]">
|
||||
Become an <span className="shape-bg"> Instructor</span>
|
||||
</div>
|
||||
<div className=" mt-6 mb-12">
|
||||
Learn at your own pace, move the between multiple courses.
|
||||
</div>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Apply Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[url('../images/all-img/bg-ins-2.png')] bg-no-repeat p-10 bg-cover rounded-md">
|
||||
<div className="max-w-[337px]">
|
||||
<div className="mini-title">Build Your Career</div>
|
||||
<div className=" text-[34px] text-black leading-[51px]">
|
||||
Get Free <span className="shape-bg">Courses</span>
|
||||
</div>
|
||||
<div className=" mt-6 mb-12">
|
||||
Learn at your own pace, move the between multiple courses.
|
||||
</div>
|
||||
<a href="#" className="btn btn-black">
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CourseBlock;
|
||||
@@ -0,0 +1,38 @@
|
||||
import React, { Fragment, useEffect } from 'react'
|
||||
|
||||
const CourseFilter = ({ activeData, mainData, setFilterData, setActiveData }) => {
|
||||
useEffect(() => {
|
||||
if (activeData === 0) {
|
||||
setFilterData(mainData);
|
||||
}
|
||||
const filteredData = mainData.filter((e) => e.id.includes(activeData));
|
||||
setFilterData(filteredData);
|
||||
}, [activeData, setFilterData, mainData]);
|
||||
return (
|
||||
<ul className="filter-list flex xl:space-x-[39px] space-x-4 " style={{ textTransform: 'capitalize' }}>
|
||||
{['see all', 'marketing', 'design', 'finance'].map((item, index) => (
|
||||
<Fragment key={index}>
|
||||
{item === "see all" ? (
|
||||
<li
|
||||
className={activeData === 0 ? "active filter" : "filter"}
|
||||
onClick={() => setActiveData(0)}
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
) : (
|
||||
<li
|
||||
className={activeData === item ? "filter active" : "filter"}
|
||||
|
||||
onClick={() => setActiveData(item)}
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export default CourseFilter
|
||||
@@ -0,0 +1,50 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React, { useState } from "react";
|
||||
import { courseData } from "../../constant/dummyData";
|
||||
import CourseFilter from "./CourseFilter";
|
||||
import SingleCourse from "./SingleCourse";
|
||||
|
||||
|
||||
const CourseSection = () => {
|
||||
const [activeData, setActiveData] = useState(0);
|
||||
const [filterData, setFilterData] = useState([]);
|
||||
return (
|
||||
|
||||
<div className=" section-padding bg-[url('../images/all-img/section-bg-11.png')] bg-cover bg-no-repeat">
|
||||
<div className="container">
|
||||
<div className="flex items-center flex-wrap flex-y-4">
|
||||
<div className="flex-1">
|
||||
<div className="mini-title">Popular Courses</div>
|
||||
<div className="column-title ">
|
||||
Choose Our Top <span className="shape-bg">Courses</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<CourseFilter
|
||||
mainData={courseData}
|
||||
activeData={activeData}
|
||||
setActiveData={setActiveData}
|
||||
setFilterData={setFilterData} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap pt-10 grids">
|
||||
{filterData?.length > 0 ? (
|
||||
filterData.map((data, index) => (
|
||||
<SingleCourse key={index} data={data} />
|
||||
))
|
||||
) : (
|
||||
<h1 style={{ textAlign: "center" }}>Not Found Any Data</h1>
|
||||
)}
|
||||
|
||||
</div>
|
||||
<div className="text-center lg:pt-16 pt-10">
|
||||
<a href="#" className=" btn btn-primary">
|
||||
View All Courses
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CourseSection;
|
||||
@@ -0,0 +1,66 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { e1, e2, e3 } from "../../constant/images";
|
||||
|
||||
const Event = () => {
|
||||
return (
|
||||
<div className=" section-padding bg-white bg-[url('../images/all-img/section-bg-13.png')] bg-no-repeat">
|
||||
<div className="container">
|
||||
<div className="text-center mb-14">
|
||||
<div className="mini-title">Join With Us</div>
|
||||
<div className="column-title ">
|
||||
Upcoming <span className="shape-bg">Events</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px]">
|
||||
{[e1, e2, e3].map((item, index) => (
|
||||
<div
|
||||
className=" bg-white shadow-box5 rounded-[8px] transition duration-100 hover:shadow-box3"
|
||||
key={index}
|
||||
>
|
||||
<div className="course-thumb h-[297px] rounded-t-[8px] relative">
|
||||
<img
|
||||
src={item}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded-t-[8px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="course-content p-8">
|
||||
<h4 className=" text-xl mb-5 font-bold">
|
||||
<Link
|
||||
to={"/react-templates/edumim/event-single"}
|
||||
className=" hover:text-primary transition duration-150"
|
||||
>
|
||||
International Art Fair 2022
|
||||
</Link>
|
||||
</h4>
|
||||
<ul className=" list space-y-3 mb-6">
|
||||
<li className=" flex space-x-2">
|
||||
<span className="text-lg text-secondary">
|
||||
<iconify-icon icon="heroicons:calendar-days"></iconify-icon>
|
||||
</span>
|
||||
<span>Thu, Oct 5, 2023 03:48 PM</span>
|
||||
</li>
|
||||
<li className=" flex space-x-2">
|
||||
<span className="text-lg text-secondary">
|
||||
<iconify-icon icon="heroicons:map-pin"></iconify-icon>
|
||||
</span>
|
||||
<span>Humberg City, Germany</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link
|
||||
to={"/react-templates/edumim/event-single"}
|
||||
className="btn px-8 py-[11px] bg-black text-white hover:bg-primary"
|
||||
>
|
||||
Book A Seat
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Event;
|
||||
@@ -0,0 +1,54 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from 'react'
|
||||
import { clock, file, star } from '../../constant/images'
|
||||
|
||||
const SingleCourse = ({ data }) => {
|
||||
return (
|
||||
<>
|
||||
{ }
|
||||
<div className="cat-2 cat-3 grid-item xl:w-1/3 lg:w-1/2 w-full px-[15px] mb-[15px]">
|
||||
<a
|
||||
className=" bg-white shadow-box2 rounded-[8px] transition duration-100
|
||||
hover:shadow-sm block mb-5 "
|
||||
href="#"
|
||||
>
|
||||
<div className="course-thumb h-[248px] rounded-t-[8px] relative">
|
||||
<img
|
||||
src={data.img}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded-t-[8px]"
|
||||
/>
|
||||
<span className="bg-secondary py-1 px-3 text-lg font-semibold rounded
|
||||
text-white absolute left-6 top-6">
|
||||
{data.post}
|
||||
</span>
|
||||
</div>
|
||||
<div className="course-content p-8">
|
||||
<div className="text-secondary font-bold text-2xl mb-3">
|
||||
{data.price}
|
||||
</div>
|
||||
<h4 className=" text-xl mb-3 font-bold">
|
||||
{data.title}
|
||||
</h4>
|
||||
<div className="flex justify-between space-x-3">
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src={file} alt="" />
|
||||
<span>2 Lessons</span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src={clock} alt="" />
|
||||
<span>4h 30m</span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src={star} alt="" />
|
||||
<span>4.8</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SingleCourse
|
||||
@@ -0,0 +1,98 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { instructorData } from "../../constant/dummyData";
|
||||
|
||||
const Team = () => {
|
||||
return (
|
||||
<div className=" section-padding">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<div className="mini-title">Team Member</div>
|
||||
<div className="column-title ">
|
||||
Our Expert <span className="shape-bg">Instructors</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-7 pt-10">
|
||||
{instructorData.map((item, index) => (
|
||||
<div
|
||||
className=" bg-white shadow-box3 rounded-md transition-all duration-100 text-center hover:shadow-box4 "
|
||||
key={index}
|
||||
>
|
||||
<div className=" h-[270px] rounded-t-md relative mx-auto overflow-hidden">
|
||||
<img
|
||||
src={item.img}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded-t-md "
|
||||
/>
|
||||
<div className=" absolute right-0 bottom-0 flex flex-col justify-end items-end social-explore">
|
||||
<button
|
||||
type="button"
|
||||
className="h-12 w-12 bg-secondary text-white rounded-tl-md flex flex-col items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
opacity="0.01"
|
||||
width="18"
|
||||
height="18"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9 2.25C9.62132 2.25 10.125 2.75368 10.125 3.375V7.875H14.625C15.2463 7.875 15.75 8.37868 15.75 9C15.75 9.62132
|
||||
15.2463 10.125 14.625 10.125H10.125V14.625C10.125 15.2463 9.62132 15.75 9 15.75C8.37868 15.75 7.875 15.2463 7.875
|
||||
14.625V10.125H3.375C2.75368 10.125 2.25 9.62132 2.25 9C2.25 8.37868 2.75368 7.875 3.375 7.875H7.875V3.375C7.875 2.75368
|
||||
8.37868 2.25 9 2.25Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul className=" justify-center bg-primary rounded-tl-md transition-all duration-100 flex ">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className=" text-xl leading-[1] text-white flex h-12 w-12 items-center justify-center"
|
||||
>
|
||||
<iconify-icon icon="bxl:facebook"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className=" text-xl leading-[1] text-white flex h-12 w-12 items-center justify-center"
|
||||
>
|
||||
<iconify-icon icon="bxl:twitter"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className=" text-xl leading-[1] flex h-12 w-12 items-center justify-center text-white "
|
||||
>
|
||||
<iconify-icon icon="bxl:linkedin"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="course-content p-6">
|
||||
<h4 className=" lg:text-2xl text-1xl mb-1 font-bold">
|
||||
{item.name}
|
||||
</h4>
|
||||
<div>{item.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
@@ -0,0 +1,154 @@
|
||||
import React, { useRef } from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { EffectCreative, Navigation } from "swiper";
|
||||
import { t1 } from "../../constant/images";
|
||||
import "swiper/css/bundle";
|
||||
import "swiper/css";
|
||||
import "swiper/css/effect-creative";
|
||||
import "swiper/css/navigation";
|
||||
|
||||
const Testimonial = () => {
|
||||
const prevBtn = useRef(null);
|
||||
const nextBtn = useRef(null);
|
||||
return (
|
||||
<div className=" section-padding bg-[url('../images/all-img/section-bg-12.png')] bg-no-repeat bg-cover">
|
||||
<Swiper
|
||||
navigation={{
|
||||
prevEl: ".slickprev",
|
||||
nextEl: ".slicknext",
|
||||
}}
|
||||
spaceBetween={30}
|
||||
loop
|
||||
effect={"creative"}
|
||||
creativeEffect={{
|
||||
prev: {
|
||||
shadow: true,
|
||||
translate: [0, 0, -400],
|
||||
opacity: [0],
|
||||
},
|
||||
next: {
|
||||
translate: ["100%", 0, 0],
|
||||
},
|
||||
}}
|
||||
modules={[Navigation, EffectCreative]}
|
||||
className="container"
|
||||
>
|
||||
<SwiperSlide className="grid lg:grid-cols-2 grid-cols-1 xl:gap-[60px] gap-6">
|
||||
<div>
|
||||
<div className="slider-nav">
|
||||
<div className="single-item">
|
||||
<div className="xl:h-[593px] lg:h-[400px] h-[150px] lg:w-full w-[150px] rounded-md">
|
||||
<img
|
||||
src={t1}
|
||||
alt=""
|
||||
className=" object-cover w-full h-full rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mini-title">Testimonial</div>
|
||||
<h4 className="column-title ">
|
||||
Our Tallented Students Valuable
|
||||
<span className="shape-bg text-black">Feedback</span>
|
||||
</h4>
|
||||
<div className="slider-for mt-10">
|
||||
<div className="single-item">
|
||||
<div>
|
||||
<h3 className=" text-2xl font-bold text-black mb-8">
|
||||
“It’s Truly The Best Solution For Me”
|
||||
</h3>
|
||||
<div className="mb-8">
|
||||
There are many variations of passages of Lorem Ipsum
|
||||
available, but the majority have suffered. There are many
|
||||
variations of passages of Lorem Ipsum available, but the
|
||||
majority have suffered alteration.
|
||||
</div>
|
||||
<div>
|
||||
<span className=" block font-semibold text-black mb-1">
|
||||
Alfred Helmerich
|
||||
</span>
|
||||
<span className=" block font-semibold text-primary">
|
||||
Executive Training Manager
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="grid lg:grid-cols-2 grid-cols-1 xl:gap-[60px] gap-6">
|
||||
<div>
|
||||
<div className="slider-nav">
|
||||
<div className="single-item">
|
||||
<div className="xl:h-[593px] lg:h-[400px] h-[150px] lg:w-full w-[150px] rounded-md">
|
||||
<img
|
||||
src={t1}
|
||||
alt=""
|
||||
className=" object-cover w-full h-full rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mini-title">Testimonial</div>
|
||||
<h4 className="column-title ">
|
||||
Our Tallented Students Valuable
|
||||
<span className="shape-bg text-black">Feedback</span>
|
||||
</h4>
|
||||
<div className="slider-for mt-10">
|
||||
<div className="single-item">
|
||||
<div>
|
||||
<h3 className=" text-2xl font-bold text-black mb-8">
|
||||
“It’s Truly The Best Solution For Me”
|
||||
</h3>
|
||||
<div className="mb-8">
|
||||
There are many variations of passages of Lorem Ipsum
|
||||
available, but the majority have suffered.
|
||||
</div>
|
||||
<div>
|
||||
<span className=" block font-semibold text-black mb-1">
|
||||
Alfred Helmerich
|
||||
</span>
|
||||
<span className=" block font-semibold text-primary">
|
||||
Executive Training Manager
|
||||
</span>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span className=" block font-semibold text-black mb-1">
|
||||
Alfred Helmerich
|
||||
</span>
|
||||
<span className=" block font-semibold text-primary">
|
||||
Executive Training Director
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<div className="space-x-5 flex justify-center lg:mt-10 mt-8">
|
||||
<button
|
||||
className="lg:h-[64px] lg:w-[64px] h-12 w-12 flex flex-col items-center justify-center rounded-md bg-white hover:bg-primary
|
||||
hover:text-white shadow-box slickprev text-3xl text-primary"
|
||||
ref={prevBtn}
|
||||
>
|
||||
<iconify-icon icon="heroicons:arrow-left-20-solid"></iconify-icon>
|
||||
</button>
|
||||
<button
|
||||
className="lg:h-[64px] lg:w-[64px] h-12 w-12 flex flex-col items-center justify-center rounded-md bg-white hover:bg-primary
|
||||
hover:text-white shadow-box slicknext text-3xl text-primary"
|
||||
ref={nextBtn}
|
||||
>
|
||||
<iconify-icon icon="heroicons:arrow-right-20-solid"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonial;
|
||||
Reference in New Issue
Block a user