diff --git a/package.json b/package.json index da2f069d..dfff8f1a 100644 --- a/package.json +++ b/package.json @@ -1,67 +1,71 @@ -{ - "name": "syt_website", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "lint": "eslint --fix eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview", - "prepare": "husky install", - "start": "react-scripts start", - "test": "react-scripts test", - "eject": "react-scripts eject", - "pretty": "prettier --write .", - "knip": "knip" - }, - "dependencies": { - "@emailjs/browser": "^3.11.0", - "@fortawesome/fontawesome-svg-core": "^6.4.0", - "@fortawesome/free-solid-svg-icons": "^6.4.0", - "@fortawesome/react-fontawesome": "^0.2.0", - "@headlessui/react": "^1.7.15", - "@hookform/resolvers": "^3.3.2", - "@tanstack/react-query": "^4.35.3", - "@tanstack/react-query-devtools": "^4.35.3", - "axios": "^1.6.1", - "date-fns": "^2.30.0", - "html-react-parser": "^5.0.6", - "prop-types": "^15.8.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-fast-marquee": "^1.6.2", - "react-hook-form": "^7.48.2", - "react-photo-album": "^2.3.0", - "react-router-dom": "^6.11.2", - "react-simple-wysiwyg": "^2.2.5", - "tailwind-scrollbar-hide": "^1.1.7", - "yet-another-react-lightbox": "^3.15.6", - "yup": "^1.3.2" - }, - "devDependencies": { - "@types/react": "^18.0.28", - "@types/react-dom": "^18.0.11", - "@vitejs/plugin-react": "^4.0.0", - "autoprefixer": "^10.4.14", - "eslint": "^8.43.0", - "eslint-config-airbnb": "^19.0.4", - "eslint-plugin-import": "^2.27.5", - "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.32.2", - "eslint-plugin-react-hooks": "^4.6.0", - "husky": "^8.0.0", - "knip": "^4.3.1", - "postcss": "^8.4.23", - "prettier": "^2.8.8", - "tailwindcss": "^3.3.2", - "vite": "^4.5.1" - }, - "lint-staged": { - "**/*.{js,jsx}": [ - "npm run lint", - "prettier --write" - ] - } -} +{ + "name": "syt_website", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint --fix eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview", + "prepare": "husky install", + "start": "react-scripts start", + "test": "react-scripts test", + "eject": "react-scripts eject", + "pretty": "prettier --write .", + "knip": "knip" + }, + "dependencies": { + "@emailjs/browser": "^3.11.0", + "@fortawesome/fontawesome-svg-core": "^6.4.0", + "@fortawesome/free-solid-svg-icons": "^6.4.0", + "@fortawesome/react-fontawesome": "^0.2.0", + "@headlessui/react": "^1.7.15", + "@hookform/resolvers": "^3.3.2", + "@hookstate/core": "^4.0.1", + "@tanstack/react-query": "^5.22.2", + "@tanstack/react-query-devtools": "^5.24.0", + "axios": "^1.6.1", + "date-fns": "^2.30.0", + "html-react-parser": "^5.0.6", + "million": "^3.0.2", + "prop-types": "^15.8.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-fast-marquee": "^1.6.2", + "react-hook-form": "^7.48.2", + "react-lazy-load-image-component": "^1.6.0", + "react-photo-album": "^2.3.0", + "react-router-dom": "^6.11.2", + "react-share": "^5.1.0", + "react-simple-wysiwyg": "^2.2.5", + "tailwind-scrollbar-hide": "^1.1.7", + "yet-another-react-lightbox": "^3.15.6", + "yup": "^1.3.2" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "@vitejs/plugin-react": "^4.0.0", + "autoprefixer": "^10.4.14", + "eslint": "^8.43.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react-hooks": "^4.6.0", + "husky": "^8.0.0", + "knip": "^4.3.1", + "postcss": "^8.4.23", + "prettier": "^2.8.8", + "tailwindcss": "^3.3.2", + "vite": "^5.0.0" + }, + "lint-staged": { + "**/*.{js,jsx}": [ + "npm run lint", + "prettier --write" + ] + } +} diff --git a/public/landing-bg.png b/public/landing-bg.png new file mode 100644 index 00000000..98726e45 Binary files /dev/null and b/public/landing-bg.png differ diff --git a/src/APP/components/Caroussel.jsx b/src/APP/components/Caroussel.jsx index fbac93c5..522b8074 100644 --- a/src/APP/components/Caroussel.jsx +++ b/src/APP/components/Caroussel.jsx @@ -1,34 +1,109 @@ +import { faBriefcase } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import PropTypes from "prop-types"; +import { useRef } from "react"; +import { LazyLoadImage } from "react-lazy-load-image-component"; +import { + arrowCircleLeft, + arrowCircleRight, + greyLinkedin, + greyTwitter, +} from "../../assets/images/icons"; + function Caroussel({ CarousselData }) { + const carouselRef = useRef(); + + const scroll = (scrollOffset) => { + carouselRef.current.scrollLeft += scrollOffset; + }; + return ( -
+
- {CarousselData.map(({ name, title, image }, index) => ( + {CarousselData.map(({ name, title, image, linkedin, twitter }) => (
- {name} -
-

{name}

-

{title}

+
+

{name}

+

+ + {title} +

+

+ Linkedin logo + + + {linkedin.username} + +

+ {twitter.username && ( +

+ Twitter logo + + {twitter.username} + +

+ )}
))}
+
+ + +
); } +Caroussel.propTypes = { + CarousselData: PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + image: PropTypes.string.isRequired, + }) + ).isRequired, +}; + export default Caroussel; diff --git a/src/APP/components/FAQ.jsx b/src/APP/components/FAQ.jsx index 846266b0..8e90bfff 100644 --- a/src/APP/components/FAQ.jsx +++ b/src/APP/components/FAQ.jsx @@ -1,56 +1,27 @@ // eslint-disable-next-line no-unused-vars - -import { useState } from "react"; +import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faChevronDown, - faChevronUp, - faArrowRight, -} from "@fortawesome/free-solid-svg-icons"; -import { Link } from "react-router-dom"; +import { useState } from "react"; -const FAQ = () => { - const [activeQuestion, setActiveQuestion] = useState(null); +import { questions } from "../pages/landingPage/data"; - const questions = [ - { - question: "Is SpaceYaTech free?", - answer: - "Yes, SpaceYaTech is totally free for anyone who wishes to learn technology and contribute to Open Source", - }, - { - question: "Does SpaceYaTech only mentor developers?", - answer: - "No, SpaceYaTech mentors anyone who is involved in modern technology. This includes developers, designers, product managers, and more. SpaceYaTech believes that everyone has the potential to learn and grow in the tech industry, and they are committed to providing mentorship to anyone who wants it.", - }, - { - question: "Does SpaceYaTech pay mentors?", - answer: - "No, SpaceYaTech does not pay mentors. However, mentors do receive a number of benefits.", - }, - { - question: "Can I collaborate with SpaceYaTech?", - answer: "Yes, you can collaborate with SpaceYaTech in a number of ways.", - }, - { - question: "Can I join the mentorship sessions at any time?", - answer: - "No, you cannot join the mentorship sessions at any time. SpaceYaTech's mentorship sessions are offered on a rolling basis, and there are limited spots available. To be considered for a mentorship session, you must submit an application and be selected by SpaceYaTech.", - }, - ]; +function FAQ() { + const [activeQuestion, setActiveQuestion] = useState(null); const toggleQuestion = (index) => { setActiveQuestion(activeQuestion === index ? null : index); }; return ( -
+
{questions.map((question, index) => (
-

+

))} - -
- - Learn More - - -
); -}; +} -// eslint-disable-next-line react-refresh/only-export-components export default FAQ; diff --git a/src/APP/components/Footer.jsx b/src/APP/components/Footer.jsx index 92e211b6..0e31e7e5 100644 --- a/src/APP/components/Footer.jsx +++ b/src/APP/components/Footer.jsx @@ -5,37 +5,59 @@ import { twitter, } from "../../assets/images/socials"; import logo from "../../assets/images/sytLogo.png"; +import { LazyLoadImage } from "react-lazy-load-image-component"; function Footer() { var now = new Date(); var year = now.getFullYear(); return (