first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,74 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import lightImg from "../assets/images/svg/light.svg";
|
||||
import aboutOne from "../assets/images/all-img/about1.png";
|
||||
import targetImg from "../assets/images/svg/target.svg";
|
||||
const About = () => {
|
||||
return (
|
||||
<div className="about-area section-padding">
|
||||
<div className="container">
|
||||
<div className="grid lg:grid-cols-2 grid-cols-1 gap-10">
|
||||
<div>
|
||||
<img src={aboutOne} alt="aboutOne" className=" mx-auto" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="mini-title">About Edumim</div>
|
||||
<h4 className="column-title ">
|
||||
The Place Where You Can
|
||||
<span className="shape-bg">Achieve</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-[72px] w-[72px] rounded-full">
|
||||
<img
|
||||
src={lightImg}
|
||||
alt="lightImg"
|
||||
className=" w-full h-full object-cover rounded-full block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className=" text-xl mb-1">Our Mission</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-[72px] w-[72px] rounded-full">
|
||||
<img
|
||||
src={targetImg}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded-full block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className=" text-xl mb-1">Our Vision</h4>
|
||||
<div>
|
||||
There are many variations of passages of the Lorem Ipsum
|
||||
available.
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pt-8">
|
||||
<a href="#" className=" btn btn-primary">
|
||||
Read More Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
|
||||
const AboutBanner = ({text}) => {
|
||||
return (
|
||||
<div class="breadcrumbs section-padding bg-[url('../images/all-img/bred.png')] bg-cover bg-center bg-no-repeat">
|
||||
<div class="container text-center">
|
||||
<h2>About Us</h2>
|
||||
<nav>
|
||||
<ol class="flex items-center justify-center space-x-3">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="index.html">Pages </a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">-</li>
|
||||
<li class="text-primary">{text}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutBanner;
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
import mailIcon from "../assets/images/icon/mail.svg";
|
||||
import ManOne from "../assets/images/banner/man1.png";
|
||||
|
||||
const Banner = () => {
|
||||
return (
|
||||
<section
|
||||
className={`xl:min-h-screen bg-[url('../images/banner/1.png')] bg-cover bg-no-repeat bg-center overflow-hidden`}
|
||||
>
|
||||
<div className="container relative">
|
||||
<div className="max-w-[570px] xl:pt-[297px] md:pt-20 md:pb-20 pt-28 pb-14 xl:pb-40 space-y-8">
|
||||
<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]">
|
||||
It is long established fact that reader distracted by the readable
|
||||
content.
|
||||
</div>
|
||||
<div className="bg-white md:flex rounded-md shadow-e1 items-center py-[10px] relative lg:pr-[10px] lg:pl-[38px] pl-4 pr-4">
|
||||
<div className="flex-1 flex items-center lg:mb-0 mb-2">
|
||||
<div className="flex-none">
|
||||
<span className=" ">
|
||||
<img src={mailIcon} alt="mainIcon" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your mail"
|
||||
className="border-none focus:ring-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<button className="btn btn-primary w-full lg:w-auto">
|
||||
Get Started Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="imge-box absolute xl:right-[-260px] hidden xl:block bottom-0 ">
|
||||
<img src={ManOne} alt="manOne" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Banner;
|
||||
@@ -0,0 +1,637 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import {
|
||||
bs1,
|
||||
bs2,
|
||||
bs3,
|
||||
user3,
|
||||
comment,
|
||||
q,
|
||||
calender,
|
||||
clockIcon,
|
||||
fbIcon,
|
||||
pnIcon,
|
||||
twIcon,
|
||||
insIcon,
|
||||
rc3,
|
||||
rc1,
|
||||
insIcon1,
|
||||
insIcon3,
|
||||
insIcon2,
|
||||
search,
|
||||
rc2,
|
||||
insIcon4,
|
||||
insIcon5,
|
||||
insIcon6,
|
||||
} from "../constant/images";
|
||||
import ContactForm from "./ContactForm";
|
||||
|
||||
const BlogPost = () => {
|
||||
return (
|
||||
<div className="nav-tab-wrapper tabs section-padding">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-12 gap-[30px]">
|
||||
<div className="lg:col-span-8 col-span-12">
|
||||
<div className="bg-[#F8F8F8] rounded-md">
|
||||
<img src={bs1} alt="" className=" rounded-t-md mb-10" />
|
||||
<div className="px-10 pb-10">
|
||||
<div className="flex flex-wrap xl:space-x-10 space-x-5 mt-6 mb-6">
|
||||
<a className=" flex items-center space-x-2" href="#">
|
||||
<img src={user3} alt="" />
|
||||
<span>Edumim</span>
|
||||
</a>
|
||||
<a className=" flex items-center space-x-2" href="#">
|
||||
<img src={calender} alt="" />
|
||||
<span>3 21 Feb, 22</span>
|
||||
</a>
|
||||
<a className=" flex items-center space-x-2" href="#">
|
||||
<img src={clockIcon} alt="" />
|
||||
<span>3 Min Read</span>
|
||||
</a>
|
||||
<a className=" flex items-center space-x-2" href="#">
|
||||
<img src={comment} alt="" />
|
||||
<span>02 Comments</span>
|
||||
</a>
|
||||
</div>
|
||||
<h3>
|
||||
Learn At Your Own Pace, with Lifetime Access on Mobile &
|
||||
Desktop
|
||||
</h3>
|
||||
<p className="mt-6">
|
||||
There are many variations of passages of Lorem Ipsum
|
||||
available, but the majority have suffered alteration in some
|
||||
form, by injected humour, or randomised words which don’t look
|
||||
even slightly believable. As students across the globe
|
||||
continue to see their learning plans significantly.
|
||||
</p>
|
||||
<blockquote className=" bg-secondary p-8 rounded-md bg-[url('../images/all-img/bb.png')] bg-cover bg-no-repeat bg-center my-8 text-white">
|
||||
<img src={q} alt="" />
|
||||
<div className=" text-xl font-semibold my-6">
|
||||
“ Education is one of the most powerful aspects of life.
|
||||
Education and learning allow us to make sense of the world
|
||||
around us, the world inside of us, and where we fit within
|
||||
the world.”
|
||||
</div>
|
||||
<div className=" flex items-center space-x-3">
|
||||
<span className=" inline-flex h-[3px] w-12 bg-white"></span>
|
||||
<span className=" text-xl font-semibold">
|
||||
Rosalina D. Jackson
|
||||
</span>
|
||||
</div>
|
||||
</blockquote>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum
|
||||
available, but the majority have suffered alteration in some
|
||||
form, by injected humour, or randomised words which don’t look
|
||||
even slightly believable. As students across the globe
|
||||
continue to see their learning plans significantly.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 grid-cols-1 gap-[30px] my-8">
|
||||
<img src={bs2} alt="" />
|
||||
<img src={bs3} alt="" />
|
||||
</div>
|
||||
<h4 className="text-2xl mb-4">
|
||||
Education Is About Academic Excellence And Cultural Diversity
|
||||
Learning Community
|
||||
</h4>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum
|
||||
available, but the majority have suffered alteration in some
|
||||
form, by injected humour, or randomised words which don’t look
|
||||
even slightly believable.
|
||||
</p>
|
||||
<ul className="list-disc marker:text-secondary space-y-4 mt-6">
|
||||
<li className="">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li className="">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
<li className="">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</li>
|
||||
</ul>
|
||||
<div className="grid xl:grid-cols-2 grid-cols-1 gap-5 md:mt-14 mt-8 ">
|
||||
<ul className="flex items-center space-x-3 ">
|
||||
<li className=" text-black font-semibold">Tags:</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className=" px-3 py-1 bg-white rounded hover:text-primary"
|
||||
>
|
||||
Business
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className=" px-3 py-1 bg-white rounded hover:text-primary"
|
||||
>
|
||||
Education
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className=" px-3 py-1 bg-white rounded hover:text-primary"
|
||||
>
|
||||
Design
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="flex space-x-3 xl:justify-end items-center ">
|
||||
<li className=" text-black font-semibold">Share On:</li>
|
||||
|
||||
{[fbIcon, pnIcon, twIcon, insIcon].map((item, indx) => (
|
||||
<li key={indx}>
|
||||
<a href="#" className="flex h-8 w-8">
|
||||
<img src={item} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="grid xl:grid-cols-2 grid-cols-1 gap-[30px] md:mt-14 mt-8">
|
||||
<a
|
||||
className=" flex space-x-4 shadow-box7 rounded p-5 bg-white"
|
||||
href="#"
|
||||
>
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded">
|
||||
<img
|
||||
src={rc1}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 ">
|
||||
<span className=" text-primary text-base mb-1">
|
||||
Prev Post
|
||||
</span>
|
||||
<div className="mb-1 font-semibold text-black">
|
||||
How Technology Can Help You Stay Healthy
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
className=" flex flex-row-reverse shadow-box7 bg-white rounded p-5"
|
||||
href="#"
|
||||
>
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded ml-4">
|
||||
<img
|
||||
src={rc3}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 text-right ">
|
||||
<span className=" text-primary text-base mb-1">
|
||||
Next Post
|
||||
</span>
|
||||
<div className="mb-1 font-semibold text-black">
|
||||
How Technology Can Help You Stay Healthy
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" mt-14">
|
||||
<h3 className=" mb-6">3 Comments</h3>
|
||||
<ul className="comments space-y-4">
|
||||
<li className="block border-b border-[#ECECEC] pb-6 mt-6 last:border-0 last:pb-0">
|
||||
<div className="flex">
|
||||
<div className="flex-none">
|
||||
<div className="h-[72px] w-[72px] rounded-full mr-6">
|
||||
<img
|
||||
src={insIcon1}
|
||||
alt=""
|
||||
className="w-full block h-full object-contain rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-wrap justify-between mb-2">
|
||||
<div>
|
||||
<span className="text-xl font-semibold text-black block mb-1">
|
||||
Ferira Watson
|
||||
</span>
|
||||
<span className=" block">Oct 09, 2021</span>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className=" inline-flex px-3 py-1 rounded text-secondary bg-[#E3F9F6] hover:text-white hover:bg-secondary h-[35px]
|
||||
items-center space-x-2 leading-[1]"
|
||||
>
|
||||
<span className=" text-xl leading-[1] top-[3px] relative">
|
||||
<iconify-icon
|
||||
icon="charm:forward"
|
||||
rotate="180deg"
|
||||
></iconify-icon>
|
||||
</span>
|
||||
<span className=" leading-[1]">Reply</span>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum
|
||||
available, but the majority have suffered alteration in
|
||||
some form
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="comments mt-6 space-y-4 ml-14 border-t border-[#ECECEC]">
|
||||
<li className="block border-b border-[#ECECEC] pb-6 mt-6 last:border-0 last:pb-0">
|
||||
<div className="flex">
|
||||
<div className="flex-none">
|
||||
<div className="h-[72px] w-[72px] rounded-full mr-6">
|
||||
<img
|
||||
src={insIcon3}
|
||||
alt=""
|
||||
className="w-full block h-full object-contain rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-wrap justify-between mb-2">
|
||||
<div>
|
||||
<span className="text-xl font-semibold text-black block mb-1">
|
||||
Ferira Watson
|
||||
</span>
|
||||
<span className=" block">Oct 09, 2021</span>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className=" inline-flex px-3 py-1 rounded text-secondary bg-[#E3F9F6] hover:text-white hover:bg-secondary h-[35px]
|
||||
items-center space-x-2 leading-[1]"
|
||||
>
|
||||
<span className=" text-xl leading-[1] top-[3px] relative">
|
||||
<iconify-icon
|
||||
icon="charm:forward"
|
||||
rotate="180deg"
|
||||
></iconify-icon>
|
||||
</span>
|
||||
<span className=" leading-[1]">Reply</span>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum
|
||||
available, but the majority have suffered alteration
|
||||
in some form
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="block">
|
||||
<div className="flex">
|
||||
<div className="flex-none">
|
||||
<div className="h-[72px] w-[72px] rounded-full mr-6">
|
||||
<img
|
||||
src={insIcon2}
|
||||
alt=""
|
||||
className="w-full block h-full object-contain rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-wrap justify-between mb-2">
|
||||
<div>
|
||||
<span className="text-xl font-semibold text-black block mb-1">
|
||||
Ferira Watson
|
||||
</span>
|
||||
<span className=" block">Oct 09, 2021</span>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className=" inline-flex px-3 py-1 rounded text-secondary bg-[#E3F9F6] hover:text-white hover:bg-secondary h-[35px]
|
||||
items-center space-x-2 leading-[1]"
|
||||
>
|
||||
<span className=" text-xl leading-[1] top-[3px] relative">
|
||||
<iconify-icon
|
||||
icon="charm:forward"
|
||||
rotate="180deg"
|
||||
></iconify-icon>
|
||||
</span>
|
||||
<span className=" leading-[1]">Reply</span>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum
|
||||
available, but the majority have suffered alteration in
|
||||
some form
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className=" mt-14">
|
||||
<h3 className=" mb-4">Leave A Reply</h3>
|
||||
<div>
|
||||
Your email address will not be published. Requires fields are
|
||||
marked*
|
||||
</div>
|
||||
<ContactForm />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-4 col-span-12">
|
||||
<div className="sidebarWrapper space-y-[30px]">
|
||||
<div className="wdiget widget_search">
|
||||
<div className="bg-[#F8F8F8] flex rounded-md shadow-e1 items-center py-[4px] pl-3 relative">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search keyword..."
|
||||
className="border-none focus:ring-0 bg-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<button className="btn btn-primary">
|
||||
<img src={search} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wdiget widget_catagory">
|
||||
<h4 className="widget-title">Categories</h4>
|
||||
|
||||
<ul className=" list-item space-y-4">
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Development (23)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Art & Design (45)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Data Science (14)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Data Science (14)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Technology (28)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>It Management (34)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="wdiget widget-recent-post">
|
||||
<h4 className=" widget-title">Related Courses</h4>
|
||||
<ul className="list">
|
||||
<li className=" flex space-x-4 border-[#ECECEC] pb-6 mb-6 last:pb-0 last:mb-0 last:border-0 border-b">
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded">
|
||||
<img
|
||||
src={rc1}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 ">
|
||||
<div className="mb-1 font-semibold text-black">
|
||||
How to Manage Ads For Clients The Right Way
|
||||
</div>
|
||||
<a className=" text-secondary font-semibold" href="#">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className=" flex space-x-4 border-[#ECECEC] pb-6 mb-6 last:pb-0 last:mb-0 last:border-0 border-b">
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded">
|
||||
<img
|
||||
src={rc2}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 ">
|
||||
<div className="mb-1 font-semibold text-black">
|
||||
How to Manage Ads For Clients The Right Way
|
||||
</div>
|
||||
<a className=" text-secondary font-semibold" href="#">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className=" flex space-x-4 border-[#ECECEC] pb-6 mb-6 last:pb-0 last:mb-0 last:border-0 border-b">
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded">
|
||||
<img
|
||||
src={rc3}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 ">
|
||||
<div className="mb-1 font-semibold text-black">
|
||||
How to Manage Ads For Clients The Right Way
|
||||
</div>
|
||||
<a className=" text-secondary font-semibold" href="#">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="wdiget">
|
||||
<h4 className="widget-title">Popular Tags</h4>
|
||||
<ul className="flex flex-wrap">
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Business
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Education
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Design
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Students
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Teachers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
classNameroom
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Online
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
e-Learning
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-
|
||||
white"
|
||||
>
|
||||
Book
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="wdiget">
|
||||
<h4 className="widget-title">Instagram Feed</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[
|
||||
insIcon1,
|
||||
insIcon2,
|
||||
insIcon3,
|
||||
insIcon4,
|
||||
insIcon5,
|
||||
insIcon6,
|
||||
].map((item, index) => (
|
||||
<div key={index}>
|
||||
<a
|
||||
href="#"
|
||||
className="group relative block h-20 w-full rounded"
|
||||
>
|
||||
<img
|
||||
src={item}
|
||||
alt=""
|
||||
className="block h-full w-full rounded object-cover"
|
||||
/>
|
||||
<div
|
||||
className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded bg-black
|
||||
bg-opacity-40
|
||||
text-3xl text-white opacity-0 transition-all duration-150 group-hover:opacity-100"
|
||||
>
|
||||
<span className="scale-0 transition-all duration-150 group-hover:scale-100">
|
||||
<iconify-icon icon="akar-icons:instagram-fill"></iconify-icon>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPost;
|
||||
@@ -0,0 +1,81 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import admin from "../assets/images/svg/admin.svg";
|
||||
import calender from "../assets/images/svg/calender.svg";
|
||||
import { blogsData } from "../constant/dummyData";
|
||||
const Blogs = () => {
|
||||
return (
|
||||
<div className=" section-padding bg-[url('../images/all-img/section-bg-5.png')] bg-cover bg-no-repeat bg-center">
|
||||
<div className="container">
|
||||
<div className="lg:flex justify-between items-center ">
|
||||
<div className="mb-3">
|
||||
<div className="mini-title">Team Member</div>
|
||||
<div className="column-title ">
|
||||
Our Latest <span className="shape-bg">Blogs</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<a href="#" className=" btn btn-primary">
|
||||
Read All Blogs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px] pt-7">
|
||||
{blogsData.map((blog, index) => (
|
||||
<div
|
||||
className=" bg-white shadow-box5 rounded-[8px] transition duration-100 hover:shadow-box3"
|
||||
key={index}
|
||||
>
|
||||
<div className="course-thumb h-[260px] rounded-t-[8px] relative">
|
||||
<img
|
||||
src={blog.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">
|
||||
{blog.type}
|
||||
</span>
|
||||
</div>
|
||||
<div className="course-content p-8">
|
||||
<div className="flex lg:space-x-10 space-x-5 mb-5">
|
||||
<Link
|
||||
to={"/react-templates/edumim/single-blog"}
|
||||
className=" flex items-center space-x-2"
|
||||
>
|
||||
<img src={admin} alt="" />
|
||||
<span>{blog.position}</span>
|
||||
</Link>
|
||||
<Link
|
||||
to={"/react-templates/edumim/single-blog"}
|
||||
className=" flex items-center space-x-2"
|
||||
>
|
||||
<img src={calender} alt="" />
|
||||
<span>{blog.date}</span>
|
||||
</Link>
|
||||
</div>
|
||||
<h4 className=" text-xl mb-5 font-bold">
|
||||
<Link
|
||||
to={"/react-templates/edumim/single-blog"}
|
||||
className=" hover:text-primary transition duration-150"
|
||||
>
|
||||
{blog.title}
|
||||
</Link>
|
||||
</h4>
|
||||
<Link
|
||||
to={"/react-templates/edumim/single-blog"}
|
||||
className=" text-black font-semibold hover:underline transition duration-150"
|
||||
>
|
||||
Read More
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blogs;
|
||||
@@ -0,0 +1,36 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import brand1 from "../assets/images/all-img/brands/1.svg";
|
||||
import brand2 from "../assets/images/all-img/brands/2.svg";
|
||||
import brand3 from "../assets/images/all-img/brands/3.svg";
|
||||
import brand4 from "../assets/images/all-img/brands/4.svg";
|
||||
import brand5 from "../assets/images/all-img/brands/5.svg";
|
||||
const Brands = ({ section_padding_bottom, section_padding_top }) => {
|
||||
return (
|
||||
<div
|
||||
className={`brands-area ${section_padding_bottom} ${section_padding_top}`}
|
||||
>
|
||||
<div className="container">
|
||||
<div className="text-center text-black text-2xl font-medium mb-[50px]">
|
||||
<span className=" shape-bg mini">Trusted</span> By 1k+ Company Arround
|
||||
The World!
|
||||
</div>
|
||||
|
||||
<ul className="flex flex-wrap items-center lg:justify-between justify-center ">
|
||||
{[brand1, brand2, brand3, brand4, brand5].map((item, index) => (
|
||||
<li
|
||||
className=" mb-6 last:mb-0 mr-6 last:mr-0 transition duration-150 grayscale-[80] hover:grayscale-0 "
|
||||
key={index}
|
||||
>
|
||||
<a href="#" className=" block">
|
||||
<img src={item} alt="brandImg" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Brands;
|
||||
@@ -0,0 +1,94 @@
|
||||
import React, { useState } from "react";
|
||||
import emailjs from "@emailjs/browser";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const ContactForm = () => {
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState();
|
||||
const [webAdress, setWebAdress] = useState();
|
||||
const [message, setMessage] = useState();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const naviget = useNavigate();
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
const templateParams = {
|
||||
name: name,
|
||||
email: email,
|
||||
webAdress: webAdress,
|
||||
message: message,
|
||||
};
|
||||
console.log(templateParams);
|
||||
|
||||
emailjs
|
||||
.send(
|
||||
"service_ns6jxe8",
|
||||
"template_oxnjbzr",
|
||||
templateParams,
|
||||
"VrrYupDuebtgZisdc"
|
||||
)
|
||||
.then(
|
||||
(response) => {
|
||||
console.log("SUCCESS!", response.status, response.text);
|
||||
setEmail("");
|
||||
setName("");
|
||||
setMessage("");
|
||||
naviget("/react-templates/edumim/thanks");
|
||||
setLoading(false);
|
||||
},
|
||||
(err) => {
|
||||
setLoading(false);
|
||||
console.log("FAILED...", err);
|
||||
}
|
||||
);
|
||||
};
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className=" md:grid-cols-2 grid grid-cols-1 gap-[30px] mt-6 "
|
||||
>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
className=" from-control"
|
||||
placeholder="Name*"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="email"
|
||||
className=" from-control"
|
||||
placeholder="Email*"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 col-span-1">
|
||||
<input
|
||||
type="url"
|
||||
className=" from-control"
|
||||
placeholder="Website Address"
|
||||
value={webAdress}
|
||||
onChange={(e) => setWebAdress(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 col-span-1">
|
||||
<textarea
|
||||
className=" from-control"
|
||||
placeholder="Your Message*"
|
||||
rows="5"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
></textarea>
|
||||
</div>
|
||||
<button class="btn btn-primary mt-[10px]" type="submit" name="submit">
|
||||
{loading ? 'sending..' : 'Send Message'}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
@@ -0,0 +1,156 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { courseData } from "../constant/dummyData";
|
||||
import Course from "./Course";
|
||||
import {
|
||||
fbIcon,
|
||||
pnIcon,
|
||||
twIcon,
|
||||
insIcon,
|
||||
singleIns,
|
||||
counter1,
|
||||
counter2,
|
||||
counter3,
|
||||
} from "../constant/images";
|
||||
|
||||
const CoralinaCloud = () => {
|
||||
return (
|
||||
<div className="section-padding bg-[url('../images/all-img/insbg.png')] bg-contain bg-no-repeat">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-12 xl:gap-0 gap-[30px]">
|
||||
<div className="lg:col-span-4 col-span-12 ">
|
||||
<div className="bg-white shadow-box7 rounded-md max-w-[350px] lg:sticky lg:top-10">
|
||||
<div className="h-[400px] mb-8">
|
||||
<img
|
||||
src={singleIns}
|
||||
alt=""
|
||||
className="w-full h-full block object-cover rounded-t-md"
|
||||
/>
|
||||
</div>
|
||||
<div className="px-8 pb-8">
|
||||
<h5 className=" text-2xl font-bold text-black mb-4">
|
||||
Coralina Cloud
|
||||
</h5>
|
||||
<div className="mb-8">
|
||||
Professor & Chair of Department of Computer Science at
|
||||
University the where been since 1994. vulput for the
|
||||
pellentesque commodo.
|
||||
</div>
|
||||
<ul className=" space-y-[19px]">
|
||||
<li className=" flex items-center space-x-3">
|
||||
<div className="flex-none">
|
||||
<span className="w-8 h-8 rounded bg-secondary text-white flex flex-col items-center justify-center text-lg">
|
||||
<iconify-icon icon="heroicons:envelope"></iconify-icon>
|
||||
</span>
|
||||
</div>
|
||||
<span className=" flex-1">info@designpixls.com</span>
|
||||
</li>
|
||||
<li className=" flex items-center space-x-3">
|
||||
<div className="flex-none">
|
||||
<span className="w-8 h-8 rounded bg-secondary text-white flex flex-col items-center justify-center text-lg">
|
||||
<iconify-icon icon="heroicons:phone"></iconify-icon>
|
||||
</span>
|
||||
</div>
|
||||
<span className=" flex-1">8939 2390 3879 29</span>
|
||||
</li>
|
||||
<li className=" flex items-center space-x-3">
|
||||
<div className="flex-none">
|
||||
<span className="w-8 h-8 rounded bg-secondary text-white flex flex-col items-center justify-center text-lg">
|
||||
<iconify-icon icon="heroicons:map-pin"></iconify-icon>
|
||||
</span>
|
||||
</div>
|
||||
<span className=" flex-1">6/2, Stavello Hall, Sydney</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className=" text-xl text-black mt-8 mb-4">
|
||||
Follow Me On:
|
||||
</div>
|
||||
<ul className="flex space-x-4 ">
|
||||
{[fbIcon, pnIcon, twIcon, insIcon].map((item, indx) => (
|
||||
<li key={indx}>
|
||||
<a href="#" className="flex h-10 w-10">
|
||||
<img src={item} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-8 col-span-12">
|
||||
<div className="mb-10">
|
||||
<h2>Coralina Cloud</h2>
|
||||
<span className=" inline-block text-primary">UI/UX Designer</span>
|
||||
</div>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
|
||||
vulputate pellentesque commodo. Lorem ipsum dolor sit amet,
|
||||
consectetur adipiscing elit.
|
||||
<br /> <br /> Donec faucibus imperdiet libero, at lacinia metus.
|
||||
Quisque finibus ante non arcu aliquet, nec vestibulum dolor
|
||||
condimentum. Nulla facilisi. Vestibulum porttitor vestibulum est
|
||||
eu dignissim. Quisque blandit elementum convallis. Ut et mi
|
||||
hendrerit, posuere purus ac, facilisis nibh.
|
||||
</div>
|
||||
<div className=" grid xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px] mt-24">
|
||||
<div className="bg-white shadow-box7 text-center pt-[64px] pb-8 px-[50px] rounded-[8px] relative my-4">
|
||||
<img
|
||||
src={counter1}
|
||||
alt=""
|
||||
className=" absolute left-1/2 -translate-x-1/2 -top-10"
|
||||
/>
|
||||
<h4 className=" text-[44px] leading-[66px] text-black font-bold mb-1 ">
|
||||
<span className="counter">82</span>
|
||||
k+
|
||||
</h4>
|
||||
<p>Enrolled Students</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow-box7 text-center pt-[64px] pb-8 px-[50px] rounded-[8px] relative my-4">
|
||||
<img
|
||||
src={counter2}
|
||||
alt=""
|
||||
className=" absolute left-1/2 -translate-x-1/2 -top-10"
|
||||
/>
|
||||
<h4 className=" text-[44px] leading-[66px] text-black font-bold mb-1 ">
|
||||
<span className="counter">460</span>+
|
||||
</h4>
|
||||
<p>Academic Programs</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow-box7 text-center pt-[64px] pb-8 px-[50px] rounded-[8px] relative my-4">
|
||||
<img
|
||||
src={counter3}
|
||||
alt=""
|
||||
className=" absolute left-1/2 -translate-x-1/2 -top-10"
|
||||
/>
|
||||
<h4 className=" text-[44px] leading-[66px] text-black font-bold mb-1 ">
|
||||
<span className="counter">20</span>+
|
||||
</h4>
|
||||
<p>Certified Students</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-20 mb-14">
|
||||
<div className="mini-title">Courses By Coralina</div>
|
||||
<div className="column-title ">
|
||||
Courses By <span className="shape-bg">Coralina</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" grid xl:grid-cols-2 lg:grid-cols-1 md:grid-cols-2 grid-cols-1 gap-[30px]">
|
||||
{courseData.map((course, index) => (
|
||||
<Course course={course} key={index} index={index} />
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center lg:pt-14 pt-8">
|
||||
<a href="#" className=" btn btn-primary">
|
||||
View All Courses
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CoralinaCloud;
|
||||
@@ -0,0 +1,46 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { clock, file, star } from "../constant/images";
|
||||
|
||||
const course = ({ course, index }) => {
|
||||
return (
|
||||
<a
|
||||
className=" bg-white shadow-box2 rounded-[8px] transition duration-100 hover:shadow-sm"
|
||||
href="#"
|
||||
key={Math.random() * 1000 * index}
|
||||
>
|
||||
<div className="course-thumb h-[248px] rounded-t-[8px] relative">
|
||||
<img
|
||||
src={course.img}
|
||||
alt="images"
|
||||
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">
|
||||
{course.post}
|
||||
</span>
|
||||
</div>
|
||||
<div className="course-content p-8">
|
||||
<div className="text-secondary font-bold text-2xl mb-3">
|
||||
{course.price}
|
||||
</div>
|
||||
<h4 className=" text-xl mb-3 font-bold">{course.title}</h4>
|
||||
<div className="flex justify-between space-x-3">
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src={file} alt="" />
|
||||
<span>{course.lesson}</span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src={clock} alt="" />
|
||||
<span>{course.time}</span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src={star} alt="" />
|
||||
<span>{course.ratings}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default course;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { courseData } from "../constant/dummyData";
|
||||
import Course from "./Course";
|
||||
const Courses = () => {
|
||||
return (
|
||||
<div className=" section-padding">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<div className="mini-title">Popular Courses</div>
|
||||
<div className="column-title ">
|
||||
Choose Our Top <span className="shape-bg">Courses</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px] pt-10">
|
||||
{courseData.map((course, index) => (
|
||||
<Course course={course} key={index} index={index} />
|
||||
))}
|
||||
</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 Courses;
|
||||
@@ -0,0 +1,229 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React, { useEffect } from "react";
|
||||
import {
|
||||
fbIcon,
|
||||
pnIcon,
|
||||
twIcon,
|
||||
insIcon,
|
||||
mainEvent,
|
||||
circleClock,
|
||||
rc1,
|
||||
rc2,
|
||||
} from "../constant/images";
|
||||
|
||||
const EventDetails = () => {
|
||||
useEffect(() => {
|
||||
if (document.getElementById("timer")) {
|
||||
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime(); // Update the count down every 1 second
|
||||
|
||||
var x = setInterval(function () {
|
||||
// Get today's date and time
|
||||
var now = new Date().getTime(); // Find the distance between now and the count down date
|
||||
|
||||
var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds
|
||||
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor(
|
||||
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
||||
);
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo"
|
||||
|
||||
document.getElementById("timer").innerHTML =
|
||||
"<div class='text-[44px] font-bold'>" +
|
||||
days +
|
||||
"<div class=' text-lg font-medium mt-2 capitalize'>days</div></div>" +
|
||||
"<div class='text-[44px] font-bold'>" +
|
||||
hours +
|
||||
"<div class='text-lg font-medium mt-2 capitalize'>hours</div></div>" +
|
||||
"<div class='text-[44px] font-bold'>" +
|
||||
minutes +
|
||||
"<div class='text-lg font-medium mt-2 capitalize'>minutes</div></div>" +
|
||||
"<div class='text-[44px] font-bold'>" +
|
||||
seconds +
|
||||
"<div class='text-lg font-medium mt-2 capitalize'>seconds</div></div>"; // If the count down is finished, write some text
|
||||
|
||||
if (distance < 0) {
|
||||
clearInterval(x);
|
||||
document.getElementById("timer").innerHTML = "EXPIRED";
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="nav-tab-wrapper tabs section-padding">
|
||||
<div className="container">
|
||||
<img src={mainEvent} alt="" className=" lg:mb-10 mb-6 block w-full" />
|
||||
<div className="grid grid-cols-12 gap-[30px]">
|
||||
<div className="lg:col-span-8 col-span-12">
|
||||
<h3>Painting Contest 2022</h3>
|
||||
<div className="lg:my-6 my-4">
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
but the majority have suffered alteration in some form, by
|
||||
injected humour, or randomised words which don't look even
|
||||
slightly believable. If you are going to use a passage of Lorem
|
||||
Ipsum, you need to be sure there isn't anything embarrassing
|
||||
hidden in the middle of text. All the Lorem Ipsum generators on
|
||||
the Internet tend to repeat predefined chunks as necessary, making
|
||||
this the first true generator on the Internet. It uses a
|
||||
dictionary of over 200 Latin words, combined with a handful of
|
||||
model sentence structures, to generate Lorem Ipsum which looks
|
||||
reasonable. The generated Lorem Ipsum is therefore always free
|
||||
from repetition, injected humour.
|
||||
</div>
|
||||
<div className="bg-secondary text-white p-10 rounded-md">
|
||||
<div
|
||||
id="timer"
|
||||
className="md:flex space-y-4 md:space-y-0 justify-between text-center "
|
||||
>
|
||||
{/* <div className="text-[44px] font-bold">
|
||||
{days}
|
||||
<div className="text-lg font-medium mt-2 capitalize">
|
||||
days
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-[44px] font-bold">
|
||||
{hours}
|
||||
<div className="text-lg font-medium mt-2 capitalize">
|
||||
hours
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-[44px] font-bold">
|
||||
{minutes}
|
||||
<div className="text-lg font-medium mt-2 capitalize">
|
||||
minutes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-[44px] font-bold">
|
||||
{seconds}
|
||||
<div className="text-lg font-medium mt-2 capitalize">
|
||||
seconds
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className=" py-6">
|
||||
Among the major reasons why Python is “slow”, it really boils down
|
||||
to 2 — Python is interpreted as opposed to compiled, ultimately
|
||||
leading to slower execution times; and the fact that it is
|
||||
dynamically typed. Take, for example, TensorFlow, a Machine
|
||||
Learning library available in Python. These libraries were
|
||||
actually written in C++ and made available in Python, sort of
|
||||
forming a Python implementation. The same goes for Numpy and, to
|
||||
an extent, even Caer.
|
||||
</div>
|
||||
<div className="flex justify-between border-y border-[#ECECEC] py-4 md:mt-12 mt-10">
|
||||
<div className=" text-black font-semibold">Previous</div>
|
||||
<ul className="flex space-x-3 lg:justify-end items-center ">
|
||||
{[fbIcon, pnIcon, twIcon, insIcon].map((item, indx) => (
|
||||
<li key={indx}>
|
||||
<a href="#" className="flex h-8 w-8">
|
||||
<img src={item} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-4 col-span-12 relative lg:-mt-20">
|
||||
<div className="sidebarWrapper max-w-[90%] mx-auto space-y-[30px]">
|
||||
<div className="wdiget custom-text space-y-5 ">
|
||||
<h4 className=" widget-title">Event Details</h4>
|
||||
<ul className="list space-y-6 ">
|
||||
<li className=" flex space-x-3 ">
|
||||
<div className="flex-1 space-x-3 flex">
|
||||
<img src={circleClock} alt="" />
|
||||
<div>4:00 pm - 6:00 pm</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className=" flex space-x-3 ">
|
||||
<div className="flex-1 space-x-3 flex">
|
||||
<img src="assets/images/svg/circle-c.svg" alt="" />
|
||||
<div>03 March, 2022</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className=" flex space-x-3 ">
|
||||
<div className="flex-1 space-x-3 flex">
|
||||
<img src={circleClock} alt="" />
|
||||
<div>12/A, NewYork Sydney City</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className=" flex space-x-3 ">
|
||||
<div className="flex-1 space-x-3 flex">
|
||||
<img src={circleClock} alt="" />
|
||||
<div>yourmail@gmail.com</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className=" flex space-x-3 ">
|
||||
<div className="flex-1 space-x-3 flex">
|
||||
<img src={circleClock} alt="" />
|
||||
<div>+88018 2829 98267</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" className=" btn btn-primary btn-md text-lg">
|
||||
Book A Seat
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="wdiget">
|
||||
<h4 className=" widget-title">Special Guests</h4>
|
||||
<ul className="list space-y-6">
|
||||
<li className=" flex space-x-4 border-[#ECECEC] ">
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded-full">
|
||||
<img
|
||||
src={rc1}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 ">
|
||||
<div className="mb-1 font-bold text-black capitalize">
|
||||
Sofia d. Flora
|
||||
</div>
|
||||
<span className=" text-primary font-semibold">
|
||||
UI/UX Designer
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className=" flex space-x-4 border-[#ECECEC] ">
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded-full">
|
||||
<img
|
||||
src={rc2}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 ">
|
||||
<div className="mb-1 font-bold text-black capitalize">
|
||||
Jhonson Steven
|
||||
</div>
|
||||
<span className=" text-primary font-semibold">
|
||||
UI/UX Designer
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventDetails;
|
||||
@@ -0,0 +1,136 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { e1, e2, e3, e4, e5, e6, e7, e8, e9 } from "../constant/images";
|
||||
|
||||
const EventsList = () => {
|
||||
return (
|
||||
<div className="nav-tab-wrapper tabs section-padding">
|
||||
<div className="container">
|
||||
<div className="flex items-center mb-14">
|
||||
<div className="flex-1 flex space-x-6 items-center">
|
||||
<span>Showing 12 courses of 52</span>
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
<div className="min-w-[272px]">
|
||||
<select>
|
||||
<option data-display="Sort By: Popularity">
|
||||
Sort By: Popularity
|
||||
</option>
|
||||
<option value="1">Popularity</option>
|
||||
<option value="2">Another option</option>
|
||||
<option value="4">Potato</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px]">
|
||||
{[e1, e2, e3, e4, e5, e6, e7, e8, e9].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 className="pagination mt-14">
|
||||
<ul className=" flex justify-center space-x-3">
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
<iconify-icon
|
||||
icon="heroicons:chevron-double-left-20-solid"
|
||||
className=" text-2xl"
|
||||
></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-primary text-white rounded font-semibold"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
<iconify-icon
|
||||
icon="heroicons:chevron-double-right-20-solid"
|
||||
className=" text-2xl"
|
||||
></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventsList;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from "react";
|
||||
|
||||
const Feature = () => {
|
||||
return (
|
||||
<div className="feature-area bg-[url('../images/all-img/section-bg-1.png')] bg-cover bg-no-repeat bg-center section-padding">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<div className="mini-title">Core Features</div>
|
||||
<div className="column-title ">
|
||||
Why <span className="shape-bg">Choose</span> Edumim
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px] pt-10">
|
||||
<div className="bg-white shadow-box rounded-[8px] p-10 group hover:bg-primary transition duration-150 hover:-translate-y-1">
|
||||
<div
|
||||
className="h-[72px] w-[72px] rounded-full flex flex-col items-center justify-center text-secondary bg-green-paste mb-8
|
||||
text-5xl group-hover:bg-black group-hover:bg-opacity-[0.1] group-hover:text-white transition duration-150"
|
||||
>
|
||||
<iconify-icon icon="codicon:globe"></iconify-icon>
|
||||
</div>
|
||||
<h4 className=" lg:text-2xl text-[22px] leading-[30px] mb-4 transition duration-150 group-hover:text-white">
|
||||
Learn More Anywhere
|
||||
</h4>
|
||||
<div className="transition duration-150 group-hover:text-white">
|
||||
Learn from anywhere in world on desktop, mobile or tablet with an
|
||||
Internet connection.{"}"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow-box rounded-[8px] p-10 group hover:bg-primary transition duration-150 hover:-translate-y-1">
|
||||
<div
|
||||
className="h-[72px] w-[72px] rounded-full flex flex-col items-center justify-center text-secondary bg-green-paste mb-8
|
||||
text-5xl group-hover:bg-black group-hover:bg-opacity-[0.1] group-hover:text-white transition duration-150"
|
||||
>
|
||||
<iconify-icon icon="healthicons:i-training-class-outline"></iconify-icon>
|
||||
</div>
|
||||
<h4 className=" lg:text-2xl text-[22px] leading-[30px] mb-4 transition duration-150 group-hover:text-white">
|
||||
Expert Instructor
|
||||
</h4>
|
||||
<div className="transition duration-150 group-hover:text-white">
|
||||
Learn from anywhere in world on desktop, mobile or tablet with an
|
||||
Internet connection.{"}"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow-box rounded-[8px] p-10 group hover:bg-primary transition duration-150 hover:-translate-y-1">
|
||||
<div
|
||||
className="h-[72px] w-[72px] rounded-full flex flex-col items-center justify-center text-secondary bg-green-paste mb-8
|
||||
text-5xl group-hover:bg-black group-hover:bg-opacity-[0.1] group-hover:text-white transition duration-150"
|
||||
>
|
||||
<iconify-icon icon="fluent:handshake-32-regular"></iconify-icon>
|
||||
</div>
|
||||
<h4 className=" lg:text-2xl text-[22px] leading-[30px] mb-4 transition duration-150 group-hover:text-white">
|
||||
24/7 Strong Support
|
||||
</h4>
|
||||
<div className="transition duration-150 group-hover:text-white">
|
||||
Learn from anywhere in world on desktop, mobile or tablet with an
|
||||
Internet connection.{"}"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Feature;
|
||||
@@ -0,0 +1,200 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import { Tab } from "@headlessui/react";
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { courseData } from "../constant/dummyData";
|
||||
import {
|
||||
c1,
|
||||
c2,
|
||||
c3,
|
||||
c4,
|
||||
c5,
|
||||
c6,
|
||||
c7,
|
||||
clock,
|
||||
file,
|
||||
review,
|
||||
star,
|
||||
} from "../constant/images";
|
||||
|
||||
const FilteredCourse = ({ classNameForTabOne, classNameForTabTwo }) => {
|
||||
const listIcon = [
|
||||
"clarity:grid-view-line",
|
||||
"ant-design:unordered-list-outlined",
|
||||
];
|
||||
return (
|
||||
<Tab.Group>
|
||||
<div className="flex flex-wrap gap-5 justify-center items-center mb-14">
|
||||
<div className="flex-1 flex flex-wrap gap-5 space-x-6 items-center">
|
||||
<Tab.List as="ul" id="tabs-nav" className=" flex space-x-4 cata-Tbas">
|
||||
{listIcon.map((className, key) => (
|
||||
<Tab
|
||||
as="li"
|
||||
className={({ selected }) => (selected ? "active" : "")}
|
||||
key={key}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
className=" h-[60px] w-[60px] flex flex-col justify-center items-center"
|
||||
>
|
||||
<iconify-icon icon={className}></iconify-icon>
|
||||
</a>
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<span>Showing 12 courses of 52</span>
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
<div className="min-w-[272px]">
|
||||
<select>
|
||||
<option data-display="Sort By: Popularity">
|
||||
Sort By: Popularity
|
||||
</option>
|
||||
<option value="1">Popularity</option>
|
||||
<option value="2">Another option</option>
|
||||
<option value="4">Potato</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Tab.Panels as="div" id="tabs-content">
|
||||
<Tab.Panel as="div" id="tab1" className="tab-content">
|
||||
<div className={classNameForTabOne}>
|
||||
{courseData.map((item, index) => (
|
||||
<Link
|
||||
className=" bg-white shadow-box2 rounded-[8px] transition duration-100 hover:shadow-sm"
|
||||
to={"/react-templates/edumim/single-course"}
|
||||
key={item.id * index}
|
||||
>
|
||||
<div className="course-thumb h-[248px] rounded-t-[8px] relative">
|
||||
<img
|
||||
src={item.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">
|
||||
{item.post}
|
||||
</span>
|
||||
</div>
|
||||
<div className="course-content p-8">
|
||||
<div className="text-secondary font-bold text-2xl mb-3">
|
||||
{item.price}
|
||||
</div>
|
||||
<h4 className=" text-xl mb-3 font-bold">{item.title}</h4>
|
||||
<div className="flex justify-between flex-wrap space-y-1 xl:space-y-0">
|
||||
<span className=" flex items-center space-x-2 mr-3">
|
||||
<img src={file} alt="" />
|
||||
<span>2 Lessons</span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2 mr-3">
|
||||
<img src={clock} alt="" />
|
||||
<span> {item.time} </span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2 ">
|
||||
<img src={star} alt="" />
|
||||
<span>{item.ratings}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center pt-14">
|
||||
<a
|
||||
href="#"
|
||||
className=" btn btn-primary inline-flex items-center space-x-[10px]"
|
||||
>
|
||||
<span>Load More</span>
|
||||
<span className=" relative top-1">
|
||||
<iconify-icon icon="ion:reload-outline"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel id="tab2" className="tab-content">
|
||||
<div className={classNameForTabTwo}>
|
||||
{[c1, c2, c3, c4, c5, c6, c7].map((item, index) => (
|
||||
<Link
|
||||
className=" bg-white rounded-[8px] transition shadow-box7 duration-150 border-b-4 hover:border-primary border-transparent
|
||||
hover:shadow-box6 flex p-8 space-x-6"
|
||||
to={"/react-templates/edumim/single-course"}
|
||||
key={index}
|
||||
>
|
||||
<div className="flex-none">
|
||||
<div className="w-[159px] h-[159px] rounded relative">
|
||||
<img
|
||||
src={item}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="course-content flex-1">
|
||||
<div className="text-primary font-bold text-2xl mb-2 flex justify-between">
|
||||
<span className=" inline-block">$29.28</span>
|
||||
<span className=" flex space-x-1">
|
||||
<span className="w-4 h-4 inline-block ">
|
||||
<img
|
||||
src={review}
|
||||
alt=""
|
||||
className=" w-full h-full block object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="w-4 h-4 inline-block ">
|
||||
<img
|
||||
src={review}
|
||||
alt=""
|
||||
className=" w-full h-full block object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="w-4 h-4 inline-block ">
|
||||
<img
|
||||
src={review}
|
||||
alt=""
|
||||
className=" w-full h-full block object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="w-4 h-4 inline-block ">
|
||||
<img
|
||||
src={review}
|
||||
alt=""
|
||||
className=" w-full h-full block object-cover"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 className=" text-2xl leading-[36px] mb-4 font-bold">
|
||||
Basic Fundamentals of Interior & Graphics Design
|
||||
</h4>
|
||||
<div className="flex space-x-6">
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src="assets/images/svg/file2.svg" alt="" />
|
||||
<span>2 Lessons</span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src="assets/images/svg/user2.svg" alt="" />
|
||||
<span>4k Lesson</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center pt-14">
|
||||
<a
|
||||
href="#"
|
||||
className=" btn btn-primary inline-flex items-center space-x-[10px]"
|
||||
>
|
||||
<span>Load More</span>
|
||||
<span className=" relative top-1">
|
||||
<iconify-icon icon="ion:reload-outline"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilteredCourse;
|
||||
@@ -0,0 +1,199 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import { Tab } from "@headlessui/react";
|
||||
import React from "react";
|
||||
import {
|
||||
c1,
|
||||
c2,
|
||||
c3,
|
||||
c4,
|
||||
c5,
|
||||
c6,
|
||||
clock,
|
||||
file,
|
||||
review,
|
||||
star,
|
||||
} from "../constant/images";
|
||||
|
||||
const FilteredCourseTwo = () => {
|
||||
const listIcon = [
|
||||
"clarity:grid-view-line",
|
||||
"ant-design:unordered-list-outlined",
|
||||
];
|
||||
return (
|
||||
<Tab.Group>
|
||||
<div className="flex flex-wrap gap-5 justify-center items-center mb-14">
|
||||
<div className="flex-1 flex flex-wrap gap-5 space-x-6 items-center">
|
||||
<Tab.List as="ul" id="tabs-nav" className=" flex space-x-4 cata-Tbas">
|
||||
{listIcon.map((className, key) => (
|
||||
<Tab
|
||||
as="li"
|
||||
className={({ selected }) => (selected ? "active" : "")}
|
||||
key={key}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
className=" h-[60px] w-[60px] flex flex-col justify-center items-center"
|
||||
>
|
||||
<iconify-icon icon={className}></iconify-icon>
|
||||
</a>
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<span>Showing 12 courses of 52</span>
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
<div className="min-w-[272px]">
|
||||
<select>
|
||||
<option data-display="Sort By: Popularity">
|
||||
Sort By: Popularity
|
||||
</option>
|
||||
<option value="1">Popularity</option>
|
||||
<option value="2">Another option</option>
|
||||
<option value="4">Potato</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Tab.Panels as="div" id="tabs-content">
|
||||
<Tab.Panel as="div" id="tab1" className="tab-content">
|
||||
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px]">
|
||||
{[c1, c2, c3, c4, c5, c6].map((item, index) => (
|
||||
<a
|
||||
className=" bg-white shadow-box2 rounded-[8px] transition duration-100 hover:shadow-sm"
|
||||
href="single-course.html"
|
||||
key={index}
|
||||
>
|
||||
<div className="course-thumb h-[248px] rounded-t-[8px] relative">
|
||||
<img
|
||||
src={item}
|
||||
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">
|
||||
Art & Design
|
||||
</span>
|
||||
</div>
|
||||
<div className="course-content p-8">
|
||||
<div className="text-secondary font-bold text-2xl mb-3">
|
||||
$29.28
|
||||
</div>
|
||||
<h4 className=" text-xl mb-3 font-bold">
|
||||
Basic Fundamentals of Interior & Graphics Design
|
||||
</h4>
|
||||
<div className="flex justify-between flex-wrap space-y-1 xl:space-y-0">
|
||||
<span className=" flex items-center space-x-2 mr-3">
|
||||
<img src={file} alt="" />
|
||||
<span>2 Lessons</span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2 mr-3">
|
||||
<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>
|
||||
<div className="text-center pt-14">
|
||||
<a
|
||||
href="#"
|
||||
className=" btn btn-primary inline-flex items-center space-x-[10px]"
|
||||
>
|
||||
<span>Load More</span>
|
||||
<span className=" relative top-1">
|
||||
<iconify-icon icon="ion:reload-outline"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel id="tab2" className="tab-content">
|
||||
<div className="grid lg:grid-cols-2 md:grid-cols-1 grid-cols-1 gap-[30px]">
|
||||
{[c1, c2, c3, c4, c5, c6].map((item, index) => (
|
||||
<a
|
||||
className=" bg-white rounded-[8px] transition shadow-box7 duration-150 border-b-4 hover:border-primary border-transparent
|
||||
hover:shadow-box6 flex p-8 space-x-6"
|
||||
href="single-course.html"
|
||||
key={index}
|
||||
>
|
||||
<div className="flex-none">
|
||||
<div className="w-[159px] h-[159px] rounded relative">
|
||||
<img
|
||||
src={item}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="course-content flex-1">
|
||||
<div className="text-primary font-bold text-2xl mb-2 flex justify-between">
|
||||
<span className=" inline-block">$29.28</span>
|
||||
<span className=" flex space-x-1">
|
||||
<span className="w-4 h-4 inline-block ">
|
||||
<img
|
||||
src={review}
|
||||
alt=""
|
||||
className=" w-full h-full block object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="w-4 h-4 inline-block ">
|
||||
<img
|
||||
src={review}
|
||||
alt=""
|
||||
className=" w-full h-full block object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="w-4 h-4 inline-block ">
|
||||
<img
|
||||
src={review}
|
||||
alt=""
|
||||
className=" w-full h-full block object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span className="w-4 h-4 inline-block ">
|
||||
<img
|
||||
src={review}
|
||||
alt=""
|
||||
className=" w-full h-full block object-cover"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 className=" text-2xl leading-[36px] mb-4 font-bold">
|
||||
Basic Fundamentals of Interior & Graphics Design
|
||||
</h4>
|
||||
<div className="flex space-x-6">
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src="assets/images/svg/file2.svg" alt="" />
|
||||
<span>2 Lessons</span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src="assets/images/svg/user2.svg" alt="" />
|
||||
<span>4k Lesson</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center pt-14">
|
||||
<a
|
||||
href="#"
|
||||
className=" btn btn-primary inline-flex items-center space-x-[10px]"
|
||||
>
|
||||
<span>Load More</span>
|
||||
<span className=" relative top-1">
|
||||
<iconify-icon icon="ion:reload-outline"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilteredCourseTwo;
|
||||
@@ -0,0 +1,143 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import footerLogo from "../assets/images/logo/footer-logo.svg";
|
||||
|
||||
const Footer = () => {
|
||||
const updatedDate = new Date().getFullYear();
|
||||
return (
|
||||
<footer className="bg-black bg-[url('../images/all-img/footer-bg-1.png')] bg-cover bg-center bg-no-repeat">
|
||||
<div className="section-padding container">
|
||||
<div className="grid grid-cols-1 gap-7 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="single-footer">
|
||||
<div className="lg:max-w-[270px]">
|
||||
<a href="#" className="mb-10 block">
|
||||
<img src={footerLogo} alt="" />
|
||||
</a>
|
||||
<p>
|
||||
Lorem ipsum amet, consectetur adipiscing elit. Suspendis varius
|
||||
enim eros elementum tristique. Duis cursus.
|
||||
</p>
|
||||
<ul className="flex space-x-4 pt-8">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="flex h-12 w-12 flex-col items-center justify-center rounded bg-white bg-opacity-[0.08] text-2xl text-white
|
||||
transition hover:bg-primary hover:text-white"
|
||||
>
|
||||
<iconify-icon icon="bxl:facebook"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="flex h-12 w-12 flex-col items-center justify-center rounded bg-white bg-opacity-[0.08] text-2xl text-white
|
||||
transition hover:bg-primary hover:text-white"
|
||||
>
|
||||
<iconify-icon icon="bxl:twitter"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="flex h-12 w-12 flex-col items-center justify-center rounded bg-white bg-opacity-[0.08] text-2xl text-white
|
||||
transition hover:bg-primary hover:text-white"
|
||||
>
|
||||
<iconify-icon icon="bxl:linkedin"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="flex h-12 w-12 flex-col items-center justify-center rounded bg-white bg-opacity-[0.08] text-2xl text-white
|
||||
transition hover:bg-primary hover:text-white"
|
||||
>
|
||||
<iconify-icon icon="bxl:instagram"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="single-footer">
|
||||
<div className="flex space-x-[80px]">
|
||||
<div className="flex-1 lg:flex-none">
|
||||
<h4 className="mb-8 text-2xl font-bold text-white">Links</h4>
|
||||
<ul className="list-item space-y-5">
|
||||
<li>
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">About Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Courses</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex-1 lg:flex-none">
|
||||
<h4 className="mb-8 text-2xl font-bold text-white">Legal</h4>
|
||||
<ul className="list-item space-y-5">
|
||||
<li>
|
||||
<a href="#">Legal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Tearms of Use</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Tearm & Condition</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Payment Method</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Privacy Policy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="single-footer">
|
||||
<h4 className="mb-8 text-2xl font-bold text-white">Newsletter</h4>
|
||||
<div className="mb-8">
|
||||
Join over <span className="text-primary underline">68,000</span>{" "}
|
||||
people getting our emails Lorem ipsum dolor sit amet consectet
|
||||
</div>
|
||||
<div className="mb-4 flex items-center rounded-md bg-white py-[10px] pr-[10px] pl-6 shadow-e1">
|
||||
<div className="flex-none">
|
||||
<span className=" ">
|
||||
<img src="assets/images/icon/mail.svg" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your mail"
|
||||
className="border-none focus:ring-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn btn-primary block w-full text-center">
|
||||
Subscribe Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container border-t border-white border-opacity-[0.1] py-8 text-center text-base">
|
||||
© Copyright {updatedDate} | Edumim Template | All Rights Reserved
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,178 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import logo from "../assets/images/logo/logo.svg";
|
||||
import MobileMenu from "./MobileMenu";
|
||||
|
||||
const Header = () => {
|
||||
const [activeMobileMenu, setActiveMobileMenu] = useState(false);
|
||||
|
||||
const scrollNav = useRef(null);
|
||||
useEffect(() => {
|
||||
// scrolling nav
|
||||
window.addEventListener("scroll", () => {
|
||||
let windowScroll = window.scrollY > 100;
|
||||
scrollNav.current.classList.toggle("rt-sticky-active", windowScroll);
|
||||
scrollNav.current.classList.toggle("sticky", windowScroll);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header
|
||||
className="site-header home-one-header top-0 w-full z-[999] rt-sticky "
|
||||
ref={scrollNav}
|
||||
>
|
||||
<div className="main-header py-6">
|
||||
<div className="container">
|
||||
<div className=" flex items-center justify-between">
|
||||
<Link
|
||||
to={"/react-templates/edumim"}
|
||||
className="brand-logo flex-none lg:mr-10 md:w-auto max-w-[120px] "
|
||||
>
|
||||
<img src={logo} alt="logo" />
|
||||
</Link>
|
||||
<div className="flex items-center flex-1">
|
||||
<div className="flex-1 main-menu relative mr-[74px]">
|
||||
<ul className="menu-active-classNamees">
|
||||
<li className={`menu-item-has-children `}>
|
||||
<a href="#">Home</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim"}> Home One</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/home-two"}>
|
||||
Home Two
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/home-three"}>
|
||||
Home Three
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item-has-children">
|
||||
<a href="#">Pages</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/about"}>
|
||||
About 1
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/about-two"}>
|
||||
About 2
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/instructor"}>
|
||||
Instructor
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/instructor-two"}>
|
||||
Instructor 2
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to={"/react-templates/edumim/instructor-details"}
|
||||
>
|
||||
Instructor Single
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/event"}>
|
||||
Event
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/event-single"}>
|
||||
Event Single
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/error"}>404</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item-has-children">
|
||||
<a href="#">Courses</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/courses"}>
|
||||
Courses
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/courses-sidebar"}>
|
||||
Courses Sidebar
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/single-course"}>
|
||||
Single Course
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item-has-children">
|
||||
<a href="#">Blog</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/blog-standard"}>
|
||||
Blog Standard
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/single-blog"}>
|
||||
Blog Single
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/contacts"}>
|
||||
Contacts
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex-none flex space-x-[18px]">
|
||||
<div className=" hidden lg:block">
|
||||
<a href="#" className="btn btn-primary py-[15px] px-8">
|
||||
Start Free Trial
|
||||
</a>
|
||||
</div>
|
||||
<div className=" block lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className=" text-3xl md:w-[56px] h-10 w-10 md:h-[56px] rounded bg-[#F8F8F8] flex flex-col items-center justify-center
|
||||
menu-click"
|
||||
onClick={() => setActiveMobileMenu(!activeMobileMenu)}
|
||||
>
|
||||
<iconify-icon
|
||||
icon="cil:hamburger-menu"
|
||||
rotate="180deg"
|
||||
></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{activeMobileMenu && (
|
||||
<MobileMenu
|
||||
activeMenu={activeMobileMenu}
|
||||
setActiveMenu={setActiveMobileMenu}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,39 @@
|
||||
import React, { useEffect } from "react";
|
||||
import About from "../About";
|
||||
import Banner from "../Banner";
|
||||
import Blogs from "../Blogs";
|
||||
import Brands from "../Brands";
|
||||
import Courses from "../Courses";
|
||||
import Feature from "../Feature";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import NewsLetter from "../NewsLetter";
|
||||
import Platform from "../Platform";
|
||||
import Team from "../Team";
|
||||
import Testimonials from "../Testimonials";
|
||||
import Topics from "../Topics";
|
||||
|
||||
const HomeOne = () => {
|
||||
useEffect(() => {
|
||||
document.documentElement.scrollTop = 0;
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Banner />
|
||||
<About />
|
||||
<Brands section_padding_bottom={"section-padding-bottom"} />
|
||||
<Feature />
|
||||
<Courses />
|
||||
<Platform />
|
||||
<NewsLetter />
|
||||
<Topics />
|
||||
<Testimonials />
|
||||
<Team />
|
||||
<Blogs />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeOne;
|
||||
@@ -0,0 +1,36 @@
|
||||
import React, { useEffect } from "react";
|
||||
import Header from "../Header";
|
||||
import About from "../HomeThreeComponents/About";
|
||||
import Accordion from "../HomeThreeComponents/Accordion";
|
||||
import Banner from "../HomeThreeComponents/Banner";
|
||||
import Brands from "../HomeThreeComponents/Brands";
|
||||
import CourseBlock from "../HomeThreeComponents/CourseBlock";
|
||||
import Event from "../HomeThreeComponents/Event";
|
||||
import Team from "../HomeThreeComponents/Team";
|
||||
import Testimonial from "../HomeThreeComponents/Testimonial";
|
||||
import BlogArticle from "../HomeTwoComponents/BlogArticle";
|
||||
import Footer from "../Footer";
|
||||
import CourseSection from "../HomeThreeComponents/CourseSection";
|
||||
function HomeThree() {
|
||||
useEffect(() => {
|
||||
document.documentElement.scrollTop = 0;
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Banner />
|
||||
<Brands />
|
||||
<About />
|
||||
<CourseSection />
|
||||
<Team />
|
||||
<Testimonial />
|
||||
<Event />
|
||||
<CourseBlock />
|
||||
<Accordion />
|
||||
<BlogArticle />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeThree;
|
||||
@@ -0,0 +1,33 @@
|
||||
import React, { useEffect } from "react";
|
||||
import About from "../HomeTwoComponents/About";
|
||||
import Achivement from "../HomeTwoComponents/Achivement";
|
||||
import BlogArticle from "../HomeTwoComponents/BlogArticle";
|
||||
import Categories from "../HomeTwoComponents/Categories";
|
||||
import Counter from "../HomeTwoComponents/Counter";
|
||||
import Courses from "../HomeTwoComponents/Courses";
|
||||
import Footer from "../HomeTwoComponents/Footer";
|
||||
import HomeTwoHeader from "../HomeTwoComponents/HomeTwoHeader";
|
||||
import Video from "../HomeTwoComponents/Video";
|
||||
import WhyChoose from "../HomeTwoComponents/WhyChoose";
|
||||
|
||||
const HomeTwo = () => {
|
||||
useEffect(() => {
|
||||
document.documentElement.scrollTop = 0;
|
||||
}, []);
|
||||
return (
|
||||
<section className="font-gilroy font-medium text-gray text-lg leading-[27px]">
|
||||
<HomeTwoHeader />
|
||||
<Categories />
|
||||
<About />
|
||||
<Courses />
|
||||
<Counter />
|
||||
<Video />
|
||||
<WhyChoose />
|
||||
<Achivement />
|
||||
<BlogArticle />
|
||||
<Footer />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeTwo;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import about3 from "../../assets/images/all-img/about3.png";
|
||||
const About = () => {
|
||||
return (
|
||||
<div className="about-area section-padding">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-12 gap-[30px]">
|
||||
<div className="xl:col-span-7 lg:col-span-6 col-span-12">
|
||||
<img src={about3} alt="" className=" block w-full" />
|
||||
</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 ">
|
||||
We Provide The Best Online{" "}
|
||||
<span className="shape-bg">Education</span>
|
||||
</h4>
|
||||
<div className=" mb-8">
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
but the majority have suffered alteration in some form, by
|
||||
injected humour.
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="progressbar-group">
|
||||
<div className="flex justify-between" data-width="85%">
|
||||
<span className="block text-black font-semibold mb-2">
|
||||
Business Studies
|
||||
</span>
|
||||
<span className=" block mb-2 text-black font-semibold">
|
||||
86%
|
||||
</span>
|
||||
</div>
|
||||
<div className="rounded-[2px] overflow-hidden bg-opacity-10 bg-black h-[6px] relative">
|
||||
<div
|
||||
className="ani h-[6px] bg-primary block absolute left-0 top-1/2 -translate-y-1/2 "
|
||||
style={{ width: "86%" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="progressbar-group">
|
||||
<div className="flex justify-between" data-width="67%">
|
||||
<span className="block text-black font-semibold mb-2">
|
||||
Marketing
|
||||
</span>
|
||||
<span className=" block mb-2 text-black font-semibold">
|
||||
67%
|
||||
</span>
|
||||
</div>
|
||||
<div className="rounded-[2px] overflow-hidden bg-opacity-10 bg-black h-[6px] relative">
|
||||
<div
|
||||
className="ani h-[6px] bg-secondary block absolute left-0 top-1/2 -translate-y-1/2 "
|
||||
style={{ width: "67%" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="progressbar-group">
|
||||
<div className="flex justify-between" data-width="95%">
|
||||
<span className="block text-black font-semibold mb-2">
|
||||
Design & Development
|
||||
</span>
|
||||
<span className=" block mb-2 text-black font-semibold">
|
||||
95%
|
||||
</span>
|
||||
</div>
|
||||
<div className="rounded-[2px] overflow-hidden bg-opacity-10 bg-black h-[6px] relative">
|
||||
<div
|
||||
className="ani h-[6px] bg-tertiary block absolute left-0 top-1/2 -translate-y-1/2 "
|
||||
style={{ width: "95%" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,140 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { check } from "../../constant/images";
|
||||
|
||||
const Achivement = () => {
|
||||
return (
|
||||
<div className=" section-padding bg-[url('../images/all-img/section-bg-9.png')] bg-no-repeat bg-center bg-cover ">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<div className="mini-title">Some Fun Fact</div>
|
||||
<div className="column-title ">
|
||||
Our Great {' '}
|
||||
<span className="shape-bg">Achievement</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-10 pb-8">
|
||||
<label className=" max-w-[254px] bg-white rounded-md shadow-box9 p-3 mx-auto flex cursor-pointer active-price items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="pricechnage"
|
||||
className=" hidden form-check"
|
||||
/>
|
||||
<span className=" flex-1 text-center active ">Monthly</span>
|
||||
<span className=" flex-1 text-center ">Yearly</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="space-y-8 max-w-[1170px] mx-auto border-t border-b border-black border-opacity-[0.1] ">
|
||||
<div
|
||||
className="flex lg:flex-row flex-col space-y-6 lg:space-y-0 lg:justify-between lg:space-x-8 items-center py-10 px-10
|
||||
rounded-md "
|
||||
>
|
||||
<div>
|
||||
<span className=" text-2xl text-black font-bold">Starter</span>
|
||||
</div>
|
||||
<div>
|
||||
<ul className=" space-y-4">
|
||||
<li className=" flex space-x-[9px]">
|
||||
<img src={check} alt="" />
|
||||
<span>Sed sed felis neque vehicula iaculis</span>
|
||||
</li>
|
||||
<li className=" flex space-x-[9px]">
|
||||
<img src={check} alt="" />
|
||||
<span>Cras consequat ligula vel augue</span>
|
||||
</li>
|
||||
<li className=" flex space-x-[9px]">
|
||||
<img src={check} alt="" />
|
||||
<span>Maecenas bibendum massa eget</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-[150px] text-center">
|
||||
<span className="block font-bold text-black text-[44px]">
|
||||
Free
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="btn btn-black">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex lg:flex-row flex-col lg:justify-between space-y-6 lg:space-y-0 lg:space-x-8 items-center bg-white py-10 px-10
|
||||
rounded-md "
|
||||
>
|
||||
<div>
|
||||
<span className=" text-2xl text-primary font-bold">
|
||||
Professional
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<ul className=" space-y-4">
|
||||
<li className=" flex space-x-[9px]">
|
||||
<img src={check} alt="" />
|
||||
<span>Sed sed felis neque vehicula iaculis</span>
|
||||
</li>
|
||||
<li className=" flex space-x-[9px]">
|
||||
<img src={check} alt="" />
|
||||
<span>Cras consequat ligula vel augue</span>
|
||||
</li>
|
||||
<li className=" flex space-x-[9px]">
|
||||
<img src={check} alt="" />
|
||||
<span>Maecenas bibendum massa eget</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-[150px] text-center">
|
||||
<span className="block font-bold text-black text-[44px]">
|
||||
$89.69
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex lg:flex-row flex-col space-y-6 lg:space-y-0 lg:justify-between lg:space-x-8 items-center py-10 px-10
|
||||
rounded-md "
|
||||
>
|
||||
<div>
|
||||
<span className=" text-2xl text-black font-bold">Business</span>
|
||||
</div>
|
||||
<div>
|
||||
<ul className=" space-y-4">
|
||||
<li className=" flex space-x-[9px]">
|
||||
<img src={check} alt="" />
|
||||
<span>Sed sed felis neque vehicula iaculis</span>
|
||||
</li>
|
||||
<li className=" flex space-x-[9px]">
|
||||
<img src={check} alt="" />
|
||||
<span>Cras consequat ligula vel augue</span>
|
||||
</li>
|
||||
<li className=" flex space-x-[9px]">
|
||||
<img src={check} alt="" />
|
||||
<span>Maecenas bibendum massa eget</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-[150px] text-center">
|
||||
<span className="block font-bold text-black text-[44px]">
|
||||
$129.69
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="btn btn-black">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Achivement;
|
||||
@@ -0,0 +1,66 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { blogArticleData } from "../../constant/dummyData";
|
||||
import { calender2, clock2 } from "../../constant/images";
|
||||
|
||||
const BlogArticle = () => {
|
||||
return (
|
||||
<div className=" section-padding">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<div className="mini-title">Blog & Airticle</div>
|
||||
<div className="column-title ">
|
||||
Take A Look At The Latest <span className="shape-bg">Articles</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid xl:grid-cols-2 grid-cols-1 gap-[30px] lg:pt-10 pt-5">
|
||||
{blogArticleData.map((item, index) => (
|
||||
<div
|
||||
className=" bg-white shadow-box7 rounded-[8px] group transition duration-150 ring-0 hover:ring-2 hover:ring-primary
|
||||
hover:shadow-box8 sm:flex p-4 sm:space-x-6 space-y-6 sm:space-y-0"
|
||||
key={index}
|
||||
>
|
||||
<div className="flex-none">
|
||||
<div className="sm:w-[200px] h-[182px] rounded relative">
|
||||
<img
|
||||
src={item.img}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="course-content flex-1">
|
||||
<div className="mb-4">
|
||||
<span className="inline-block text-base text-secondary bg-[#E3F9F6] font-medium rounded px-[10px] py-1">
|
||||
Learning
|
||||
</span>
|
||||
</div>
|
||||
<h4 className=" lg:text-2xl lg:leading-[36px] text-1xl mb-4 font-bold">
|
||||
<Link
|
||||
to={'/react-templates/edumim/single-blog'}
|
||||
className=" group-hover:text-primary transitio duration-150"
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
</h4>
|
||||
<div className="flex space-x-6">
|
||||
<a className=" flex items-center space-x-2" href="#">
|
||||
<img src={calender2} alt="" />
|
||||
<span>21 Feb, 22</span>
|
||||
</a>
|
||||
<a className=" flex items-center space-x-2" href="#">
|
||||
<img src={clock2} alt="" />
|
||||
<span>4k Lesson</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogArticle;
|
||||
@@ -0,0 +1,53 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import ct1 from "../../assets/images/icon/ct1.svg";
|
||||
import ct2 from "../../assets/images/icon/ct2.svg";
|
||||
import ct3 from "../../assets/images/icon/ct3.svg";
|
||||
import ct4 from "../../assets/images/icon/ct4.svg";
|
||||
import ct5 from "../../assets/images/icon/ct5.svg";
|
||||
import ct6 from "../../assets/images/icon/ct6.svg";
|
||||
const Categories = () => {
|
||||
return (
|
||||
<div className="feature-area bg-[url('../images/all-img/section-bg-6.png')] bg-cover bg-no-repeat bg-center section-padding">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<div className="mini-title">Course Categories</div>
|
||||
<div className="column-title ">
|
||||
Browse Top <span className="shape-bg">Categories</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px] pt-10">
|
||||
{[ct1, ct2, ct3, ct4, ct5, ct6].map((item, index) => (
|
||||
<a
|
||||
className=" rounded-[8px] transition-all duration-300 hover:shadow-box bg-white flex space-x-5 p-[30px] border-l-4
|
||||
border-white hover:border-primary"
|
||||
href="#"
|
||||
key={index}
|
||||
>
|
||||
<div className="w-[72px] h-[72px] rounded bg-white relative group-hover:bg-[#FFE8E8]">
|
||||
<img
|
||||
src={item}
|
||||
alt=""
|
||||
className="w-full h-full object-cover rounded "
|
||||
/>
|
||||
</div>
|
||||
<div className="course-content">
|
||||
<h4 className=" lg:text-2xl text-1xl mb-2 font-bold">
|
||||
Data Science
|
||||
</h4>
|
||||
<p>{Math.floor(5 + Math.random() * 70)} Courses</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center pt-[70px]">
|
||||
<a href="#" className=" btn btn-primary">
|
||||
View All Categories
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Categories;
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import { achivementCounter } from "../../constant/dummyData";
|
||||
const Counter = () => {
|
||||
return (
|
||||
<div className=" section-padding">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<div className="mini-title">Some Fun Fact</div>
|
||||
<div className="column-title ">
|
||||
Our Great <span className="shape-bg">Achievement</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-[30px] pt-10">
|
||||
{achivementCounter.map((item, index) => (
|
||||
<div
|
||||
className="bg-white shadow-box7 text-center pt-[64px] pb-8 px-[50px] rounded-[8px] relative my-4"
|
||||
key={index}
|
||||
>
|
||||
<img
|
||||
src={item.icon}
|
||||
alt=""
|
||||
className=" absolute left-1/2 -translate-x-1/2 -top-10"
|
||||
/>
|
||||
<h4 className=" text-[44px] leading-[66px] text-black font-bold mb-1 ">
|
||||
<span className="counter">{item.num}</span> +
|
||||
</h4>
|
||||
<p>{item.sector}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Counter;
|
||||
@@ -0,0 +1,77 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { courseData } from "../../constant/dummyData";
|
||||
import { file2, review, user2 } from "../../constant/images";
|
||||
const Courses = () => {
|
||||
return (
|
||||
<div className=" section-padding bg-[url('../images/all-img/section-bg-7.png')] bg-cover bg-no-repeat bg-center">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<div className="mini-title">Featured Courses</div>
|
||||
<div className="column-title ">
|
||||
Choose Unlimited <span className="shape-bg">Courses</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid xl:grid-cols-2 grid-cols-1 gap-[30px] lg:pt-10 pt-5">
|
||||
{courseData.map((course, index) => (
|
||||
<a
|
||||
className=" bg-white rounded-[8px] transition duration-150 border-b-4 hover:border-primary border-transparent
|
||||
hover:shadow-box6 sm:flex p-8 sm:space-x-6 space-y-6 sm:space-y-0"
|
||||
href="#"
|
||||
key={index}
|
||||
>
|
||||
<div className="flex-none">
|
||||
<div className="sm:w-[159px] h-[159px] rounded relative">
|
||||
<img
|
||||
src={course.img}
|
||||
alt={course.img}
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="course-content flex-1">
|
||||
<div className="text-primary font-bold lg:text-2xl text-1xl mb-2 flex justify-between">
|
||||
<span className=" inline-block">{course.price}</span>
|
||||
<span className=" flex space-x-1">
|
||||
{[1, 2, 3, 4].map((star, index) => (
|
||||
<span
|
||||
className="w-4 h-4 inline-block "
|
||||
key={star + index}
|
||||
>
|
||||
<img
|
||||
src={review}
|
||||
alt=""
|
||||
className=" w-full h-full block object-cover"
|
||||
/>
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
<h4 className=" lg:text-2xl lg:eading-[36px] text-1xl mb-4 font-bold">
|
||||
{course.title}
|
||||
</h4>
|
||||
<div className="flex space-x-6">
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src={file2} alt="" />
|
||||
<span>2 Lessons</span>
|
||||
</span>
|
||||
<span className=" flex items-center space-x-2">
|
||||
<img src={user2} alt="" />
|
||||
<span>4k Lesson</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</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 Courses;
|
||||
@@ -0,0 +1,170 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import {
|
||||
fbIcon,
|
||||
footerLogo2,
|
||||
insIcon,
|
||||
pnIcon,
|
||||
twIcon,
|
||||
insIcon1,
|
||||
insIcon2,
|
||||
insIcon3,
|
||||
insIcon4,
|
||||
insIcon5,
|
||||
insIcon6,
|
||||
} from "../../constant/images";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer>
|
||||
<div className="relative z-[1] mx-auto max-w-[1170px] rounded-md bg-[url('../images/all-img/section-bg-3.png')] bg-cover bg-center bg-no-repeat p-20">
|
||||
<div className="items-center space-x-4 space-y-5 text-center lg:flex lg:space-y-0 lg:text-left">
|
||||
<div className="flex-1">
|
||||
<div className="max-w-[590px] text-3xl font-bold text-white md:text-3xl lg:text-[44px] lg:leading-[61px]">
|
||||
Education Is About Creating Leaders For Tomorrow
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<button className="btn bg-white font-bold text-black">
|
||||
Register Today
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mt-[150px] bg-[url('../images/all-img/section-bg-10.png')] bg-cover bg-center bg-no-repeat pt-[150px]">
|
||||
<div className="section-padding container">
|
||||
<div className="grid grid-cols-12 gap-5">
|
||||
<div className="single-footer col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div className="lg:max-w-[270px]">
|
||||
<a href="#" className="mb-10 block">
|
||||
<img src={footerLogo2} alt="" />
|
||||
</a>
|
||||
<p>
|
||||
Lorem ipsum amet, consectetur adipiscing elit. Suspendis
|
||||
varius enim eros elementum tristique. Duis cursus.
|
||||
</p>
|
||||
<ul className="flex space-x-4 pt-8">
|
||||
<li>
|
||||
<a href="#" className="flex h-10 w-10">
|
||||
<img src={fbIcon} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex h-10 w-10">
|
||||
<img src={twIcon} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex h-10 w-10">
|
||||
<img src={pnIcon} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex h-10 w-10">
|
||||
<img src={insIcon} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="single-footer col-span-12 lg:col-span-6 xl:col-span-6">
|
||||
<div className="ml-auto xl:w-[80%]">
|
||||
<div className="flex space-x-[80px]">
|
||||
<div className="flex-1 lg:flex-none">
|
||||
<h4 className="mb-8 text-2xl font-bold text-black">
|
||||
Links
|
||||
</h4>
|
||||
<ul className="list-item space-y-5">
|
||||
<li>
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">About Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Courses</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex-1 lg:flex-none">
|
||||
<h4 className="mb-8 text-2xl font-bold text-black">
|
||||
Legal
|
||||
</h4>
|
||||
<ul className="list-item space-y-5">
|
||||
<li>
|
||||
<a href="#">Legal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Tearms of Use</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Tearm & Condition</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Payment Method</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Privacy Policy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="single-footer col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<h4 className="mb-8 text-2xl font-bold text-black">
|
||||
Instagram Post
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[
|
||||
insIcon1,
|
||||
insIcon2,
|
||||
insIcon3,
|
||||
insIcon4,
|
||||
insIcon5,
|
||||
insIcon6,
|
||||
].map((item, index) => (
|
||||
<div key={index}>
|
||||
<a
|
||||
href="#"
|
||||
className="group relative block h-20 w-full rounded"
|
||||
>
|
||||
<img
|
||||
src={item}
|
||||
alt=""
|
||||
className="block h-full w-full rounded object-cover"
|
||||
/>
|
||||
<div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded bg-black bg-opacity-40 text-3xl text-white opacity-0 transition-all duration-150 group-hover:opacity-100">
|
||||
<span className="scale-0 transition-all duration-150 group-hover:scale-100">
|
||||
<iconify-icon icon="akar-icons:instagram-fill"></iconify-icon>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container border-t border-[#E9D4D0] py-8 text-center text-base">
|
||||
© Copyright 2022 | Edumim Template | All Rights Reserved
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,285 @@
|
||||
/* eslint-disable no-unused-expressions */
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import wfb from "../../assets/images/social/wfb.svg";
|
||||
import wt from "../../assets/images/social/wt.svg";
|
||||
import wi from "../../assets/images/social/w-i.svg";
|
||||
import wins from "../../assets/images/social/w-ins.svg";
|
||||
import search from "../../assets/images/svg/search.svg";
|
||||
import logo from "../../assets/images/logo/logo.svg";
|
||||
import man2 from "../../assets/images/banner/man2.png";
|
||||
import { Link } from "react-router-dom";
|
||||
import MobileMenu from "../MobileMenu";
|
||||
const HomeTwoHeader = () => {
|
||||
const scrollNav = useRef(null);
|
||||
const [activeMobileMenu, setActiveMobileMenu] = useState(false);
|
||||
const [showSearchBar, setShowSearchBar] = useState(false);
|
||||
let body = document.querySelector("body");
|
||||
const handleShowSearchBar = () => {
|
||||
setShowSearchBar(!showSearchBar);
|
||||
};
|
||||
useEffect(() => {
|
||||
// scrolling nav
|
||||
window.addEventListener("scroll", () => {
|
||||
let windowScroll = window.scrollY > 100;
|
||||
scrollNav.current.classList.toggle("rt-sticky-active", windowScroll);
|
||||
});
|
||||
}, []);
|
||||
showSearchBar
|
||||
? body.classList.add("modal-open")
|
||||
: body.classList.remove("modal-open");
|
||||
|
||||
body.classList.contains("modal-open")
|
||||
? (document.documentElement.scrollTop = 0)
|
||||
: "";
|
||||
return (
|
||||
<section className=" xl:min-h-screen bg-[url('../images/banner/2.png')] bg-cover bg-no-repeat bg-center overflow-hidden xl:pb-[130px]">
|
||||
<header className="site-header ">
|
||||
<div className="bg-primary text-white py-3 md:block hidden">
|
||||
<div className=" container">
|
||||
<div className="grid lg:grid-cols-2 grid-cols-1 gap-5 ">
|
||||
<ul className=" flex divide-x divide-white divide-opacity-25 text-base lg:justify-start justify-center">
|
||||
<li className="mr-4">12893 Green Valley Street, USA 83682</li>
|
||||
<li className="pl-4">
|
||||
<a href="mailto:contactinfo@gmail.com">
|
||||
contactinfo@gmail.com
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className=" text-base flex lg:justify-end justify-center divide-x divide-white divide-opacity-25 items-center">
|
||||
<li className="px-2">Follow Us On:</li>
|
||||
<li className="px-2">
|
||||
<a href="#">
|
||||
<img src={wfb} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="px-2">
|
||||
<a href="#">
|
||||
<img src={wt} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="px-2">
|
||||
<a href="#">
|
||||
<img src={wi} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="px-2">
|
||||
<a href="#">
|
||||
<img src={wins} alt="" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="main-header py-8 header-normal2 rt-sticky top-0 w-full z-[999] "
|
||||
ref={scrollNav}
|
||||
>
|
||||
<div className="container">
|
||||
<div className=" flex items-center justify-between ">
|
||||
<Link
|
||||
to={"/react-templates/edumim"}
|
||||
className="brand-logo flex-none lg:mr-10 md:w-auto max-w-[120px] "
|
||||
>
|
||||
<img src={logo} alt="" />
|
||||
</Link>
|
||||
<div className="flex items-center flex-1">
|
||||
<div className="flex-1 main-menu relative mr-[74px]">
|
||||
<ul className="menu-active-classNamees">
|
||||
<li className={`menu-item-has-children `}>
|
||||
<a href="#">Home</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim"}> Home One</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/home-two"}>
|
||||
Home Two
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/home-three"}>
|
||||
Home Three
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item-has-children">
|
||||
<a href="#">Pages</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/about"}>
|
||||
About 1
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/about-two"}>
|
||||
About 2
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/instructor"}>
|
||||
Instructor
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/instructor-two"}>
|
||||
Instructor 2
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to={"/react-templates/edumim/instructor-details"}
|
||||
>
|
||||
Instructor Single
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/event"}>
|
||||
Event
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/event-single"}>
|
||||
Event Single
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/error"}>404</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item-has-children">
|
||||
<a href="#">Courses</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/courses"}>
|
||||
Courses
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/courses-sidebar"}>
|
||||
Courses Sidebar
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/single-course"}>
|
||||
Single Course
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item-has-children">
|
||||
<a href="#">Blog</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/blog-standard"}>
|
||||
Blog Standard
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/single-blog"}>
|
||||
Blog Single
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/contacts"}>
|
||||
Contacts
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<div className=" lg:block hidden">
|
||||
<div className="border border-gray rounded-md h-[46px] modal-search">
|
||||
<input
|
||||
type="text"
|
||||
className=" block w-full rounded-md h-full border-none ring-0 focus:outline-none focus:ring-0"
|
||||
placeholder="Search.."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-none flex space-x-[18px]">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className=" md:w-[56px] md:h-[56px] h-10 w-10 rounded bg-white flex flex-col items-center justify-center modal-
|
||||
trigger"
|
||||
onClick={handleShowSearchBar}
|
||||
>
|
||||
<img src={search} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<div className=" block lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className=" text-3xl md:w-[56px] h-10 w-10 md:h-[56px] rounded bg-white flex flex-col items-center justify-center menu-click"
|
||||
onClick={() => setActiveMobileMenu(!activeMobileMenu)}
|
||||
>
|
||||
<iconify-icon
|
||||
icon="cil:hamburger-menu"
|
||||
rotate="180deg"
|
||||
></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div className=" hidden lg:block">
|
||||
<a
|
||||
href="#"
|
||||
className="btn bg-black text-white py-[15px] px-8"
|
||||
>
|
||||
Start Free Trial
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className="container">
|
||||
<div className=" lg:hidden block">
|
||||
<div className="border border-gray rounded-md h-[46px] modal-search">
|
||||
<input
|
||||
type="text"
|
||||
className=" block w-full rounded-md h-full border-none ring-0 focus:outline-none focus:ring-0"
|
||||
placeholder="Search.."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{activeMobileMenu && (
|
||||
<MobileMenu
|
||||
activeMenu={activeMobileMenu}
|
||||
setActiveMenu={setActiveMobileMenu}
|
||||
/>
|
||||
)}
|
||||
<div className="container relative">
|
||||
<div className="xl:max-w-[570px] xl:pt-[129px] lg:py-28 md:py-20 py-14 lg:space-y-10 space-y-6">
|
||||
<div className=" lg:text-[77px] lg:leading-[106.4px] md:text-6xl md:leading-[72px] text-black font-bold text-5xl leading-[62px]">
|
||||
Better <span className="text-primary">Learning Future</span> Starts
|
||||
With Edumim
|
||||
</div>
|
||||
<div className=" plain-text text-gray leading-[30px] border-l-2 border-primary pl-4">
|
||||
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 pt-5">
|
||||
<a href="#" className="btn btn-primary">
|
||||
Get Started Now
|
||||
</a>{" "}
|
||||
<a href="#" className="btn btn-black">
|
||||
Get Started Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="imge-box hidden xl:block absolute right-[-60px] top-1/2 -translate-y-1/2 mt-[60px] ">
|
||||
<img src={man2} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeTwoHeader;
|
||||
@@ -0,0 +1,41 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { video } from "../../constant/images";
|
||||
import Brands from "../Brands";
|
||||
|
||||
const Video = () => {
|
||||
return (
|
||||
<div className=" relative video-area section-padding-bottom z-[1]">
|
||||
<div
|
||||
className="bg-[url('../images/all-img/section-bg-7.png')] bg-cover bg-no-repeat bg-center absolute left-0 bottom-0 h-[60%]
|
||||
w-full z-[-1]"
|
||||
></div>
|
||||
<div className="container ">
|
||||
<div className="video-wrapper xl:mb-[205px] lg:mb-[150px] mb-20">
|
||||
<div className="xl:h-[652px] lg:h-[500px] h-[400px] max-w-[1112px] mx-auto p-6 bg-white shadow-box8 rounded-lg relative ">
|
||||
<img
|
||||
src={video}
|
||||
alt=""
|
||||
className=" object-cover w-full h-full block"
|
||||
/>
|
||||
<div
|
||||
className="h-[80px] w-[80px] mx-auto absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 flex flex-col justify-center
|
||||
items-center"
|
||||
>
|
||||
<div className="animate-ping absolute inline-flex h-full w-full rounded-full ring-white ring-2"></div>
|
||||
<a
|
||||
href="#"
|
||||
className="bg-white w-20 h-20 flex flex-col justify-center items-center rounded-full text-3xl text-primary "
|
||||
>
|
||||
<iconify-icon icon="bi:play-fill"></iconify-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Brands />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Video;
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
import { about4, miniHeart, miniTarget } from "../../constant/images";
|
||||
|
||||
const WhyChoose = () => {
|
||||
return (
|
||||
<div className="about-area section-padding bg-[url('../images/all-img/section-bg-8.png')] bg-cover bg-no-repeat bg-center">
|
||||
<div className="container">
|
||||
<div className="lg:grid grid-cols-12 lg:gap-10 space-y-6 lg:space-y-0">
|
||||
<div className="xl:col-span-5 lg:col-span-6 col-span-12">
|
||||
<div className="mini-title">Why Choose Edumim</div>
|
||||
<h4 className="column-title ">
|
||||
Grow Your Skill, Define Your {' '}
|
||||
<span className="shape-bg pb-4">Bright Future</span>
|
||||
</h4>
|
||||
<div className=" mb-8">
|
||||
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 multiple courses
|
||||
this year.
|
||||
</div>
|
||||
<div>
|
||||
<div className="grid lg:grid-cols-2 grid-cols-1 gap-[30px] md:block">
|
||||
<div className="bg-white shadow-box7 p-6 rounded">
|
||||
<div>
|
||||
<img src={miniTarget} alt="" />
|
||||
</div>
|
||||
<div className=" font-semibold leading-[27px] text-black mt-3">
|
||||
Learn At Your Own Multiple Courses
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white shadow-box7 p-6 rounded">
|
||||
<div>
|
||||
<img src={miniHeart} alt="" />
|
||||
</div>
|
||||
<div className=" font-semibold leading-[27px] text-black mt-3">
|
||||
We Provide Study Materials
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:col-span-7 lg:col-span-6 col-span-12 ">
|
||||
<img
|
||||
src={about4}
|
||||
alt=""
|
||||
className=" block w-full object-contain "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhyChoose;
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
|
||||
const InsTructorBanner = ({ instructor, teamMember, num, about }) => {
|
||||
return (
|
||||
<div class="breadcrumbs section-padding bg-[url('../images/all-img/bred.png')] bg-cover bg-center bg-no-repeat">
|
||||
<div class="container text-center">
|
||||
<h2>{about} Instructor</h2>
|
||||
<nav>
|
||||
<ol class="flex items-center justify-center space-x-3">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="index.html">Pages </a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">-</li>
|
||||
<li class="text-primary">
|
||||
{instructor} {teamMember} {num}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InsTructorBanner;
|
||||
@@ -0,0 +1,204 @@
|
||||
/* eslint-disable no-unused-expressions */
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import logo from "../assets/images/logo/logo.svg";
|
||||
import { fbIcon, twIcon, pnIcon, insIcon } from "../constant/images";
|
||||
|
||||
const MobileMenu = ({ activeMenu, setActiveMenu }) => {
|
||||
const [showHomeMenu, setShowHomeMenu] = useState(false);
|
||||
const [showPageMenu, setShowPageMenu] = useState(false);
|
||||
const [showBlogMenu, setShowBlogMenu] = useState(false);
|
||||
const [showCourseMenu, setShowCourseMenu] = useState(false);
|
||||
const handleShowHomeMenu = () => {
|
||||
setShowHomeMenu(!showHomeMenu);
|
||||
};
|
||||
const handleShowPageMenu = () => {
|
||||
setShowPageMenu(!showPageMenu);
|
||||
};
|
||||
const handleShowBlogMenu = () => {
|
||||
setShowBlogMenu(!showBlogMenu);
|
||||
};
|
||||
const handleShowCourseMenu = () => {
|
||||
setShowCourseMenu(!showCourseMenu);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="openmobile-menu fixed top-0 h-screen pt-10 pb-6 bg-white shadow-box2 w-[320px] overflow-y-auto flex flex-col z-[999] active-mobile-menu">
|
||||
<div className="flex justify-between px-6 flex-none">
|
||||
<Link
|
||||
to={"/react-templates/edumim/home"}
|
||||
className="brand-logo flex-none mr-10 "
|
||||
>
|
||||
<img src={logo} alt="logo" />
|
||||
</Link>
|
||||
<span
|
||||
className=" text-3xl text-black cursor-pointer rt-mobile-menu-close"
|
||||
onClick={() => {
|
||||
setActiveMenu(!activeMenu);
|
||||
}}
|
||||
>
|
||||
<iconify-icon icon="fe:close"></iconify-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div className="mobile-menu mt-6 flex-1 ">
|
||||
<ul className="menu-active-classNamees">
|
||||
<li
|
||||
className={`menu-item-has-children ${showHomeMenu ? "open" : ""}`}
|
||||
onClick={handleShowHomeMenu}
|
||||
>
|
||||
<a href="#">Home</a>
|
||||
<ul
|
||||
className="sub-menu"
|
||||
style={
|
||||
showHomeMenu ? { display: "block" } : { display: "none" }
|
||||
}
|
||||
>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim"}>Home One</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/home-two"}>Home Two</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/home-three"}>
|
||||
Home Three
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
className={`menu-item-has-children ${showPageMenu ? "open" : ""}`}
|
||||
onClick={handleShowPageMenu}
|
||||
>
|
||||
<a href="#">Pages</a>
|
||||
<ul
|
||||
className="sub-menu"
|
||||
style={
|
||||
showPageMenu ? { display: "block" } : { display: "none" }
|
||||
}
|
||||
>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/about"}>About 1</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/about-two"}>About 2</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/instructor"}>
|
||||
Instructor
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/instructor-two"}>
|
||||
Instructor 2
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/instructor-details"}>
|
||||
Instructor Single
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/event"}>Event</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/event-single"}>
|
||||
Event Single
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/error"}>404</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
className={`menu-item-has-children ${
|
||||
showCourseMenu ? "open" : ""
|
||||
}`}
|
||||
onClick={handleShowCourseMenu}
|
||||
>
|
||||
<a href="#">Courses</a>
|
||||
<ul
|
||||
className="sub-menu"
|
||||
style={
|
||||
showCourseMenu ? { display: "block" } : { display: "none" }
|
||||
}
|
||||
>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/courses"}>courses</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/courses-sidebar"}>
|
||||
courses Sidebar
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/single-course"}>
|
||||
Single-course
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
className={`menu-item-has-children ${showBlogMenu ? "open" : ""}`}
|
||||
onClick={handleShowBlogMenu}
|
||||
>
|
||||
<a href="#">Blog</a>
|
||||
<ul
|
||||
className="sub-menu"
|
||||
style={
|
||||
showBlogMenu ? { display: "block" } : { display: "none" }
|
||||
}
|
||||
>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/blog-standard"}>
|
||||
Blog Standard
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/single-blog"}>
|
||||
Single Blog
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/react-templates/edumim/contacts"}>Contacts</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className=" flex-none pb-4">
|
||||
<div className=" text-center text-black font-semibold mb-2">
|
||||
Follow Us
|
||||
</div>
|
||||
<ul className="flex space-x-4 justify-center ">
|
||||
<li>
|
||||
<a href="#" className="flex h-10 w-10">
|
||||
<img src={fbIcon} alt="fbIcon" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex h-10 w-10">
|
||||
<img src={twIcon} alt="twiter" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex h-10 w-10">
|
||||
<img src={pnIcon} alt="pnIcon" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="flex h-10 w-10">
|
||||
<img src={insIcon} alt="insIcon" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className={`rt-mobile-menu-overlay ${activeMenu && "active"}`}></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileMenu;
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import mailWhite from "../assets/images/svg/mail-white.svg";
|
||||
import bigMail from "../assets/images/svg/big-mail.svg";
|
||||
|
||||
const NewsLetter = () => {
|
||||
return (
|
||||
<div className="bg-[url('../images/all-img/section-bg-3.png')] bg-cover bg-no-repeat bg-center py-20">
|
||||
<div className="container">
|
||||
<div className="lg:flex lg:items-center lg:space-x-[70px]">
|
||||
<div className=" flex-none">
|
||||
<div className="flex items-center space-x-8 text-white max-w-[327px] mx-auto lg:mb-0 md:mb-10 mb-5">
|
||||
<div className=" flex-none ">
|
||||
<img src={bigMail} alt="" />
|
||||
</div>
|
||||
<div className="flex-1 lg:text-[33px] lg:leading-[51px] md:text-3xl text-2xl font-bold">
|
||||
Subscribe to My Newsletter
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" flex-1">
|
||||
<div className="md:flex items-center relative md:space-x-6 md:space-y-0 space-y-4 ">
|
||||
<div className="flex-1 relative">
|
||||
<span className=" absolute left-0 top-1/2 -translate-y-1/2 ">
|
||||
<img src={mailWhite} alt="" />
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your mail address"
|
||||
className=" border-b border-t-0 border-l-0 border-r-0 border-[#B2E2DF] ring-0 focus:ring-0 bg-transparent text-white
|
||||
placeholder:text-[#B2E2DF] focus:outline-0 focus:border-[#B2E2DF] transition pl-8 text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<button className="btn bg-white text-secondary md:w-auto w-full">
|
||||
Get Started Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsLetter;
|
||||
@@ -0,0 +1,28 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const PageBanner = ({ pageName, pageTitle, num, title }) => {
|
||||
useEffect(() => {
|
||||
document.documentElement.scrollTop = 0;
|
||||
}, []);
|
||||
return (
|
||||
<div className="breadcrumbs section-padding bg-[url('../images/all-img/bred.png')] bg-cover bg-center bg-no-repeat">
|
||||
<div className="container text-center">
|
||||
<h2>{title}</h2>
|
||||
<nav>
|
||||
<ol className="flex items-center justify-center space-x-3">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to={"/react-templates/edumim/home"}> Pages</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">-</li>
|
||||
<li className="text-primary">
|
||||
{pageName} {pageTitle} {num}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageBanner;
|
||||
@@ -0,0 +1,30 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { error404 } from "../../constant/images";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
|
||||
const ErrorPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<div className=" min-h-screen bg-[url('../images/all-img/404-bg.png')] bg-cover bg-no-repeat bg-center">
|
||||
<div className="max-w-[570px] mx-auto flex flex-col items-center text-center justify-center min-h-screen px-4">
|
||||
<img src={error404} alt="" className="mb-14" />
|
||||
<h2 className=" mb-6">Page not found</h2>
|
||||
<div className="mb-10">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor labore et dolore magna aliqua.
|
||||
</div>
|
||||
<Link to={"/react-templates/edumim"} className="btn btn-primary">
|
||||
Back To Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import Feature from "../Feature";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import Accordion from "../HomeThreeComponents/Accordion";
|
||||
import Team from "../HomeThreeComponents/Team";
|
||||
import About from "../HomeTwoComponents/About";
|
||||
import Counter from "../HomeTwoComponents/Counter";
|
||||
import PageBanner from "../PageBanner";
|
||||
import Testimonials from "../Testimonials";
|
||||
|
||||
const AboutOne = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"About Us"} pageTitle="About Us" num={1} />
|
||||
<About />
|
||||
<Feature />
|
||||
<Counter />
|
||||
<Testimonials />
|
||||
<Team />
|
||||
<Accordion />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutOne;
|
||||
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import About from "../HomeThreeComponents/About";
|
||||
import CourseBlock from "../HomeThreeComponents/CourseBlock";
|
||||
|
||||
import Video from "../HomeTwoComponents/Video";
|
||||
import NewsLetter from "../NewsLetter";
|
||||
import PageBanner from "../PageBanner";
|
||||
import Platform from "../Platform";
|
||||
import Team from "../Team";
|
||||
import Topics from "../Topics";
|
||||
|
||||
const AboutTwo = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"About Us"} pageTitle='About Us' num={2} />
|
||||
<About />
|
||||
<Topics />
|
||||
<Platform />
|
||||
<CourseBlock />
|
||||
<Video />
|
||||
<Team />
|
||||
<NewsLetter />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutTwo;
|
||||
@@ -0,0 +1,435 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import {
|
||||
bThumb1,
|
||||
bThumb2,
|
||||
bThumb3,
|
||||
calender,
|
||||
clockIcon,
|
||||
insIcon1,
|
||||
insIcon2,
|
||||
insIcon3,
|
||||
insIcon4,
|
||||
insIcon5,
|
||||
insIcon6,
|
||||
rc1,
|
||||
rc2,
|
||||
rc3,
|
||||
search,
|
||||
} from "../../constant/images";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import PageBanner from "../PageBanner";
|
||||
|
||||
const BLogStandard = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"Blog Standard"} pageName={"Blog Standard"} />
|
||||
<div className="nav-tab-wrapper tabs section-padding">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-12 gap-[30px]">
|
||||
<div className="lg:col-span-8 col-span-12">
|
||||
<div className="grid grid-cols-1 gap-[30px]">
|
||||
{[bThumb1, bThumb2, bThumb3].map((item, index) => (
|
||||
<div className=" bg-white shadow-box12 rounded-[8px] transition duration-100 hover:shadow-box13">
|
||||
<div
|
||||
className="course-thumb h-[420px] rounded-t-[8px] relative"
|
||||
key={index}
|
||||
>
|
||||
<img
|
||||
src={item}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded-t-[8px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="course-content p-8">
|
||||
<span className="bg-secondary py-1 px-3 text-lg font-semibold rounded text-white inline-block">
|
||||
Education
|
||||
</span>
|
||||
<h3 className=" mb-4 mt-4">
|
||||
<a
|
||||
href="single-blog"
|
||||
className=" hover:text-primary transition duration-150"
|
||||
>
|
||||
Analytics To Help You Understand Your Customers
|
||||
Properly
|
||||
</a>
|
||||
</h3>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum
|
||||
available, but the majority have suffered alteration in
|
||||
some form, by injected humour.
|
||||
</p>
|
||||
<div className="flex lg:space-x-10 space-x-5 mt-6">
|
||||
<a
|
||||
className=" flex items-center space-x-2"
|
||||
href="blog-single.html"
|
||||
>
|
||||
<img src={calender} alt="" />
|
||||
<span>21 Feb, 22</span>
|
||||
</a>
|
||||
<a
|
||||
className=" flex items-center space-x-2"
|
||||
href="single-blog"
|
||||
>
|
||||
<img src={clockIcon} alt="" />
|
||||
<span>3 Min Read</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="pagination mt-14">
|
||||
<ul className=" flex justify-center space-x-3">
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
<iconify-icon
|
||||
icon="heroicons:chevron-double-left-20-solid"
|
||||
class="text-2xl"
|
||||
></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-primary text-white rounded font-semibold"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline-flex">
|
||||
<a
|
||||
href="#"
|
||||
className="flex w-12 h-12 flex-col items-center justify-center bg-[#ECECEC] rounded font-semibold"
|
||||
>
|
||||
<iconify-icon
|
||||
icon="heroicons:chevron-double-right-20-solid"
|
||||
class="text-2xl"
|
||||
></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-4 col-span-12">
|
||||
<div className="sidebarWrapper space-y-[30px]">
|
||||
<div className="wdiget widget_search">
|
||||
<div className="bg-[#F8F8F8] flex rounded-md shadow-e1 items-center py-[4px] pl-3 relative">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search keyword..."
|
||||
className="border-none focus:ring-0 bg-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<button className="btn btn-primary">
|
||||
<img src={search} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wdiget widget_catagory">
|
||||
<h4 className="widget-title">Categories</h4>
|
||||
|
||||
<ul className=" list-item space-y-4">
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Development (23)</span>
|
||||
<span class="text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Art & Design (45)</span>
|
||||
<span class="text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Data Science (14)</span>
|
||||
<span class="text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Data Science (14)</span>
|
||||
<span class="text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Technology (28)</span>
|
||||
<span class="text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>It Management (34)</span>
|
||||
<span class="text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="wdiget widget-recent-post">
|
||||
<h4 className=" widget-title">Related Courses</h4>
|
||||
<ul className="list">
|
||||
<li className=" flex space-x-4 border-[#ECECEC] pb-6 mb-6 last:pb-0 last:mb-0 last:border-0 border-b">
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded">
|
||||
<img
|
||||
src={rc1}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 ">
|
||||
<div className="mb-1 font-semibold text-black">
|
||||
How to Manage Ads For Clients The Right Way
|
||||
</div>
|
||||
<a className=" text-secondary font-semibold" href="#">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className=" flex space-x-4 border-[#ECECEC] pb-6 mb-6 last:pb-0 last:mb-0 last:border-0 border-b">
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded">
|
||||
<img
|
||||
src={rc2}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 ">
|
||||
<div className="mb-1 font-semibold text-black">
|
||||
How to Manage Ads For Clients The Right Way
|
||||
</div>
|
||||
<a className=" text-secondary font-semibold" href="#">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className=" flex space-x-4 border-[#ECECEC] pb-6 mb-6 last:pb-0 last:mb-0 last:border-0 border-b">
|
||||
<div className="flex-none ">
|
||||
<div className="h-20 w-20 rounded">
|
||||
<img
|
||||
src={rc3}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 ">
|
||||
<div className="mb-1 font-semibold text-black">
|
||||
How to Manage Ads For Clients The Right Way
|
||||
</div>
|
||||
<a className=" text-secondary font-semibold" href="#">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="wdiget">
|
||||
<h4 className="widget-title">Popular Tags</h4>
|
||||
<ul className="flex flex-wrap">
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Business
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Education
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Design
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Students
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Teachers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
classNameroom
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Online
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
e-Learning
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="mr-2 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-[#F8F8F8] px-3 py-1 rounded text-base transition-all duration-150 hover:bg-primary hover:text-white"
|
||||
>
|
||||
Book
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="wdiget">
|
||||
<h4 className="widget-title">Instagram Feed</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[
|
||||
insIcon1,
|
||||
insIcon2,
|
||||
insIcon3,
|
||||
insIcon4,
|
||||
insIcon5,
|
||||
insIcon6,
|
||||
].map((item, index) => (
|
||||
<div key={index}>
|
||||
<a
|
||||
href="#"
|
||||
className="group relative block h-20 w-full rounded"
|
||||
>
|
||||
<img
|
||||
src={item}
|
||||
alt=""
|
||||
className="block h-full w-full rounded object-cover"
|
||||
/>
|
||||
<div
|
||||
className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded bg-black bg-opacity-40
|
||||
text-3xl text-white opacity-0 transition-all duration-150 group-hover:opacity-100"
|
||||
>
|
||||
<span className="scale-0 transition-all duration-150 group-hover:scale-100">
|
||||
<iconify-icon icon="akar-icons:instagram-fill"></iconify-icon>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BLogStandard;
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from "react";
|
||||
import { call, mail, map } from "../../constant/images";
|
||||
import ContactForm from "../ContactForm";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import PageBanner from "../PageBanner";
|
||||
|
||||
const ContactUs = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"Contact Us"} pageName="Contact" />
|
||||
<div class="nav-tab-wrapper tabs section-padding">
|
||||
<div class="container">
|
||||
<div class=" grid grid-cols-12 gap-[30px]">
|
||||
<div class="xl:col-span-5 lg:col-span-6 col-span-12 ">
|
||||
<div class="mini-title">Contact Us</div>
|
||||
<h4 class="column-title ">
|
||||
Get In Touch <span class="shape-bg">Today</span>
|
||||
</h4>
|
||||
<div>
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
but the majority have suffered.
|
||||
</div>
|
||||
<ul class=" list-item space-y-6 pt-8">
|
||||
<li class="flex">
|
||||
<div class="flex-none mr-6">
|
||||
<div class="">
|
||||
<img src={mail} alt="" class="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class=" lg:text-xl text-lg mb-1">Email-Us :</h4>
|
||||
<div>Contactyourmail@gmail.com</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<div class="flex-none mr-6">
|
||||
<div class="">
|
||||
<img src={call} alt="" class="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class=" lg:text-xl text-lg mb-1">Call Us:</h4>
|
||||
<div>+88012 2910 1781, +88019 6128 1689</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<div class="flex-none mr-6">
|
||||
<div class="">
|
||||
<img src={map} alt="" class="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="lg:text-xl text-lg mb-1">Office :</h4>
|
||||
<div>Mountain Green Road 2389, NY, USA</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="xl:col-span-7 lg:col-span-6 col-span-12">
|
||||
<div class="bg-white shadow-box7 p-8 rounded-md">
|
||||
<ContactForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactUs;
|
||||
@@ -0,0 +1,327 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
rating1,
|
||||
rating2,
|
||||
rating3,
|
||||
rating4,
|
||||
rating5,
|
||||
search,
|
||||
whiteCheck,
|
||||
} from "../../constant/images";
|
||||
import FilteredCourse from "../FilteredCourse";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import PageBanner from "../PageBanner";
|
||||
|
||||
const CourseSideBar = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title="Courses" pageTitle="Courses" />
|
||||
<div className="nav-tab-wrapper tabs pt-10 section-padding-bottom">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-12 gap-[30px]">
|
||||
<div className="lg:col-span-8 col-span-12">
|
||||
<FilteredCourse
|
||||
classNameForTabOne={
|
||||
"grid md:grid-cols-2 grid-cols-1 gap-[30px]"
|
||||
}
|
||||
classNameForTabTwo={"grid grid-cols-1 gap-[30px]"}
|
||||
/>
|
||||
</div>
|
||||
<div class="lg:col-span-4 col-span-12">
|
||||
<SideBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CourseSideBar;
|
||||
|
||||
const SideBar = () => {
|
||||
const [priceVal, setPriceVal] = useState(0)
|
||||
return (
|
||||
<div className="sidebarWrapper space-y-[30px]">
|
||||
<div className="wdiget widget_search">
|
||||
<div className="bg-[#F8F8F8] flex rounded-md shadow-e1 items-center py-[4px] pl-3 relative">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search keyword..."
|
||||
className="border-none focus:ring-0 bg-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<button className="btn btn-primary">
|
||||
<img src={search} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wdiget widget_catagory">
|
||||
<h4 className="widget-title">Price Filter</h4>
|
||||
{/* <div className="slider-range"></div> */}
|
||||
|
||||
<input type="range" max={10000} min={1500} className="slider-range" onChange={(e) => setPriceVal(e.target.value)} />
|
||||
<div className="price_slider_amount">
|
||||
<div className=" mt-6">
|
||||
<div className="flex space-x-2 text-xl font-medium text-black">
|
||||
<span className=" flex-none">Price:</span>
|
||||
<input
|
||||
type="number"
|
||||
name="price"
|
||||
placeholder="Add Your Price"
|
||||
value={priceVal}
|
||||
disabled
|
||||
className="amount flex-1 border-none focus:outline-none focus:ring-0 p-0 text-xl font-medium text-black"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wdiget widget_catagory">
|
||||
<h4 className="widget-title">Categories</h4>
|
||||
|
||||
<ul className=" list-item space-y-4">
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Development (23)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Art & Design (45)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Data Science (14)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Data Science (14)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>Technology (28)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<a
|
||||
href="#"
|
||||
className=" flex justify-between bg-[#F8F8F8] py-[17px] px-5 rounded hover:bg-primary hover:text-white transition-all
|
||||
duration-150"
|
||||
>
|
||||
<span>It Management (34)</span>
|
||||
<span className=" text-2xl">
|
||||
<iconify-icon icon="heroicons:chevron-right-20-solid"></iconify-icon>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="wdiget widget_catagory">
|
||||
<h4 className="widget-title">Skill Level</h4>
|
||||
|
||||
<ul className=" list-item space-y-5">
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">All Levels (82)</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">Beginner Levels (82)</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">Intermediate Level (82)</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">Expert Level (82)</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="wdiget widget_catagory">
|
||||
<h4 className="widget-title">Language</h4>
|
||||
|
||||
<ul className=" list-item space-y-5">
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">Spanish Language</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">Arabic Language</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">United States (US)</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">United Kingdom (UK)</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="wdiget widget_catagory">
|
||||
<h4 className="widget-title">Rating By</h4>
|
||||
|
||||
<ul className=" list-item space-y-5">
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">
|
||||
<img src={rating1} alt="" />
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">
|
||||
<img src={rating2} alt="" />
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">
|
||||
<img src={rating3} alt="" />
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">
|
||||
<img src={rating4} alt="" />
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li className=" block">
|
||||
<label className=" flex space-x-3 form-check cursor-pointer">
|
||||
<input type="checkbox" className=" hidden form-check-input" />
|
||||
<span className="ck-box flex flex-col items-center justify-center">
|
||||
<img src={whiteCheck} alt="" className="object-contain" />
|
||||
</span>
|
||||
<span className="form-check-label">
|
||||
<img src={rating5} alt="" />
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
import FilteredCourse from "../FilteredCourse";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import PageBanner from "../PageBanner";
|
||||
|
||||
const Courses = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"Courses"} pageName="Courses" />
|
||||
<div className="nav-tab-wrapper tabs pt-10 section-padding-bottom">
|
||||
<div className="container">
|
||||
<FilteredCourse
|
||||
classNameForTabOne={
|
||||
"grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px]"
|
||||
}
|
||||
classNameForTabTwo={
|
||||
"grid lg:grid-cols-2 md:grid-cols-1 grid-cols-1 gap-[30px]"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Courses;
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import EventsList from "../EventsList";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import PageBanner from "../PageBanner";
|
||||
|
||||
const Event = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"Events"} pageTitle="Events" />
|
||||
<EventsList />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Event;
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import EventDetails from "../EventDetails";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import PageBanner from "../PageBanner";
|
||||
|
||||
const EventSingle = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"Painting Contest 2022"} pageTitle={"Events"} />
|
||||
<EventDetails />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventSingle;
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import CoralinaCloud from "../CoralinaCloud";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import PageBanner from "../PageBanner";
|
||||
|
||||
const InstructorDetails = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner
|
||||
title={"About Instructor"}
|
||||
pageTitle={"Team Member"}
|
||||
num={1}
|
||||
/>
|
||||
<CoralinaCloud />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InstructorDetails;
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
import Brands from "../Brands";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import Testimonial from "../HomeThreeComponents/Testimonial";
|
||||
import PageBanner from "../PageBanner";
|
||||
import Team from "../Team";
|
||||
|
||||
const InstructorOne = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"Instructor"} pageName={"Instructor"} num={1} />
|
||||
<Team />
|
||||
<Testimonial />
|
||||
<Brands
|
||||
section_padding_bottom={"section-padding-bottom"}
|
||||
section_padding_top={"section-padding-top"}
|
||||
/>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InstructorOne;
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import Team from "../HomeThreeComponents/Team";
|
||||
import PageBanner from "../PageBanner";
|
||||
import Testimonials from "../Testimonials";
|
||||
|
||||
const InstructorTwo = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"Instructor"} pageName={"Instructor"} num={2} />
|
||||
<Team />
|
||||
<Testimonials />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InstructorTwo;
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import BlogPost from "../BlogPost";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import PageBanner from "../PageBanner";
|
||||
|
||||
const SingleBlog = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"Blog Details"} pageName="Blog Details" />
|
||||
<BlogPost />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleBlog;
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import CourseDetails from "../CourseDetails";
|
||||
import Footer from "../Footer";
|
||||
import Header from "../Header";
|
||||
import PageBanner from "../PageBanner";
|
||||
|
||||
const SingleCourse = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<PageBanner title={"Course Details"} pageName={"Course Details"} />
|
||||
<CourseDetails />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleCourse;
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Thanks = () => {
|
||||
return (
|
||||
<section className="welcome-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<center>
|
||||
<div className="hero-text">
|
||||
<h1>Thank you for your e-mail.</h1>
|
||||
<h3>We Will contact you very soon.</h3>
|
||||
<Link className="back-home" to={"/react-templates/edumim"}>
|
||||
Back To Home
|
||||
</Link>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Thanks;
|
||||
@@ -0,0 +1,74 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import ok from "../assets/images/svg/ok.svg";
|
||||
import aboutTwo from "../assets/images/all-img/about2.png";
|
||||
|
||||
const Platform = () => {
|
||||
return (
|
||||
<div className="bg-[url('../images/all-img/section-bg-2.png')] bg-cover bg-no-repeat bg-center section-padding">
|
||||
<div className="container">
|
||||
<div className="lg:grid grid-cols-12 gap-[30px]">
|
||||
<div className="xl:col-span-5 lg:col-span-6 col-span-12">
|
||||
<div className="mini-title">Best Online Learning Platform</div>
|
||||
<h4 className="column-title ">
|
||||
One Platfrom & Many
|
||||
<span className="shape-bg">Courses</span> For You
|
||||
</h4>
|
||||
<div>
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
but the majority have suffered.
|
||||
</div>
|
||||
<ul className=" space-y-2 pt-8">
|
||||
<li className="flex flex-wrap">
|
||||
<div className="flex-none mr-3">
|
||||
<div className="">
|
||||
<img src={ok} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className=" text-lg mb-1 font-semibold">
|
||||
9/10 Average Satisfaction Rate
|
||||
</h4>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex flex-wrap">
|
||||
<div className="flex-none mr-3">
|
||||
<div className="">
|
||||
<img src={ok} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className=" text-lg mb-1 font-semibold">
|
||||
96% Completitation Rate
|
||||
</h4>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex flex-wrap">
|
||||
<div className="flex-none mr-3">
|
||||
<div className="">
|
||||
<img src={ok} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className=" text-lg mb-1 font-semibold">
|
||||
Friendly Environment & Expert Teacher
|
||||
</h4>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pt-8">
|
||||
<a href="#" className=" btn btn-primary">
|
||||
Explore Our Courses
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:col-span-7 lg:col-span-6 col-span-12 lg:pt-0 md:pt-10 pt-6">
|
||||
<img src={aboutTwo} alt="" className=" mx-auto block w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Platform;
|
||||
@@ -0,0 +1,71 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { teamData } 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-[30px] pt-10">
|
||||
{teamData.map((item, index) => (
|
||||
<div
|
||||
className=" bg-white shadow-box3 rounded-[8px] transition-all duration-100 pt-10 pb-[28px] px-6 text-center hover:shadow-box4
|
||||
border-t-4 border-transparent hover:border-secondary "
|
||||
key={index}
|
||||
>
|
||||
<div className="w-[170px] h-[170px] rounded-full relative mx-auto mb-8">
|
||||
<img
|
||||
src={item.img}
|
||||
alt=""
|
||||
className=" w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="course-content">
|
||||
<h4 className=" lg:text-2xl text-1xl mb-1 font-bold">
|
||||
{item.name}
|
||||
</h4>
|
||||
<div>{item.title}</div>
|
||||
<ul className="space-x-4 flex justify-center pt-6">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className=" h-10 w-10 rounded bg-red-paste text-primary flex flex-col justify-center items-center text-2xl transition
|
||||
hover:bg-primary hover:text-white"
|
||||
>
|
||||
<iconify-icon icon="bxl:facebook"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className=" h-10 w-10 rounded bg-green-paste text-secondary flex flex-col justify-center items-center text-2xl transition
|
||||
hover:bg-secondary hover:text-white"
|
||||
>
|
||||
<iconify-icon icon="bxl:twitter"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className=" h-10 w-10 rounded bg-[#EEE8FF] text-#8861DB flex flex-col justify-center items-center text-2xl transition
|
||||
hover:bg-[#8861DB] hover:text-white"
|
||||
>
|
||||
<iconify-icon icon="bxl:linkedin"></iconify-icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
@@ -0,0 +1,80 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import testiLeft from "../assets/images/all-img/testi-left.png";
|
||||
|
||||
const Testimonials = () => {
|
||||
return (
|
||||
<div className=" section-padding bg-[url('../images/all-img/section-bg-16.png')] bg-cover bg-no-repeat lg:mt-[136px]">
|
||||
<div className="container lg:-mt-[250px] xl:pb-[136px] lg:pb-20 pb-10">
|
||||
<div
|
||||
className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px] bg-white shadow-box14 rounded-md
|
||||
divide-x-2 divide-[#E4EEED] py-20"
|
||||
>
|
||||
<div className=" text-center ">
|
||||
<h2 className="text-secondary font-bold ">
|
||||
<span className=" counter">82</span>K+
|
||||
</h2>
|
||||
<span className="block text-black font-semibold">
|
||||
Enrolled Students
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className=" text-center">
|
||||
<h2 className="text-secondary font-bold ">
|
||||
<span className=" counter">348</span>+
|
||||
</h2>
|
||||
<span className="block text-black font-semibold">
|
||||
Academic Programs
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className=" text-center">
|
||||
<h2 className="text-secondary font-bold ">
|
||||
<span className=" counter">125</span>+
|
||||
</h2>
|
||||
<span className="block text-black font-semibold">
|
||||
Winning Award
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className=" text-center">
|
||||
<h2 className="text-secondary font-bold ">
|
||||
<span className=" counter">37</span>+
|
||||
</h2>
|
||||
<span className="block text-black font-semibold">
|
||||
Certified Students
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-12 lg:gap-10 gap-6 ">
|
||||
<div className="xl:col-span-7 lg:col-span-6 col-span-12">
|
||||
<img src={testiLeft} alt="" draggable="false" />
|
||||
</div>
|
||||
<div className="xl:col-span-5 lg:col-span-6 col-span-12 flex flex-col justify-center ">
|
||||
<div className="mini-title">Testimonial</div>
|
||||
<h4 className="column-title ">
|
||||
What Says Our
|
||||
<span className="shape-bg">Students</span>
|
||||
About Us
|
||||
</h4>
|
||||
<div>
|
||||
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 in some form, by injected humour.
|
||||
</div>
|
||||
<div className="mt-12">
|
||||
<a href="#" className="btn btn-primary">
|
||||
View All Reviews
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
@@ -0,0 +1,42 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React from "react";
|
||||
import { topicsData } from "../constant/dummyData";
|
||||
|
||||
const Topics = () => {
|
||||
return (
|
||||
<div className=" section-padding">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<div className="mini-title">Start Learning From Today</div>
|
||||
<div className="column-title ">
|
||||
Popular <span className="shape-bg">Topics</span> To Learn
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-[30px] pt-10">
|
||||
{topicsData.map((item, index) => (
|
||||
<a
|
||||
className=" rounded-[8px] transition duration-100 hover:shadow-box hover:bg-white group bg-[#FFE8E8] text-center px-6
|
||||
py-[65px] hover:-translate-y-2"
|
||||
href="#"
|
||||
key={index}
|
||||
>
|
||||
<div className="w-[72px] h-[72px] rounded-full bg-white relative mx-auto flex flex-col justify-center items-center mb-8 group-hover:bg-[#FFE8E8]">
|
||||
<img
|
||||
src={item.logo}
|
||||
alt=""
|
||||
className=" w-[32px] h-[32px] object-cover "
|
||||
/>
|
||||
</div>
|
||||
<div className="course-content">
|
||||
<h4 className=" text-2xl mb-2 font-bold">{item.title}</h4>
|
||||
<p>{item.quantity}</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Topics;
|
||||
Reference in New Issue
Block a user