diff --git a/src/App.jsx b/src/App.jsx index 70fc1ec..fad440d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,6 +9,7 @@ import "./index.scss"; import Preloader from "./components/Preloader/Preloader"; const Home = lazy(() => import("./pages/Home/Home")); +const About = lazy(() => import("./pages/About/About")); const Explore = lazy(() => import("./pages/Explore/Explore")); const DetailPage = lazy(() => import("./pages/DetailPage/DetailPage")); const ContactUs = lazy(() => import("./pages/ContactUs/ContactUs")); @@ -24,6 +25,7 @@ function App({ location }) { )} + diff --git a/src/assets/about/aboutPage_People.svg b/src/assets/about/aboutPage_People.svg new file mode 100644 index 0000000..fbe0f0d --- /dev/null +++ b/src/assets/about/aboutPage_People.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/about/aboutPage_Team.svg b/src/assets/about/aboutPage_Team.svg new file mode 100644 index 0000000..e763b77 --- /dev/null +++ b/src/assets/about/aboutPage_Team.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index fde746c..9420063 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -1,87 +1,81 @@ -import React from 'react'; -import styles from './footer.module.scss'; -import Logo from './../../assets/_logo/logo.png'; -import UseAnimations from 'react-useanimations'; -import github from 'react-useanimations/lib/github'; -import linkedin from 'react-useanimations/lib/linkedin'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faDiscord } from '@fortawesome/free-brands-svg-icons'; +import React from "react"; +import styles from "./footer.module.scss"; +import Logo from "./../../assets/_logo/logo.png"; +import UseAnimations from "react-useanimations"; +import github from "react-useanimations/lib/github"; +import linkedin from "react-useanimations/lib/linkedin"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faDiscord } from "@fortawesome/free-brands-svg-icons"; export default function Footer(props) { - return ( - - ); + return ( + + ); } diff --git a/src/pages/About/About.jsx b/src/pages/About/About.jsx new file mode 100644 index 0000000..bf34114 --- /dev/null +++ b/src/pages/About/About.jsx @@ -0,0 +1,99 @@ +import React, { useEffect } from "react"; +import MetaComponent from "../../seo/MetaComponent"; +import metaData from "../../seo/metaData"; +import aboutPagesvg1 from "../../assets/about/aboutPage_People.svg"; +import aboutPagesvg2 from "../../assets/about/aboutPage_Team.svg"; +//css +import style from "./about.css"; +//mui + +function About() { + const getData = () => { + fetch("https://api.cswaala.in/v1/cs", { + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + }) + .then((response) => { + return response.json(); + }) + .then((myJson) => { + sessionStorage.setItem("store", JSON.stringify(myJson.Resources)); + }); + }; + useEffect(() => { + getData(); + }, []); + + return ( +
+ +
+
+
+
+
+
+

+ ABOUT US +

+

+ “Education is the passport to the future, for tomorrow + belongs to those who prepare for it today.” - Malcolm X +

+
+

+ We are a community of like-minded peeps from different + areas of interests and are united by a single motive + "spread knowledge about the best resources that are + available free on the Internet but are not used + frequently". Everyone in our community was a beginner at + some point in time and in reaching the level where they + stand now, they came across various learning platforms and + resources. So they are all now sharing their knowledge + with the OSS community! +

+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+

+ Meet Our Team +

