first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,6 @@
|
||||
REACT_APP_APPSITE='http://welcome.float.sg'
|
||||
REACT_APP_EMAIL='support@float.sg'
|
||||
REACT_APP_WWW='http://float-www.dev.chiefsoft.net'
|
||||
REACT_APP_FLEET='http://float-flt.dev.chiefsoft.net'
|
||||
REACT_APP_USERS='http://float-usr.dev.chiefsoft.net'
|
||||
REACT_APP_APIGATE='http://float-gat.dev.chiefsoft.net'
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
Generated
+8
@@ -0,0 +1,8 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
Generated
+8
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
Generated
+8
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/coregrade-www.iml" filepath="$PROJECT_DIR$/.idea/coregrade-www.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
Generated
+19
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="MessDetectorOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PHPCSFixerOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PHPCodeSnifferOptionsConfiguration">
|
||||
<option name="highlightLevel" value="WARNING" />
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PhpStanOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PsalmOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
</project>
|
||||
@@ -0,0 +1,70 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
@@ -0,0 +1,35 @@
|
||||
version: '3'
|
||||
services:
|
||||
coregrade-www:
|
||||
#image: registry.chiefsoft.net/wrenchboard-users-wrench:latest
|
||||
build:
|
||||
context: .
|
||||
dockerfile: docker/Dockerfile
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- 5701:3000
|
||||
# - 3800:3011
|
||||
# stdin_open: true
|
||||
working_dir: /usr/src/app
|
||||
volumes:
|
||||
- ./:/usr/src/app
|
||||
- /usr/src/app/node_modules
|
||||
- ./src/:/usr/src/app/src
|
||||
- ./vendors/:/usr/src/app/vendors
|
||||
extra_hosts:
|
||||
- backend.wrenchboard.api.live:10.10.33.15
|
||||
- backend.wrenchboard.api.test:10.10.33.15
|
||||
# #- backend.wrenchboard.api.live:172.31.4.27
|
||||
# #- backend.wrenchboard.api.test:10.20.30.27
|
||||
- apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19
|
||||
- apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
|
||||
environment:
|
||||
- CHOKIDAR_USEPOLLING=true
|
||||
# volumes:
|
||||
# - ./:/app
|
||||
# - /app/node_modules
|
||||
tty: true
|
||||
stdin_open: true
|
||||
# working_dir: /app
|
||||
volumes:
|
||||
src:
|
||||
@@ -0,0 +1,113 @@
|
||||
FROM alpine:3.17
|
||||
|
||||
ENV NODE_VERSION 19.8.1
|
||||
|
||||
RUN addgroup -g 1000 node \
|
||||
&& adduser -u 1000 -G node -s /bin/sh -D node \
|
||||
&& apk add --no-cache \
|
||||
libstdc++ \
|
||||
&& apk add --no-cache --virtual .build-deps \
|
||||
curl \
|
||||
&& ARCH= && alpineArch="$(apk --print-arch)" \
|
||||
&& case "${alpineArch##*-}" in \
|
||||
x86_64) \
|
||||
ARCH='x64' \
|
||||
CHECKSUM="3106608fc62f92519578148e872a6862f36ea7b1ef6ac7c1475e2064fe65a9c6" \
|
||||
;; \
|
||||
*) ;; \
|
||||
esac \
|
||||
&& if [ -n "${CHECKSUM}" ]; then \
|
||||
set -eu; \
|
||||
curl -fsSLO --compressed "https://unofficial-builds.nodejs.org/download/release/v$NODE_VERSION/node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz"; \
|
||||
echo "$CHECKSUM node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" | sha256sum -c - \
|
||||
&& tar -xJf "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
|
||||
&& ln -s /usr/local/bin/node /usr/local/bin/nodejs; \
|
||||
else \
|
||||
echo "Building from source" \
|
||||
# backup build
|
||||
&& apk add --no-cache --virtual .build-deps-full \
|
||||
binutils-gold \
|
||||
g++ \
|
||||
gcc \
|
||||
gnupg \
|
||||
libgcc \
|
||||
linux-headers \
|
||||
make \
|
||||
python3 \
|
||||
# gpg keys listed at https://github.com/nodejs/node#release-keys
|
||||
&& for key in \
|
||||
4ED778F539E3634C779C87C6D7062848A1AB005C \
|
||||
141F07595B7B3FFE74309A937405533BE57C7D57 \
|
||||
74F12602B6F1C4E913FAA37AD3A89613643B6201 \
|
||||
DD792F5973C6DE52C432CBDAC77ABFA00DDBF2B7 \
|
||||
61FC681DFB92A079F1685E77973F295594EC4689 \
|
||||
8FCCA13FEF1D0C2E91008E09770F7A9A5AE15600 \
|
||||
C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
|
||||
890C08DB8579162FEE0DF9DB8BEAB4DFCF555EF4 \
|
||||
C82FA3AE1CBEDC6BE46B9360C43CEC45C17AB93C \
|
||||
108F52B48DB57BB0CC439B2997B01419BD92F80A \
|
||||
; do \
|
||||
gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
|
||||
gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
|
||||
done \
|
||||
&& curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION.tar.xz" \
|
||||
&& curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/SHASUMS256.txt.asc" \
|
||||
&& gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc \
|
||||
&& grep " node-v$NODE_VERSION.tar.xz\$" SHASUMS256.txt | sha256sum -c - \
|
||||
&& tar -xf "node-v$NODE_VERSION.tar.xz" \
|
||||
&& cd "node-v$NODE_VERSION" \
|
||||
&& ./configure \
|
||||
&& make -j$(getconf _NPROCESSORS_ONLN) V= \
|
||||
&& make install \
|
||||
&& apk del .build-deps-full \
|
||||
&& cd .. \
|
||||
&& rm -Rf "node-v$NODE_VERSION" \
|
||||
&& rm "node-v$NODE_VERSION.tar.xz" SHASUMS256.txt.asc SHASUMS256.txt; \
|
||||
fi \
|
||||
&& rm -f "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" \
|
||||
&& apk del .build-deps \
|
||||
# smoke tests
|
||||
&& node --version \
|
||||
&& npm --version
|
||||
|
||||
ENV YARN_VERSION 1.22.19
|
||||
|
||||
RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
|
||||
&& for key in \
|
||||
6A010C5166006599AA17F08146C2130DFD2497F5 \
|
||||
; do \
|
||||
gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
|
||||
gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
|
||||
done \
|
||||
&& curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
|
||||
&& curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz.asc" \
|
||||
&& gpg --batch --verify yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
|
||||
&& mkdir -p /opt \
|
||||
&& tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
|
||||
&& ln -s /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
|
||||
&& ln -s /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
|
||||
&& rm yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
|
||||
&& apk del .build-deps-yarn \
|
||||
# smoke test
|
||||
&& yarn --version
|
||||
|
||||
|
||||
# add `/app/node_modules/.bin` to $PATH
|
||||
# ENV PATH /app/node_modules/.bin:$PATH
|
||||
ENV PATH /usr/src/app/node_modules/.bin:$PATH
|
||||
|
||||
# install app dependencies
|
||||
COPY package.json ./
|
||||
RUN npm install
|
||||
#COPY package-lock.json ./
|
||||
#RUN npm install --silent
|
||||
# RUN npm install react-scripts@3.4.1 -g --silent
|
||||
|
||||
# add app
|
||||
COPY . ./
|
||||
|
||||
# start app
|
||||
CMD ["npm","run", "start"]
|
||||
|
||||
# CMD ["yarn", "start"]
|
||||
|
||||
Generated
+29459
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "edumim",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "https://bestwpware.com/react-templates/edumim/",
|
||||
"dependencies": {
|
||||
"@emailjs/browser": "^3.10.0",
|
||||
"@headlessui/react": "^1.7.7",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"framer-motion": "^7.10.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.5.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"swiper": "^8.4.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Edumim React App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
|
||||
<script src="https://code.iconify.design/iconify-icon/1.0.0/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||
|
||||
import HomeOne from "./Components/Home/HomeOne";
|
||||
import HomeThree from "./Components/Home/HomeThree";
|
||||
import HomeTwo from "./Components/Home/HomeTwo";
|
||||
import ErrorPage from "./Components/Pages/404Page";
|
||||
import AboutOne from "./Components/Pages/AboutOne";
|
||||
import AboutTwo from "./Components/Pages/AboutTwo";
|
||||
import BLogStandard from "./Components/Pages/BLogStandard";
|
||||
import ContactUs from "./Components/Pages/ContactUs";
|
||||
import Courses from "./Components/Pages/Courses";
|
||||
import CourseSideBar from "./Components/Pages/CourseSideBar";
|
||||
import Event from "./Components/Pages/Event";
|
||||
import EventSingle from "./Components/Pages/EventSingle";
|
||||
import InstructorDetails from "./Components/Pages/InstructorDetails";
|
||||
import InstructorOne from "./Components/Pages/InstructorOne";
|
||||
import InstructorTwo from "./Components/Pages/InstructorTwo";
|
||||
import SingleBlog from "./Components/Pages/SingleBlog";
|
||||
import SingleCourse from "./Components/Pages/SingleCourse";
|
||||
import Thanks from "./Components/Pages/Thanks";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div className="font-gilroy font-medium text-gray text-lg leading-[27px]">
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={<Navigate to={"/react-templates/edumim"} />}
|
||||
/>
|
||||
<Route path="/react-templates/edumim" element={<HomeOne />} />
|
||||
<Route
|
||||
path="/react-templates/edumim/home-two"
|
||||
element={<HomeTwo />}
|
||||
/>
|
||||
<Route
|
||||
path="/react-templates/edumim/home-three"
|
||||
element={<HomeThree />}
|
||||
/>
|
||||
<Route path="/react-templates/edumim/about" element={<AboutOne />} />
|
||||
<Route
|
||||
path="/react-templates/edumim/about-two"
|
||||
element={<AboutTwo />}
|
||||
/>
|
||||
<Route
|
||||
path="/react-templates/edumim/instructor"
|
||||
element={<InstructorOne />}
|
||||
/>
|
||||
<Route
|
||||
path="/react-templates/edumim/instructor-two"
|
||||
element={<InstructorTwo />}
|
||||
/>
|
||||
<Route
|
||||
path="/react-templates/edumim/instructor-details"
|
||||
element={<InstructorDetails />}
|
||||
/>
|
||||
<Route path="/react-templates/edumim/event" element={<Event />} />
|
||||
<Route
|
||||
path="/react-templates/edumim/event-single"
|
||||
element={<EventSingle />}
|
||||
/>
|
||||
<Route path="/react-templates/edumim/error" element={<ErrorPage />} />
|
||||
<Route path="/react-templates/edumim/courses" element={<Courses />} />
|
||||
<Route
|
||||
path="/react-templates/edumim/courses-sidebar"
|
||||
element={<CourseSideBar />}
|
||||
/>
|
||||
<Route
|
||||
path="/react-templates/edumim/single-course"
|
||||
element={<SingleCourse />}
|
||||
/>
|
||||
<Route
|
||||
path="/react-templates/edumim/blog-standard"
|
||||
element={<BLogStandard />}
|
||||
/>
|
||||
<Route
|
||||
path="/react-templates/edumim/single-blog"
|
||||
element={<SingleBlog />}
|
||||
/>
|
||||
<Route
|
||||
path="/react-templates/edumim/contacts"
|
||||
element={<ContactUs />}
|
||||
/>
|
||||
<Route path="/react-templates/edumim/thanks" element={<Thanks />} />
|
||||
<Route path="*" element={<ErrorPage />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -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;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,9 @@
|
||||
.social-explore:hover > ul {
|
||||
display: flex;
|
||||
}
|
||||
.social-explore > ul {
|
||||
display: none;
|
||||
}
|
||||
.social-explore:hover > button {
|
||||
display: none;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,43 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300i,400,400i,600,600i,700,700i");
|
||||
|
||||
.welcome-area {
|
||||
background: #fff;
|
||||
}
|
||||
.hero-text {
|
||||
margin-top: 200px;
|
||||
}
|
||||
.hero-text h1 {
|
||||
color: #35ac39;
|
||||
font-size: 60px;
|
||||
font-weight: 500;
|
||||
line-height: 70px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.hero-text h3 {
|
||||
margin-bottom: 60px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
.back-home {
|
||||
background: #35ac39;
|
||||
border: 2px solid #35ac39;
|
||||
border-radius: 500px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
margin: 15px 15px 0;
|
||||
padding: 12px 36px;
|
||||
text-transform: capitalize;
|
||||
transition: all 0.2s ease 0s;
|
||||
text-decoration: navajowhite;
|
||||
}
|
||||
.back-home:hover,
|
||||
.back-home:focus {
|
||||
background: #4328b7;
|
||||
color: #fff;
|
||||
border: 2px solid #4328b7;
|
||||
text-decoration: none;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user