feat: Landing page update (Revised version)

components/common/ContainerWithLine.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const ContainerWithLine: React.FC = ({ children }) => {
+ return (
+ <div className="flex w-full">
+ <div className="relative w-[1.5px] mx-1 largeTablet:mx-6">
+ <div className="absolute inset-0 bg-[#F87216] blur-sm "></div>
+ <div className="bg-[#F87216] h-full relative"></div>
+ </div>
+
+ <div className="w-full">
+ {children}
+ </div>
+ </div>
+ )
+}
+
+export default ContainerWithLine

components/common/EndingLine.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const EndingLine = () => {
+ return (
+ <div className="w-full flex px-1 largeTablet:px-6 mb-10">
+ <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">
+ <img className="absolute -right-[28px] -top-[28px]" src="/icons/quote.svg" alt="Endling line" />
+ </div>
+ <div className="flex-1"></div>
+ </div>
+ )
+}
+
+export default EndingLine

components/common/layout/PageLayout.tsx

@@ -9,18 +9,20 @@ import OgData from '../OgData'
 interface PageLayoutProps {
  seoData: SanitySeo
  navigationURLs: SanityNavigation[]
- BackgorundWrapper: React.FC
+ BackgroundWrapper: React.FC
  pressPage?: boolean
  blogPage?: boolean
+ homePage?: boolean
 }
 
 const PageLayout: FC<PageLayoutProps> = ({
  children,
  seoData,
  navigationURLs,
- BackgorundWrapper,
+ BackgroundWrapper,
  pressPage,
- blogPage = false
+ blogPage = false,
+ homePage = false,
 }): ReactElement => {
  return (
  <div>
@@ -32,12 +34,12 @@ const PageLayout: FC<PageLayoutProps> = ({
  ogUrl={seoData.url || 'https://opensauced.pizza'}
  />
  }
- <BackgorundWrapper>
+ <BackgroundWrapper>
  {!pressPage && <Header navigationItems={navigationURLs} />}
  <div>{children}</div>
- {!pressPage && <Subscribe />}
+ {!pressPage && !homePage && <Subscribe />}
  <Footer pressPage={pressPage} />
- </BackgorundWrapper>
+ </BackgroundWrapper>
  </div>
  )
 }

components/common/layout/SectionWrapper.tsx

@@ -8,6 +8,7 @@ interface SectionWrapperProps {
  pb?: number
  pts?: number
  pbs?: number
+ px?: number
 }
 
 const SectionWrapper: FC<SectionWrapperProps> = ({
@@ -17,6 +18,7 @@ const SectionWrapper: FC<SectionWrapperProps> = ({
  pb = 0,
  pts = 0,
  pbs = 120,
+ px = 6, 
  children,
 }): ReactElement => {
  const isLargeTablet = useMediaQuery()
@@ -26,7 +28,7 @@ const SectionWrapper: FC<SectionWrapperProps> = ({
  paddingBottom: isLargeTablet ? `${pb}px` : `${pbs}px`,
  paddingTop: isLargeTablet ? `${pt}px` : `${pts}px`,
  }}
- className={`w-full max-w-[1256px] mx-auto px-6 flex justify-${justify} flex-${direction} items-center`}
+ className={`w-full max-w-[1256px] mx-auto px-${px} flex justify-${justify} flex-${direction} items-center`}
  >
  {children}
  </div>

components/sections/home-page/Background.tsx

@@ -1,10 +1,11 @@
 import Image from 'next/image'
 import React, { FC } from 'react'
 import upperStroke from '../../../public/upperStroke.svg'
-import leftSidePizzaStroke from '../../../public/leftSidePizzaStroke.svg'
-import rightSidePizzaStroke from '../../../public/rightSidePizzaStroke.svg'
-import _5_leftStroke from '../../../public/_5_leftStroke.svg'
-import _5_rightStroke from '../../../public/_5_rightStroke.svg'
+import left_2_stroke from '../../../public/background-strokes/left_2_stroke.svg'
+import right_2_stroke from '../../../public/background-strokes/right_2_stroke.svg'
+import right_3_stroke from '../../../public/background-strokes/right_3_stroke.svg'
+import StrokeMobile2 from '../../../public/background-strokes/stroke_mobile_2.svg'
+import StrokeMobile3 from '../../../public/background-strokes/stroke_mobile_3.svg'
 
 const Background: FC = ({ children }) => {
  return (
@@ -16,29 +17,17 @@ const Background: FC = ({ children }) => {
  <div className="absolute top-[30rem] right-[-15rem] tablet:-right-[8rem] largeTablet:top-[6rem] largeTablet:laptop:-right-[6rem] laptop:-right-[4rem] desktop:-right-[3rem]">
  <Image alt="Doodles" src={upperStroke} />
  </div>
-
- <div className="absolute hidden largeTablet:block largeTablet:top-[56rem] largeTablet:-left-[18rem] laptop:-left-[15rem] desktop:-left-[11rem]">
- <Image alt="Doodles" src={leftSidePizzaStroke} />
- </div>
-
- <div className="absolute hidden largeTablet:block largeTablet:top-[65rem] largeTablet:-right-[22rem] laptop:-right-[19rem] desktop:-right-[16rem]">
- <Image alt="Doodles" src={rightSidePizzaStroke} />
- </div>
-
- <div className="absolute top-[107rem] -left-[25rem] largeTablet:top-[192rem] largeTablet:-left-[18rem] laptop:-left-[15rem] desktop:-left-[13rem]">
- <Image alt="Doodles" src={_5_leftStroke} />
- </div>
-
- <div className="absolute hidden largeTablet:block largeTablet:top-[192rem] largeTablet:-right-[29rem] ">
- <Image alt="Doodles" src={_5_rightStroke} />
+
+ <div className="absolute hidden largeTablet:block top-[95rem] -left-[5rem]">
+ <Image alt="Doodles" src={left_2_stroke} />
  </div>
 
- <div className="absolute hidden largeTablet:block largeTablet:top-[402rem] largeTablet:-left-[18rem] laptop:-left-[15rem] desktop:-left-[13rem]">
- <Image alt="Doodles" src={_5_leftStroke} />
+ <div className="absolute hidden largeTablet:block top-[125rem] right-[4rem]">
+ <Image alt="Doodles" src={right_2_stroke} />
  </div>
 
- <div className="absolute hidden largeTablet:block largeTablet:top-[402rem] largeTablet:-right-[29rem] ">
- <Image alt="Doodles" src={_5_rightStroke} />
+ <div className="absolute top-[190rem] -right-[35rem] largeTablet:-right-[4rem]">
+ <Image alt="Doodles" src={right_3_stroke} />
  </div>
 
  <div className="relative">{children}</div>

components/sections/home-page/Hero.tsx

@@ -1,47 +1,76 @@
 import React from 'react'
 import { SanityHomePage } from '../../../types/schema'
-import Image from 'next/image'
 import SectionWrapper from '../../common/layout/SectionWrapper'
-import { Button } from '../../common'
+import ContainerWithLine from '../../common/ContainerWithLine'
 import { Heading, Typography } from '../../common/text'
+import { Button } from '../../common'
+import DecoratedText from '../../common/text/utils/DecoratedText'
+import Link from 'next/link'
 
 interface HeroProps {
  data: SanityHomePage['hero']
 }
 
 const Hero = ({ data }: HeroProps) => {
  return (
- <SectionWrapper direction="row" pt={115} pts={60} pb={120} pbs={0}>
- <main className="flex flex-col largeTablet:flex-row ">
- <div className="flex flex-col items-start flex-1">
- <Typography variant="preHeading" alignLarge="left">
- {data?.title}
- </Typography>
-
- <div className="largeTablet:max-w-lg">
- <Heading alignLarge="left">{data?.heading}</Heading>
- </div>
+ <SectionWrapper pt={115} pts={60} pbs={0}>
+ <ContainerWithLine>
+ <main>
+ <div className="flex largeTablet:items-center h-full flex-col gap-x-6 gap-y-10 largeTablet:flex-row mx-6">
+ <div className="flex-1 ">
+ <Typography alignSmall="left" alignLarge="left" variant="preHeading">
+ YOU GOT THIS
+ </Typography>
 
- <div className="mt-8 mb-10 tablet:mt-4 ">
- <p className="text-xl text-textPrimary opacity-70 largeTablet:leading-8">
- {data?.description}
- </p>
- </div>
- <div className="flex gap-4 items-center flex-col largeTablet:flex-row">
- {data?.cta?.map((item, i) => (
- <Button key={i} href={item.ctaLink} borderVariant={ i !== 0 ? "gray" : "neon" }>
- {item.ctaLabel}
- </Button>
- ))}
- </div>
- </div>
- <div className="flex mt-16 justify-center items-center flex-1 largeTablet:justify-end largeTablet:mt-0">
- <div className="w-full h-full relative pointer-events-none max-w-[463px] largeTablet:max-h-[299px]">
- <img alt="OpenSauced hero image" src={data?.image as unknown as string} />
+ <div className="relative">
+ <img className="absolute -left-[49px] largeTablet:-left-[68px] -top-[50px]" src="/icons/journey_ball.svg" alt="Starting point"/>
+
+ <Heading component="h1" alignSmall="left" alignLarge="left">
+ Your next open source journey $orange-to-yellowstarts here$orange-to-yellow
+ </Heading>
+ </div>
+
+ <div className="py-10">
+ <Typography alignLarge="left" alignSmall="left" variant="body3">
+ Start the path to your next contribution and join the global community of open source developers making an impact around the world.
+ </Typography>
+ </div>
+
+ <div className="flex gap-4 flex-col largeTablet:flex-row">
+ {data?.cta?.map((item, i) => (
+ <Button key={i} href={item.ctaLink} borderVariant={ i !== 0 ? "gray" : "neon" }>
+ {item.ctaLabel}
+ </Button>
+ ))}
+ </div>
+
+{/* needs to be implemented
+
+ <div className="pt-6 pb-10">
+ <Typography alignLarge="left" alignSmall="left" variant="body3">
+ Working with team?
+ <span>
+ <Link href="/teams">
+ <a>
+ <DecoratedText content="$orange-to-yellow Click here$orange-to-yellow"/>
+ </a>
+ </Link>
+ </span> 
+ </Typography>
+ </div>
+ */} 
+
+ </div>
+
+
+ <div className="flex-1 ">
+ <div className="">
+ <img loading="eager" className="relative scale-105 largeTablet:scale-110 -right-4" src="/hero.svg" alt="" />
+ </div>
+ </div>
  </div>
- </div>
- </main>
- {/* largeTablet:left-16 largeTablet:bottom-4 */}
+ </main>
+ </ContainerWithLine>
  </SectionWrapper>
  )
 }

components/sections/home-page/Logos.tsx

@@ -1,36 +1,45 @@
 import React from 'react'
 import SectionWrapper from '../../common/layout/SectionWrapper'
 import { SanityUser } from '../../../types/schema'
+import ContainerWithLine from '../../common/ContainerWithLine'
+import { Typography } from '../../common/text'
 
 interface LogosProps {
  data: SanityUser[]
 }
 
 const Logos = ({ data }: LogosProps) => {
  return (
- <SectionWrapper direction="row" pb={150} pbs={150}>
- <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">
- {data?.map((item) => {
- const href = item.website || ''
- const src = item.logo || ''
- return (
- <a
- key={item.name}
- href={href}
- target="_blank"
- rel="noreferrer"
- className="relative h-[18px] largeTablet:h-6 mx-auto"
- >
- <img
- className="h-full"
- src={src as string}
- alt={item.name}
- loading="lazy"
- />
- </a>
- )
- })}
- </div>
+ <SectionWrapper pbs={0}>
+ <ContainerWithLine>
+ <div className="px-6 pt-32 pb-4 largeTablet:pt-10 ">
+ <Typography alignLarge="left" alignSmall="center" variant="preHeading">
+ TRUSTED BT
+ </Typography>
+ </div>
+ <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">
+ {data?.map((item) => {
+ const href = item.website || ''
+ const src = item.logo || ''
+ return (
+ <a
+ key={item.name}
+ href={href}
+ target="_blank"
+ rel="noreferrer"
+ className="relative h-[18px] largeTablet:h-6 mx-auto"
+ >
+ <img
+ className="h-full"
+ src={src as string}
+ alt={item.name}
+ loading="lazy"
+ />
+ </a>
+ )
+ })}
+ </div>
+ </ContainerWithLine>
  </SectionWrapper>
  )
 }

components/sections/home-page/Newsletter.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import SectionWrapper from '../../common/layout/SectionWrapper'
+import { Heading, Typography } from '../../common/text'
+import GradientBorderWrapper from '../../common/GradientBorderWrapper'
+import Image from 'next/image'
+
+import StrokeR3 from '../../../public/_3_rightStroke.svg'
+import StrokeL3 from '../../../public/_3_leftStroke.svg'
+
+const Newsletter = () => {
+ return (
+ <SectionWrapper pt={100} pb={250}>
+ <div className="relative w-screen">
+ <div className="absolute largeTablet:block top-[-14rem] largeTablet:-top-[10rem] left-[-30rem] largeTablet:left-[-15rem]">
+ <Image alt="Doodles" src={StrokeL3} />
+ </div>
+ <div className="absolute largeTablet:block top-[-14rem] largeTablet:-top-[22rem] right-[-34rem] largeTablet:-right-[32rem]">
+ <Image alt="Doodles" src={StrokeR3} />
+ </div>
+ </div>
+
+ <div className="flex flex-col items-center gap-y-8">
+ <Heading alignSmall="center">
+ $orange-to-yellowThe fast track$orange-to-yellow to open source
+ </Heading>
+
+ <Typography alignSmall="center" variant="body1" >
+ Stay up to date with the latest OpenSauced news and trends.
+ </Typography>
+
+ <GradientBorderWrapper>
+ <form
+ 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]"
+ name="newsletter"
+ action="?success=true"
+ data-netlify="true"
+ data-netlify-honeypot="bot-field"
+ autoComplete="off"
+ >
+ <div hidden aria-hidden="true">
+ <label>
+ Try your luck
+ <input type="hidden" value="bot-field" name="newsletter" />
+ </label>
+ </div>
+ <input
+ placeholder="Email"
+ name="Your email"
+ type="email"
+ className="pr-4 outline-none focus:outline-none bg-[#211E1C] w-[180px] largeTablet:w-[290px]"
+ ></input>
+ <button
+ className=" text-brandOrange text-sm cursor-pointer"
+ type="submit"
+ >
+ Subscribe
+ </button>
+ </form>
+ </GradientBorderWrapper>
+ </div>
+ </SectionWrapper>
+ )
+}
+
+export default Newsletter