+
+
+
+
+
+ + {/* */} +
+ ); +} + +export default About; diff --git a/src/pages/About/about.css b/src/pages/About/about.css new file mode 100644 index 0000000..f1b6616 --- /dev/null +++ b/src/pages/About/about.css @@ -0,0 +1,279 @@ +#AboutPage { + background-color: #1c1c1c; +} + +#hero { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: left; + position: relative; + min-height: 800px; + height: calc(100vh - 90px); + background: #222222; +} + +#hero h1 { + margin: 0 0 20px 0; + font-size: 48px; + font-weight: 700; + line-height: 56px; + color: #fff; +} + +#hero h1 span { + border-bottom: 4px solid #fbb03b; + font-size: 60px; +} + +#hero h1 span:hover { + border-bottom: 4px solid #1c1c1c; + color: #fbb03b; + font-size: 65px; +} + +#hero h2 { + color: rgba(255, 255, 255, 0.8); + margin-bottom: 40px; + font-size: 20px; + font-weight: 400; + font-family: "Work Sans", bold; +} + +#hero p { + margin: 0 0 20px 0; + font-size: 20px; + font-weight: 500; + line-height: 40px; + color: #fff; +} + +.animated { + animation: up-down 2s ease-in-out infinite alternate-reverse both; + margin-top: 40%; +} + +#team { + width: 100%; + display: flex; + align-items: flex-end; + justify-content: right; + text-align: right; + position: relative; + min-height: 500px; + height: calc(100vh - 90px); + background: #222222; +} + +#team h1 { + margin: 0 0 20px 0; + font-size: 48px; + font-weight: 700; + line-height: 56px; + color: #fff; +} + +#team h1 span { + border-bottom: 4px solid #fbb03b; + font-size: 60px; +} + +#team h1 span:hover { + border-bottom: 4px solid #1c1c1c; + color: #fbb03b; + font-size: 65px; +} + +#team h2 { + color: rgba(255, 255, 255, 0.8); + margin-bottom: 40px; + font-size: 20px; + font-weight: 400; + font-family: "Work Sans", bold; +} + +#team p { + margin: 0 0 20px 0; + font-size: 20px; + font-weight: 500; + line-height: 40px; + color: #fff; +} + +@media (min-width: 1024px) { + #hero { + background-attachment: fixed; + } +} + +@media (max-width: 991px) { + #hero { + padding-top: 80px; + text-align: center; + } + .animated { + -webkit-animation: none; + animation: none; + } + .hero-img { + text-align: center; + } + .hero-img img { + max-width: 50%; + } + #hero h1 { + font-size: 28px; + line-height: 32px; + margin-bottom: 10px; + } + #hero h2 { + font-size: 18px; + line-height: 24px; + margin-bottom: 30px; + } +} + +@media (max-width: 575px) { + .hero-img img { + width: 80%; + } +} +@media (max-width: 380px) { + .hero-img img { + max-width: 80%; + } +} + +@-webkit-keyframes up-down { + 0% { + transform: translateY(10px); + } + 100% { + transform: translateY(-10px); + } +} + +@keyframes up-down { + 0% { + transform: translateY(10px); + } + 100% { + transform: translateY(-10px); + } +} +/* card css */ +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); + +/* body { + background : beige ; + margin : 0 ; + padding : 0 ; + transition: all .3s; +} */ +::-webkit-scrollbar { + width: 5px; +} +::-webkit-scrollbar-thumb { + background: rgba(255, 99, 71, 0.3); + border-radius: 2px; +} +::-webkit-scrollbar-thumb:hover { + background: rgba(255, 99, 71, 0.9); + border-radius: 2px; +} +/* .container { + width: 80%; + margin: 0 auto; + display :flex; + justify-content:space-evenly; + flex-wrap:wrap; +} */ + +.card { + margin: auto; + width: 350px; + overflow: hidden; + border-radius: 20px; + background: white; + margin-top: 50px; + transition: all 0.2s; + box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); +} + +.card:hover { + box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5); + transform: translate(-5px, -5px); +} + +.card:hover .icon svg { + animation: iconjln 1s; +} + +.img-cover { + position: relative; +} + +.card img { + width: 350px; + height: 350px; + object-fit: cover; +} + +.icon { + position: absolute; + top: 0; + padding: 25px; + right: 0; + border-bottom-left-radius: 20px; + backdrop-filter: blur(20px); + background-color: rgba(255, 255, 255, 0.5); + cursor: pointer; +} + +.desc { + padding: 1.5em; + font-family: "Poppins", sans-serif; +} +.desc h1 { + display: inline; +} +.tdesc { + margin-bottom: 40px; + width: 100%; + height: 50px; + overflow: auto; +} + +.desc a { + text-decoration: none; + background-color: dodgerblue; + padding: 15px 25px; + color: white; + border-radius: 15px; + display: block; + text-align: center; + transition: all 0.2s; +} +.desc a:hover { + background-color: SteelBlue; +} +.desc a:hover svg { + animation: iconjln 1s; +} + +@keyframes iconjln { + 0%, + 100% { + opacity: 1; + transform: translateX(0%); + } + 50% { + opacity: 0; + transform: translateX(100%); + } + 70% { + opacity: 0; + transform: translateX(-100%); + } +} diff --git a/src/seo/metaData.js b/src/seo/metaData.js index dd74718..bd01892 100644 --- a/src/seo/metaData.js +++ b/src/seo/metaData.js @@ -5,6 +5,11 @@ const data = { "An organization to Educate people about the right style of getting educated!", keywords: "CSwaala, home, student, education", }, + about: { + title: "About | CSwaala", + description: "Get to know more about us", + keywords: "About, CSwaala, home, student, education", + }, notFound: { title: "404 | CSwaala", description: "Uh ohh Looks like you encountered a 404 Not Found error.",