Skip to content
This repository was archived by the owner on Oct 22, 2025. It is now read-only.

Commit 317c896

Browse files
shamimbinnurbdougie
shamimbinnur
and
bdougie
authored
feat: Landing page update (Revised version) (#120)
* Reset Hero section * Removed github mock image * Removed first CTA section * Removed second CTA * Reset Features.tsx * Reset Feature.tsx * Reset Feature.tsx * Corrected spelling of BackgroundWrapper * Added px as an optional parameter to the SectionWrapper * Created ContainerWithLine.tsx * Implemented hero section * Implemented logo section * Partially feature implemented * More work on feature section * Fixed padding * Added endling line * spelling correction * Added newsletter section * Removed previous subscription section from homepage * Added hot repo image for mobile view * Added some background stroke * Adjusted padding * Changed URL on the hero * Update components/sections/home-page/Hero.tsx * Update components/sections/home-page/Hero.tsx * Update components/sections/home-page/Hero.tsx --------- Co-authored-by: Brian Douglas <[email protected]>
1 parent 9b1ca73 commit 317c896

32 files changed

+1893
-361
lines changed

‎components/common/ContainerWithLine.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
3+
const ContainerWithLine: React.FC = ({ children }) => {
4+
return (
5+
<div className="flex w-full">
6+
<div className="relative w-[1.5px] mx-1 largeTablet:mx-6">
7+
<div className="absolute inset-0 bg-[#F87216] blur-sm "></div>
8+
<div className="bg-[#F87216] h-full relative"></div>
9+
</div>
10+
11+
<div className="w-full">
12+
{children}
13+
</div>
14+
</div>
15+
)
16+
}
17+
18+
export default ContainerWithLine

‎components/common/EndingLine.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
3+
const EndingLine = () => {
4+
return (
5+
<div className="w-full flex px-1 largeTablet:px-6 mb-10">
6+
<div className="relative flex-1 bg-gradient-to-b border-b-0 border-l-0 border-r-[#F87216] border-t-[#F87216] border h-[200px] w-full to-gray-800">
7+
<img className="absolute -right-[28px] -top-[28px]" src="/icons/quote.svg" alt="Endling line" />
8+
</div>
9+
<div className="flex-1"></div>
10+
</div>
11+
)
12+
}
13+
14+
export default EndingLine

‎components/common/layout/PageLayout.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,20 @@ import OgData from '../OgData'
99
interface PageLayoutProps {
1010
seoData: SanitySeo
1111
navigationURLs: SanityNavigation[]
12-
BackgorundWrapper: React.FC
12+
BackgroundWrapper: React.FC
1313
pressPage?: boolean
1414
blogPage?: boolean
15+
homePage?: boolean
1516
}
1617

1718
const PageLayout: FC<PageLayoutProps> = ({
1819
children,
1920
seoData,
2021
navigationURLs,
21-
BackgorundWrapper,
22+
BackgroundWrapper,
2223
pressPage,
23-
blogPage = false
24+
blogPage = false,
25+
homePage = false,
2426
}): ReactElement => {
2527
return (
2628
<div>
@@ -32,12 +34,12 @@ const PageLayout: FC<PageLayoutProps> = ({
3234
ogUrl={seoData.url || 'https://opensauced.pizza'}
3335
/>
3436
}
35-
<BackgorundWrapper>
37+
<BackgroundWrapper>
3638
{!pressPage && <Header navigationItems={navigationURLs} />}
3739
<div>{children}</div>
38-
{!pressPage && <Subscribe />}
40+
{!pressPage && !homePage && <Subscribe />}
3941
<Footer pressPage={pressPage} />
40-
</BackgorundWrapper>
42+
</BackgroundWrapper>
4143
</div>
4244
)
4345
}

‎components/common/layout/SectionWrapper.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ interface SectionWrapperProps {
88
pb?: number
99
pts?: number
1010
pbs?: number
11+
px?: number
1112
}
1213

1314
const SectionWrapper: FC<SectionWrapperProps> = ({
@@ -17,6 +18,7 @@ const SectionWrapper: FC<SectionWrapperProps> = ({
1718
pb = 0,
1819
pts = 0,
1920
pbs = 120,
21+
px = 6,
2022
children,
2123
}): ReactElement => {
2224
const isLargeTablet = useMediaQuery()
@@ -26,7 +28,7 @@ const SectionWrapper: FC<SectionWrapperProps> = ({
2628
paddingBottom: isLargeTablet ? `${pb}px` : `${pbs}px`,
2729
paddingTop: isLargeTablet ? `${pt}px` : `${pts}px`,
2830
}}
29-
className={`w-full max-w-[1256px] mx-auto px-6 flex justify-${justify} flex-${direction} items-center`}
31+
className={`w-full max-w-[1256px] mx-auto px-${px} flex justify-${justify} flex-${direction} items-center`}
3032
>
3133
{children}
3234
</div>

‎components/sections/home-page/Background.tsx‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import Image from 'next/image'
22
import React, { FC } from 'react'
33
import upperStroke from '../../../public/upperStroke.svg'
4-
import leftSidePizzaStroke from '../../../public/leftSidePizzaStroke.svg'
5-
import rightSidePizzaStroke from '../../../public/rightSidePizzaStroke.svg'
6-
import _5_leftStroke from '../../../public/_5_leftStroke.svg'
7-
import _5_rightStroke from '../../../public/_5_rightStroke.svg'
4+
import left_2_stroke from '../../../public/background-strokes/left_2_stroke.svg'
5+
import right_2_stroke from '../../../public/background-strokes/right_2_stroke.svg'
6+
import right_3_stroke from '../../../public/background-strokes/right_3_stroke.svg'
7+
import StrokeMobile2 from '../../../public/background-strokes/stroke_mobile_2.svg'
8+
import StrokeMobile3 from '../../../public/background-strokes/stroke_mobile_3.svg'
89

910
const Background: FC = ({ children }) => {
1011
return (
@@ -16,29 +17,17 @@ const Background: FC = ({ children }) => {
1617
<div className="absolute top-[30rem] right-[-15rem] tablet:-right-[8rem] largeTablet:top-[6rem] largeTablet:laptop:-right-[6rem] laptop:-right-[4rem] desktop:-right-[3rem]">
1718
<Image alt="Doodles" src={upperStroke} />
1819
</div>
19-
20-
<div className="absolute hidden largeTablet:block largeTablet:top-[56rem] largeTablet:-left-[18rem] laptop:-left-[15rem] desktop:-left-[11rem]">
21-
<Image alt="Doodles" src={leftSidePizzaStroke} />
22-
</div>
23-
24-
<div className="absolute hidden largeTablet:block largeTablet:top-[65rem] largeTablet:-right-[22rem] laptop:-right-[19rem] desktop:-right-[16rem]">
25-
<Image alt="Doodles" src={rightSidePizzaStroke} />
26-
</div>
27-
28-
<div className="absolute top-[107rem] -left-[25rem] largeTablet:top-[192rem] largeTablet:-left-[18rem] laptop:-left-[15rem] desktop:-left-[13rem]">
29-
<Image alt="Doodles" src={_5_leftStroke} />
30-
</div>
31-
32-
<div className="absolute hidden largeTablet:block largeTablet:top-[192rem] largeTablet:-right-[29rem] ">
33-
<Image alt="Doodles" src={_5_rightStroke} />
20+
21+
<div className="absolute hidden largeTablet:block top-[95rem] -left-[5rem]">
22+
<Image alt="Doodles" src={left_2_stroke} />
3423
</div>
3524

36-
<div className="absolute hidden largeTablet:block largeTablet:top-[402rem] largeTablet:-left-[18rem] laptop:-left-[15rem] desktop:-left-[13rem]">
37-
<Image alt="Doodles" src={_5_leftStroke} />
25+
<div className="absolute hidden largeTablet:block top-[125rem] right-[4rem]">
26+
<Image alt="Doodles" src={right_2_stroke} />
3827
</div>
3928

40-
<div className="absolute hidden largeTablet:block largeTablet:top-[402rem] largeTablet:-right-[29rem] ">
41-
<Image alt="Doodles" src={_5_rightStroke} />
29+
<div className="absolute top-[190rem] -right-[35rem] largeTablet:-right-[4rem]">
30+
<Image alt="Doodles" src={right_3_stroke} />
4231
</div>
4332

4433
<div className="relative">{children}</div>

‎components/sections/home-page/Hero.tsx‎

Lines changed: 60 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,76 @@
11
import React from 'react'
22
import { SanityHomePage } from '../../../types/schema'
3-
import Image from 'next/image'
43
import SectionWrapper from '../../common/layout/SectionWrapper'
5-
import { Button } from '../../common'
4+
import ContainerWithLine from '../../common/ContainerWithLine'
65
import { Heading, Typography } from '../../common/text'
6+
import { Button } from '../../common'
7+
import DecoratedText from '../../common/text/utils/DecoratedText'
8+
import Link from 'next/link'
79

810
interface HeroProps {
911
data: SanityHomePage['hero']
1012
}
1113

1214
const Hero = ({ data }: HeroProps) => {
1315
return (
14-
<SectionWrapper direction="row" pt={115} pts={60} pb={120} pbs={0}>
15-
<main className="flex flex-col largeTablet:flex-row ">
16-
<div className="flex flex-col items-start flex-1">
17-
<Typography variant="preHeading" alignLarge="left">
18-
{data?.title}
19-
</Typography>
20-
21-
<div className="largeTablet:max-w-lg">
22-
<Heading alignLarge="left">{data?.heading}</Heading>
23-
</div>
16+
<SectionWrapper pt={115} pts={60} pbs={0}>
17+
<ContainerWithLine>
18+
<main>
19+
<div className="flex largeTablet:items-center h-full flex-col gap-x-6 gap-y-10 largeTablet:flex-row mx-6">
20+
<div className="flex-1 ">
21+
<Typography alignSmall="left" alignLarge="left" variant="preHeading">
22+
YOU GOT THIS
23+
</Typography>
2424

25-
<div className="mt-8 mb-10 tablet:mt-4 ">
26-
<p className="text-xl text-textPrimary opacity-70 largeTablet:leading-8">
27-
{data?.description}
28-
</p>
29-
</div>
30-
<div className="flex gap-4 items-center flex-col largeTablet:flex-row">
31-
{data?.cta?.map((item, i) => (
32-
<Button key={i} href={item.ctaLink} borderVariant={ i !== 0 ? "gray" : "neon" }>
33-
{item.ctaLabel}
34-
</Button>
35-
))}
36-
</div>
37-
</div>
38-
<div className="flex mt-16 justify-center items-center flex-1 largeTablet:justify-end largeTablet:mt-0">
39-
<div className="w-full h-full relative pointer-events-none max-w-[463px] largeTablet:max-h-[299px]">
40-
<img alt="OpenSauced hero image" src={data?.image as unknown as string} />
25+
<div className="relative">
26+
<img className="absolute -left-[49px] largeTablet:-left-[68px] -top-[50px]" src="/icons/journey_ball.svg" alt="Starting point"/>
27+
28+
<Heading component="h1" alignSmall="left" alignLarge="left">
29+
Your next open source journey $orange-to-yellowstarts here$orange-to-yellow
30+
</Heading>
31+
</div>
32+
33+
<div className="py-10">
34+
<Typography alignLarge="left" alignSmall="left" variant="body3">
35+
Start the path to your next contribution and join the global community of open source developers making an impact around the world.
36+
</Typography>
37+
</div>
38+
39+
<div className="flex gap-4 flex-col largeTablet:flex-row">
40+
{data?.cta?.map((item, i) => (
41+
<Button key={i} href={item.ctaLink} borderVariant={ i !== 0 ? "gray" : "neon" }>
42+
{item.ctaLabel}
43+
</Button>
44+
))}
45+
</div>
46+
47+
{/* needs to be implemented
48+
49+
<div className="pt-6 pb-10">
50+
<Typography alignLarge="left" alignSmall="left" variant="body3">
51+
Working with team?
52+
<span>
53+
<Link href="/teams">
54+
<a>
55+
<DecoratedText content="$orange-to-yellow Click here$orange-to-yellow"/>
56+
</a>
57+
</Link>
58+
</span>
59+
</Typography>
60+
</div>
61+
*/}
62+
63+
</div>
64+
65+
66+
<div className="flex-1 ">
67+
<div className="">
68+
<img loading="eager" className="relative scale-105 largeTablet:scale-110 -right-4" src="/hero.svg" alt="" />
69+
</div>
70+
</div>
4171
</div>
42-
</div>
43-
</main>
44-
{/* largeTablet:left-16 largeTablet:bottom-4 */}
72+
</main>
73+
</ContainerWithLine>
4574
</SectionWrapper>
4675
)
4776
}

‎components/sections/home-page/Logos.tsx‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,45 @@
11
import React from 'react'
22
import SectionWrapper from '../../common/layout/SectionWrapper'
33
import { SanityUser } from '../../../types/schema'
4+
import ContainerWithLine from '../../common/ContainerWithLine'
5+
import { Typography } from '../../common/text'
46

57
interface LogosProps {
68
data: SanityUser[]
79
}
810

911
const Logos = ({ data }: LogosProps) => {
1012
return (
11-
<SectionWrapper direction="row" pb={150} pbs={150}>
12-
<div className="w-full max-w-[900px] grid grid-cols-3 gap-x-10 gap-y-8 justify-center items-center content-center largeTablet:mt-0 largeTablet:grid-cols-6">
13-
{data?.map((item) => {
14-
const href = item.website || ''
15-
const src = item.logo || ''
16-
return (
17-
<a
18-
key={item.name}
19-
href={href}
20-
target="_blank"
21-
rel="noreferrer"
22-
className="relative h-[18px] largeTablet:h-6 mx-auto"
23-
>
24-
<img
25-
className="h-full"
26-
src={src as string}
27-
alt={item.name}
28-
loading="lazy"
29-
/>
30-
</a>
31-
)
32-
})}
33-
</div>
13+
<SectionWrapper pbs={0}>
14+
<ContainerWithLine>
15+
<div className="px-6 pt-32 pb-4 largeTablet:pt-10 ">
16+
<Typography alignLarge="left" alignSmall="center" variant="preHeading">
17+
TRUSTED BT
18+
</Typography>
19+
</div>
20+
<div className="w-full px-6 pb-40 grid grid-cols-3 gap-x-10 gap-y-8 justify-center items-center content-center largeTablet:mt-0 largeTablet:grid-cols-6">
21+
{data?.map((item) => {
22+
const href = item.website || ''
23+
const src = item.logo || ''
24+
return (
25+
<a
26+
key={item.name}
27+
href={href}
28+
target="_blank"
29+
rel="noreferrer"
30+
className="relative h-[18px] largeTablet:h-6 mx-auto"
31+
>
32+
<img
33+
className="h-full"
34+
src={src as string}
35+
alt={item.name}
36+
loading="lazy"
37+
/>
38+
</a>
39+
)
40+
})}
41+
</div>
42+
</ContainerWithLine>
3443
</SectionWrapper>
3544
)
3645
}

‎components/sections/home-page/Newsletter.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react'
2+
import SectionWrapper from '../../common/layout/SectionWrapper'
3+
import { Heading, Typography } from '../../common/text'
4+
import GradientBorderWrapper from '../../common/GradientBorderWrapper'
5+
import Image from 'next/image'
6+
7+
import StrokeR3 from '../../../public/_3_rightStroke.svg'
8+
import StrokeL3 from '../../../public/_3_leftStroke.svg'
9+
10+
const Newsletter = () => {
11+
return (
12+
<SectionWrapper pt={100} pb={250}>
13+
<div className="relative w-screen">
14+
<div className="absolute largeTablet:block top-[-14rem] largeTablet:-top-[10rem] left-[-30rem] largeTablet:left-[-15rem]">
15+
<Image alt="Doodles" src={StrokeL3} />
16+
</div>
17+
<div className="absolute largeTablet:block top-[-14rem] largeTablet:-top-[22rem] right-[-34rem] largeTablet:-right-[32rem]">
18+
<Image alt="Doodles" src={StrokeR3} />
19+
</div>
20+
</div>
21+
22+
<div className="flex flex-col items-center gap-y-8">
23+
<Heading alignSmall="center">
24+
$orange-to-yellowThe fast track$orange-to-yellow to open source
25+
</Heading>
26+
27+
<Typography alignSmall="center" variant="body1" >
28+
Stay up to date with the latest OpenSauced news and trends.
29+
</Typography>
30+
31+
<GradientBorderWrapper>
32+
<form
33+
className="relative box-border px-4 flex items-center w-[280px] h-[38px] text-[#FEEADD] pr-4 py-3 text-sm font-medium bg-[#211E1C] rounded-md largeTablet:w-[394px]"
34+
name="newsletter"
35+
action="?success=true"
36+
data-netlify="true"
37+
data-netlify-honeypot="bot-field"
38+
autoComplete="off"
39+
>
40+
<div hidden aria-hidden="true">
41+
<label>
42+
Try your luck
43+
<input type="hidden" value="bot-field" name="newsletter" />
44+
</label>
45+
</div>
46+
<input
47+
placeholder="Email"
48+
name="Your email"
49+
type="email"
50+
className="pr-4 outline-none focus:outline-none bg-[#211E1C] w-[180px] largeTablet:w-[290px]"
51+
></input>
52+
<button
53+
className=" text-brandOrange text-sm cursor-pointer"
54+
type="submit"
55+
>
56+
Subscribe
57+
</button>
58+
</form>
59+
</GradientBorderWrapper>
60+
</div>
61+
</SectionWrapper>
62+
)
63+
}
64+
65+
export default Newsletter

0 commit comments

Comments
 (0)