Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat new resources page build #256

Merged
merged 11 commits into from
Dec 3, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
hero section build
  • Loading branch information
Ase020 committed Nov 13, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit f885cf209fd13fea9ee7ffe92486c984d4ef1d89
Binary file added src/assets/images/resources-page/hero.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/images/resources-page/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export { default as backend } from "./backend.png";
export { default as dataScience } from "./data-science.png";
export { default as frontend } from "./frontend.png";
export { default as hero } from "./hero.png";
export { default as productDesign } from "./product-design.png";
8 changes: 6 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -42,9 +42,12 @@ const GalleryPage = lazy(() => import("./pages/gallery/GalleryPage"));
const LandingPage = lazy(() => import("./pages/landingPage/LandingPage"));
const Layout = lazy(() => import("./pages/Layout"));
const Products = lazy(() => import("./pages/products/Products"));
const Resources = lazy(
const MastercraftHome = lazy(
() => import("./pages/mastercraft-home/MastercraftHome")
);
const ResourcesHome = lazy(
() => import("./pages/resources-home/ResourcesHome")
);
const MastercraftLayout = lazy(() => import("./pages/MastercraftLayout"));
const Homepage = lazy(() => import("./pages/shop/Homepage"));
const Checkout = lazy(() => import("./pages/shop/OrderSummaryPage"));
@@ -100,7 +103,8 @@ export {
ProductDisplay,
Products,
ResetPassword,
Resources,
ResourcesHome,
MastercraftHome,
MastercraftLayout,
ShopDashboard,
ShopSales,
4 changes: 2 additions & 2 deletions src/pages/mastercraft-home/MastercraftHome.jsx
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ const components = [
},
];

function Resources() {
function MastercraftHome() {
return (
<>
<SeoMetadata
@@ -54,4 +54,4 @@ function Resources() {
);
}

export default Resources;
export default MastercraftHome;
57 changes: 57 additions & 0 deletions src/pages/resources-home/ResourcesHome.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { LandingWrapper } from "../../components";
import SeoMetadata from "../../components/SeoMetadata";
import { TestimonialSection } from "../landingPage/sections";
import {
FAQSection,
Features,
HeroSection,
Stats,
StudentShowcase,
WhatWeOffer,
} from "./sections";

const components = [
{
title: "our impact",
component: <Stats />,
},
{
title: "student showcase",
component: <StudentShowcase />,
},
{
title: "faq",
component: <FAQSection />,
},
{
title: "testimonials",
component: <TestimonialSection />,
},
];

function Resources() {
return (
<>
<SeoMetadata
title="Resources"
description="Discover tech tools and resources to boost your productivity."
type="article"
url="https://www.spaceyatech.com/resources"
ogImage="https://apis.spaceyatech.com/media/blog-images/syt.png"
ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background."
/>
<main className="bg-[#F5F5F5]">
<HeroSection />
<Features />
<WhatWeOffer />
{components.map(({ component, title }) => (
<LandingWrapper key={title} title={title}>
{component}
</LandingWrapper>
))}
</main>
</>
);
}

export default Resources;
89 changes: 89 additions & 0 deletions src/pages/resources-home/sections/CategoryCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import PropTypes from "prop-types";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { Link } from "react-router-dom";

function CategoryCard({ categoryData }) {
const { slug, cover, tags, title, period, courseType, hosts } = categoryData;
return (
<div className="size-full bg-green-light border-4 border-white rounded-lg p-4 flex flex-col gap-4">
<LazyLoadImage
src={cover}
effect="blur"
alt={title}
className="w-full h-2/5 rounded-md object-cover"
/>
<div className="h-3/5 spay-2.5">
<div className="flex items-center flex-wrap gap-2">
{tags.map((tag) => (
<p
key={tag}
className="capitalize bg-white py-1 px-3 border rounded-full text-green-header text-sm font-semibold"
>
{tag}
</p>
))}
</div>

<div className="my-3 space-y-2 w-full">
<h4 className="text-grey-dark font-semibold text-xl">{title}</h4>

<p className="text-base text-gray-500">
{period} ● {courseType}
</p>
</div>

<div className="flex flex-col gap-2">
<h6 className="text-xs text-gray-500">Hosted by</h6>

<ul className="list-none flex flex-col gap-2">
{hosts.map(({ id, headshot, name, role }) => (
<li key={id} className="flex items-center gap-1.5">
<LazyLoadImage
src={headshot}
alt={name}
className="size-11 rounded-full border-2 border-white"
effect="blur"
/>

<div className="flex flex-col justify-between gap-1.5">
<h4 className="font-semibold text-sm">{name}</h4>
<p className="text-sm text-gray-500">{role}</p>
</div>
</li>
))}
</ul>
</div>
</div>

<Link
to={`/mastercraft/${slug}`}
className="border border-green-header px-3 py-2 rounded-lg mt-10 flex-center transition-colors ease-in duration-500 text-primary text-base font-semibold hover:text-white hover:bg-green-header"
>
Learn More
</Link>
</div>
);
}

CategoryCard.propTypes = {
categoryData: PropTypes.shape({
id: PropTypes.number.isRequired,
slug: PropTypes.string.isRequired,
category: PropTypes.string.isRequired,
cover: PropTypes.string.isRequired, // Assuming these image paths are strings
tags: PropTypes.arrayOf(PropTypes.string).isRequired,
title: PropTypes.string.isRequired,
period: PropTypes.string.isRequired,
courseType: PropTypes.string.isRequired,
hosts: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
headshot: PropTypes.string.isRequired, // Assuming the images are strings (paths)
name: PropTypes.string.isRequired,
role: PropTypes.string.isRequired,
})
).isRequired,
}).isRequired,
};

export default CategoryCard;
18 changes: 18 additions & 0 deletions src/pages/resources-home/sections/FAQSection.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { FAQ } from "../../../components";
import { questions } from "./data";

function FAQSection() {
return (
<section className="w-full max-w-1440 mx-auto flex-center flex-col gap-8 px-3 pt-2">
<div className="flex-center gap-4 flex-col w-full max-w-2xl text-center">
<h3 className="max-w-lg text-green-header text-center font-semibold text-xl md:text-3xl">
Frequently Asked Questions
</h3>
</div>

<FAQ questions={questions} />
</section>
);
}

export default FAQSection;
Loading