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