-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* new blog page init * add header and body * mobile responsive * add padding * refactor frontend code * filter empty stack * fetch data from api * delete static data * remove comments * onMouseEnter * reinit resource page * map data * add all tab * fix the img src * delete unused resources page * add skeleton component * remove carousel * initialize carousel * create blogcard * add btn functionality * fetch blog data * init share btns * add shareable links * add line-clamp on blogCard title * resize blog cover img * build: bumped up react query * fix: use ref for blog body * build: react lazy load package install * featured blogcard build * scroll effect on featured section * add opacity to featuredCard * bug-fix: hover-effect on ResourceCard component * add spinner loader issue #140 * remove console.logs * fix: use ref for blog body * fix: use ref for blog body 2 * Lazy Load all images on the website * restyle blog title on featured cards * delete old blog route * initial hero-section build * Partners section * Partners section * Add more partners * create wrapper component * features section * what we do section * upcoming events section * what we do section * minor change in WhatWeDoCard * removed the blur-effect * testimonial section * FAQ section build * cta section * add padding-b to CTA section * add padding-b to CTA section * change navbar color * add bold on navlink focus * Add bg-color to mobile nav * Add bg-color to mobile nav * resolve conflicts * Add upcoming events to the OurEvents section * Imported ellipse styles * Added hero section images * Adjust ellipse colors * Adjust margins and border * add hidden display on small screen * delete HeroSection3 component * style: caroussel * style: responsive on mobile * Remove blur effect on all LazyLoadImage * merge conflicts * remove double imports * - * remove duplicate --------- Co-authored-by: felixNyalenda <[email protected]> Co-authored-by: sonylomo <[email protected]> Co-authored-by: bkm-code <[email protected]> Co-authored-by: Sonia Lomo <[email protected]>
- Loading branch information
5 people
authored
Apr 11, 2024
1 parent
4f7990d
commit 299c7b7
Showing
175 changed files
with
5,647 additions
and
2,965 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| ] | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <section className="pt-4 sm:pt-16 pb-10 mx-auto w-full max-w-screen-2xl pl-4 lg:pl-14 xl:pl-28"> | ||
| <section className="pt-4 sm:pt-16 pb-10 mx-auto w-full max-w-screen-2xl"> | ||
| <div | ||
| ref={carouselRef} | ||
| className="py-6 grid grid-cols-1 md:grid-cols-2 gap-8 overflow-x-auto scrollbar-hide" | ||
| style={{ | ||
| gridTemplateColumns: "max-content", | ||
| gridTemplateRows: "minmax(250px, 300px)", | ||
| gridTemplateRows: "minmax(588px, 400px)", | ||
| gridAutoFlow: "column", | ||
| gridAutoColumns: "max-content", | ||
| }} | ||
| > | ||
| {CarousselData.map(({ name, title, image }, index) => ( | ||
| {CarousselData.map(({ name, title, image, linkedin, twitter }) => ( | ||
| <div | ||
| key={index} | ||
| className="relative after:block after:relative after:-mt-36 after:h-36 after:w-full after:content-[''] after:z-0 after:rounded-b-2xl after:bg-[linear-gradient(180deg,_rgba(0,0,0,0)_0%,_rgba(0,0,0,0.5)_29.17%,_rgba(0,0,0,0.94)_97.92%)]" | ||
| key={crypto.randomUUID()} | ||
| className="border bg-white p-2 max-w-[400px] rounded-2xl md:rounded-[20px]" | ||
| > | ||
| <img | ||
| className="rounded-2xl w-[300px] h-[300px] object-cover items-center" | ||
| <LazyLoadImage | ||
| className="rounded-t-2xl h-4/6 w-[400px] object-cover" | ||
| src={image} | ||
| alt={name} | ||
| /> | ||
| <div className="absolute -translate-x-2/4 -translate-y-1/4 left-2/4 top-3/4 text-white text-center z-10 font-medium w-4/5"> | ||
| <p className="pb-2 text-xl">{name}</p> | ||
| <p className="text-base">{title}</p> | ||
| <div className="bg-green-light flex flex-col gap-2 w-full h-2/6 p-3 rounded-b-2xl"> | ||
| <p className=" text-2xl font-medium">{name}</p> | ||
| <p className="flex gap-4 items-center text-base font-light text-grey-neutral space-x-4"> | ||
| <FontAwesomeIcon icon={faBriefcase} /> | ||
| {title} | ||
| </p> | ||
| <p className="flex items-center text-base font-light text-grey-neutral space-x-4"> | ||
| <img | ||
| src={greyLinkedin} | ||
| alt="Linkedin logo" | ||
| width="16" | ||
| height="16" | ||
| /> | ||
|
|
||
| <a | ||
| href={linkedin.href} | ||
| target="_blank" | ||
| rel="noreferrer noopener" | ||
| className="" | ||
| > | ||
| {linkedin.username} | ||
| </a> | ||
| </p> | ||
| {twitter.username && ( | ||
| <p className="flex items-center text-base font-light text-grey-neutral space-x-4"> | ||
| <img | ||
| src={greyTwitter} | ||
| alt="Twitter logo" | ||
| width="16" | ||
| height="16" | ||
| /> | ||
| <a | ||
| href={twitter.href} | ||
| target="_blank" | ||
| rel="noreferrer noopener" | ||
| className="" | ||
| > | ||
| {twitter.username} | ||
| </a> | ||
| </p> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div className="flex justify-center gap-4"> | ||
| <button type="button" onClick={() => scroll(-400)}> | ||
| <img src={arrowCircleLeft} alt="left" /> | ||
| </button> | ||
| <button type="button" onClick={() => scroll(400)}> | ||
| <img src={arrowCircleRight} alt="right" /> | ||
| </button> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| Caroussel.propTypes = { | ||
| CarousselData: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| name: PropTypes.string.isRequired, | ||
| title: PropTypes.string.isRequired, | ||
| image: PropTypes.string.isRequired, | ||
| }) | ||
| ).isRequired, | ||
| }; | ||
|
|
||
| export default Caroussel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.