-
-
Notifications
You must be signed in to change notification settings - Fork 29
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 #223 from open-sauced/feat/landing-for-students
feat: `/students` marketing page
- Loading branch information
Showing
11 changed files
with
578 additions
and
10 deletions.
There are no files selected for viewing
97 changes: 97 additions & 0 deletions
97
components/sections/home-page/features/StudentsFeatures.tsx
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,97 @@ | ||
| import { SanityStudentsPage } from "../../../../types/schema"; | ||
| import { Heading } from '../../../common/text' | ||
| import ContainerWithLine from '../../../common/ContainerWithLine' | ||
| import { motion } from 'framer-motion' | ||
| import { useInView } from 'react-intersection-observer' | ||
| import type { SanityImageAsset, SanityImageCrop, SanityImageHotspot, SanityReference } from "sanity-codegen"; | ||
|
|
||
| import EndingLine from "../../../common/EndingLine"; | ||
| import SectionWrapper from "../../../common/layout/SectionWrapper"; | ||
|
|
||
| type TeamsFeaturesProps = { | ||
| features: SanityStudentsPage['features']; | ||
| }; | ||
|
|
||
| export default function StudentsFeatures({ features } : TeamsFeaturesProps) { | ||
| return ( | ||
| <SectionWrapper pbs={0}> | ||
| { features!.map((feature) => <StudentFeature feature={feature!} />) } | ||
| <EndingLine /> | ||
| </SectionWrapper> | ||
| ); | ||
| } | ||
|
|
||
| function StudentFeature({ feature } : { feature : { | ||
| title?: string, | ||
| heading?: string, | ||
| description?: string, | ||
| image?: { | ||
| _type: 'image' | ||
| asset: SanityReference<SanityImageAsset> | ||
| crop?: SanityImageCrop | ||
| hotspot?: SanityImageHotspot | ||
| } | ||
| }}) { | ||
| const { title, heading, description, image } = feature!; | ||
| const [ refIcon, iconInView ] = useInView(); | ||
|
|
||
| // text animation | ||
| const initPosY = 5; | ||
| const posY = iconInView ? 0 : initPosY; | ||
|
|
||
| return ( | ||
| <ContainerWithLine> | ||
| <div className="pb-14 largeTablet:mb-32"> | ||
| <div className="flex gap-y-24 py-10 flex-col-reverse largeTablet:flex-col"> | ||
| <div ref={refIcon} className=" flex flex-col px-6 gap-y-12"> | ||
| <div className="relative max-w-[650px]"> | ||
| <motion.img | ||
| initial={{ opacity: 0, scale: 0.2 }} | ||
| animate={{ opacity: iconInView ? 1 : 0, scale: iconInView ? 1 : 0.5 }} | ||
| transition={{ duration: 0.5, delay: 0.1, ease: 'easeInOut' }} | ||
| className="absolute -left-[56px] largeTablet:-left-[77px] -top-[8px] largeTablet:-top-[4px]" | ||
| src={'/icons/find_icon.svg'} | ||
| alt="Find" | ||
| /> | ||
|
|
||
| <motion.div | ||
| initial={{ opacity: 0, y: initPosY, x: -10 }} | ||
| animate={{ opacity: iconInView ? 1 : 0, y: posY, x: iconInView ? 0 : -10 }} | ||
| transition={{ duration: 0.7, delay: 0.2, ease: 'easeInOut' }} | ||
| > | ||
| <div className="flex flex-col gap-4"> | ||
| <p className="w-fit text-base px-3 py-1 text-darkOrange border border-darkOrange rounded-full"> | ||
| {title} | ||
| </p> | ||
| <Heading component="h2" alignLarge="left"> | ||
| {heading} | ||
| </Heading> | ||
| </div> | ||
| </motion.div> | ||
| </div> | ||
|
|
||
| <div className=""> | ||
| <motion.div | ||
| initial={{ opacity: 0, y: initPosY, x: 10 }} | ||
| animate={{ opacity: iconInView ? 1 : 0, y: posY, x: iconInView ? 0 : 10 }} | ||
| transition={{ duration: 0.7, delay: 0.2, ease: 'easeInOut' }} | ||
| > | ||
| <p className="text-start font-light max-w-2xl text-lg text-neutral-300"> | ||
| {description} | ||
| </p> | ||
| </motion.div> | ||
| </div> | ||
|
|
||
| <motion.div | ||
| initial={{ opacity: 0, y: initPosY, x: 10 }} | ||
| animate={{ opacity: iconInView ? 1 : 0, y: posY, x: iconInView ? 0 : 10 }} | ||
| transition={{ duration: 0.7, delay: 0.2, ease: 'easeInOut' }} | ||
| > | ||
| <img src={image as unknown as string} /> | ||
| </motion.div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ContainerWithLine> | ||
| ); | ||
| } |
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
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,72 @@ | ||
| import React, { FC } from 'react' | ||
| import PageLayout from '../../components/common/layout/PageLayout' | ||
| import { getAllBlogs, getCommonData, getFeaturedBlogs, getStudentsPageData } from '../../lib/sanity' | ||
| import Background from '../../components/sections/about/Background' | ||
| import { SanityBlog, SanityFooter, SanityNavigation, SanitySeo, SanityStudentsPage, SanityUser } from '../../types/schema' | ||
| import Blogs from '../../components/sections/home-page/blogs/Blogs' | ||
| import Hero from '../../components/sections/home-page/Hero' | ||
| import Logos from '../../components/sections/home-page/Logos' | ||
| import CTA from '../../components/sections/teams/CTA' | ||
| import StudentsFeatures from "../../components/sections/home-page/features/StudentsFeatures"; | ||
|
|
||
| interface Props { | ||
| data: { | ||
| commonData: { | ||
| navigationLinks: SanityNavigation[] | ||
| seoData: SanitySeo | ||
| footer: SanityFooter[] | ||
| } | ||
| studentsPageData: SanityStudentsPage | ||
| blogs: SanityBlog[] | ||
| featuredBlogs: SanityBlog[] | ||
| } | ||
| } | ||
|
|
||
| export async function getStaticProps() { | ||
| const [commonData, studentsPageData, featuredBlogs, blogs] = await Promise.all([ | ||
| getCommonData(), | ||
| getStudentsPageData(), | ||
| getFeaturedBlogs(), | ||
| getAllBlogs(), | ||
| ]) | ||
|
|
||
| const data = { commonData, studentsPageData, featuredBlogs, blogs } | ||
|
|
||
| return { | ||
| props: { | ||
| data, | ||
| }, | ||
| revalidate: 30, | ||
| } | ||
| } | ||
|
|
||
| const Index: FC<Props> = ({ | ||
| data: { commonData, studentsPageData, blogs, featuredBlogs }, | ||
| }) => { | ||
| const displayBlogs = [...blogs, ...featuredBlogs].sort( | ||
| (a, b) => +new Date(b._createdAt) - +new Date(a._createdAt) | ||
| ) | ||
|
|
||
| return ( | ||
| <PageLayout | ||
| seoData={commonData.seoData} | ||
| navigationURLs={commonData.navigationLinks} | ||
| BackgroundWrapper={Background} | ||
| > | ||
| <Hero data={studentsPageData.hero as unknown as SanityStudentsPage['hero']} /> | ||
| <Logos data={studentsPageData.hero?.users as unknown as SanityUser[] || []} /> | ||
| <StudentsFeatures features={studentsPageData.features} /> | ||
| <CTA data={studentsPageData.ctaSection} /> | ||
| <Blogs | ||
| data={{ | ||
| _type: "blogSection", | ||
| title: "Our secret sauce", | ||
| heading: "$yellow-to-orange OpenSauced$yellow-to-orange Blog", | ||
| description: "Musings on the open-source community, engineering, and the future of talent acquisition." | ||
| }} | ||
| blogs={displayBlogs.slice(0, 4)} /> | ||
| </PageLayout> | ||
| ) | ||
| } | ||
|
|
||
| export default Index; |
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.