-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #84 from SpaceyaTech/new-products-page-build
New products page build
- Loading branch information
Showing
35 changed files
with
589 additions
and
9 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
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
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 |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React, { useEffect } from "react"; | ||
| import { HeroSection, ProductsSection, Teams, TechStack } from "./sections"; | ||
|
|
||
| const Products = () => { | ||
| useEffect(() => { | ||
| window.scrollTo(0, 0); | ||
| }, []); | ||
| return ( | ||
| <section className="md:px-10 xl:max-w-[1440px] mx-auto"> | ||
| <HeroSection /> | ||
| <ProductsSection /> | ||
| <TechStack /> | ||
| <Teams /> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Products; |
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 |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| import { | ||
| aaron, | ||
| emmy, | ||
| fred, | ||
| juma, | ||
| pamela, | ||
| } from "../../../assets/images/aboutPage"; | ||
| import { | ||
| angular, | ||
| django, | ||
| docker, | ||
| figma, | ||
| flutter, | ||
| git, | ||
| java, | ||
| jira, | ||
| js, | ||
| laravel, | ||
| mentorlst, | ||
| notion, | ||
| python, | ||
| react, | ||
| vue, | ||
| whimsical, | ||
| } from "../../../assets/images/products"; | ||
|
|
||
| export const products = [ | ||
| { | ||
| name: "Mentorlst Web and Mobile App", | ||
| desc: "A platform for mentors, coaches and consultants to meet with mentees, students and clients for 1:1 sessions, group sessions and community virtual events.", | ||
| img: mentorlst, | ||
| link: "/products", | ||
| }, | ||
| { | ||
| name: "Colabs", | ||
| desc: "A platform for mentors, coaches and consultants to meet with mentees, students and clients for 1:1 sessions, group sessions and community virtual events.", | ||
| img: mentorlst, | ||
| link: "/products", | ||
| }, | ||
| { | ||
| name: "Mastori", | ||
| desc: "A platform for mentors, coaches and consultants to meet with mentees, students and clients for 1:1 sessions, group sessions and community virtual events.", | ||
| img: mentorlst, | ||
| link: "/products", | ||
| }, | ||
| ]; | ||
|
|
||
| export const stackCollection = [ | ||
| { | ||
| id: 1, | ||
| category: "Design", | ||
| stack: [ | ||
| { url: figma, alt: "figma" }, | ||
| { url: notion, alt: "notion" }, | ||
| { url: whimsical, alt: "whimsical" }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 3, | ||
| category: "Backend", | ||
| stack: [ | ||
| { url: django, alt: "django" }, | ||
| { url: java, alt: "java" }, | ||
| { url: laravel, alt: "laravel" }, | ||
| { url: python, alt: "python" }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 2, | ||
| category: "Frontend", | ||
| stack: [ | ||
| { url: react, alt: "react" }, | ||
| { url: vue, alt: "vue" }, | ||
| { url: js, alt: "js" }, | ||
| { url: angular, alt: "angular" }, | ||
| { url: flutter, alt: "flutter" }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 4, | ||
| category: "DevOps", | ||
| stack: [ | ||
| { url: git, alt: "git" }, | ||
| { url: docker, alt: "docker" }, | ||
| { url: jira, alt: "jira" }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| export const teams = { | ||
| Design: [ | ||
| { | ||
| id: 1, | ||
| name: "Emmy Akinyi", | ||
| title: "UX Team Lead", | ||
| headshot: emmy, | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: "Pamela Owino", | ||
| title: "Lead Product Designer", | ||
| headshot: pamela, | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: "Aoron Abubakar", | ||
| title: "Product Designer", | ||
| headshot: aaron, | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: "Robert Okusi", | ||
| title: "Product Designer", | ||
| headshot: fred, | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: "Temitayo Adeleye", | ||
| title: "Product Designer", | ||
| headshot: juma, | ||
| }, | ||
| { | ||
| id: 6, | ||
| name: "Olaniran Rasheed", | ||
| title: "Product Designer", | ||
| headshot: fred, | ||
| }, | ||
| ], | ||
| "Front-End Dev": [ | ||
| { | ||
| id: 1, | ||
| name: "Emmy Akinyi", | ||
| title: "UX Team Lead", | ||
| headshot: emmy, | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: "Aoron Abubakar", | ||
| title: "Product Designer", | ||
| headshot: aaron, | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: "Robert Okusi", | ||
| title: "Product Designer", | ||
| headshot: fred, | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: "Temitayo Adeleye", | ||
| title: "Product Designer", | ||
| headshot: juma, | ||
| }, | ||
| { | ||
| id: 6, | ||
| name: "Olaniran Rasheed", | ||
| title: "Product Designer", | ||
| headshot: fred, | ||
| }, | ||
| ], | ||
| "Back-End Dev": [ | ||
| { | ||
| id: 4, | ||
| name: "Robert Okusi", | ||
| title: "Product Designer", | ||
| headshot: fred, | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: "Temitayo Adeleye", | ||
| title: "Product Designer", | ||
| headshot: juma, | ||
| }, | ||
| { | ||
| id: 6, | ||
| name: "Olaniran Rasheed", | ||
| title: "Product Designer", | ||
| headshot: fred, | ||
| }, | ||
| ], | ||
| DevOps: [ | ||
| { | ||
| id: 1, | ||
| name: "Emmy Akinyi", | ||
| title: "UX Team Lead", | ||
| headshot: emmy, | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: "Pamela Owino", | ||
| title: "Lead Product Designer", | ||
| headshot: pamela, | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: "Aoron Abubakar", | ||
| title: "Product Designer", | ||
| headshot: aaron, | ||
| }, | ||
| ], | ||
| }; |
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 |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from "react"; | ||
|
|
||
| const DeveloperCard = ({ name, title, headshot }) => { | ||
| return ( | ||
| <div className="relative h-[216px]"> | ||
| {/* headshot */} | ||
| <img | ||
| src={headshot} | ||
| alt={name} | ||
| className="h-[120px] w-[120px] rounded-xl object-cover z-10 absolute top-0 left-1/2 transform -translate-x-1/2 shadow-md md:shadow-transparent" | ||
| /> | ||
|
|
||
| {/* Details */} | ||
| <div className="bg-[#EDFCF3] absolute bottom-0 left-0 w-full h-3/5 flex flex-col items-center justify-end text-center gap-1 pb-5 md:pb-4 rounded-md md:rounded-lg shadow-md md:shadow-transparent"> | ||
| <h3 className="text-[15px] leading-5 font-medium md:text-xl md:leading-6 capitalize"> | ||
| {name} | ||
| </h3> | ||
| <span className="text-xs font-normal md:text-sm capitalize"> | ||
| {title} | ||
| </span> | ||
| <a | ||
| href="/products" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="text-[#009975] text-[11px] font-normal underline mt-1/2 md:text-sm" | ||
| > | ||
| View portfolio | ||
| </a> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DeveloperCard; |
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 |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from "react"; | ||
|
|
||
| const HeroSection = () => { | ||
| return ( | ||
| <section className="py-4 md:py-8 flex flex-col gap-6 md:gap-8 items-center justify-center md:max-w-4xl mx-auto"> | ||
| {/* text section */} | ||
| <div className="flex flex-col justify-center items-center"> | ||
| <h3 className="text-[#009975] text-base md:text-2xl font-normal text-center capitalize"> | ||
| Our products | ||
| </h3> | ||
| <p className="text-center text-[25px] leading-9 md:text-[33px] font-medium md:font-semibold md:leading-normal px-4"> | ||
| We don’t just talk about code. We build products that work and look | ||
| good. | ||
| </p> | ||
| </div> | ||
|
|
||
| {/* video section */} | ||
| <div className="w-full"> | ||
| <video | ||
| src="https://fiverr-res.cloudinary.com/video/upload/t_fiverr_hd/vmvv3czyk2ifedefkau7" | ||
| controls | ||
| className="h-full w-fit aspect-video" | ||
| autoPlay={false} | ||
| controlsList="nodownload" | ||
| muted | ||
| /> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default HeroSection; |
Oops, something went wrong.
e0bfecdThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
syt-web-redesign – ./
syt-web-redesign-sytweb.vercel.app
syt-web-redesign-git-main-sytweb.vercel.app
syt-web-redesign.vercel.app