make homepage bg gradient (#112)

pages/index.tsx

@@ -13,6 +13,7 @@ import useMobileDetect from 'use-mobile-detect-hook'
 import { directusClient } from '@src/apollo-client'
 import { BareModal } from '@src/components/BareModal'
 import { FooterVariant } from '@src/components/FooterFull'
+import { CircleEmbellishment } from '@src/components/layout/CircleEmbellishment'
 import { GradientBG } from '@src/components/layout/GradientBG'
 import { HeaderPad } from '@src/components/layout/HeaderPad'
 import ArticleSection from '@src/components/page-sections/articleSection'
@@ -185,9 +186,23 @@ export default function Index({
     <>
       <HeaderPad
         as={GradientBG}
-        position="50% 50%"
-        size="cover"
-        image="/images/gradients/hero-background.jpg"
+        image={homepageGradient}
+        imageType="custom"
+        bgChildren={
+          <>
+            <CircleEmbellishment
+              width="100%"
+              height="40%"
+              position={{ bottom: '21%', left: '-45%' }}
+            />
+            <CircleEmbellishment
+              width="80%"
+              height="32%"
+              rotate={-125}
+              position={{ bottom: '-1%', right: '-42%' }}
+            />
+          </>
+        }
       >
         <HomePageHero
           heading={<>Managing Kubernetes can be a cluster—</>}
@@ -353,3 +368,10 @@ export const getStaticProps = async () => {
     errors: combineErrors([error, stacksError, reposError]),
   })
 }
+
+const homepageGradient = `
+  radial-gradient(ellipse 50% 100% at 100% 100px, rgba(16, 35, 86, 0.25) 1px, transparent 75% 25%),
+  radial-gradient(circle, #102356 0%, transparent 70%),
+  linear-gradient(180deg, rgba(16, 35, 86, 0.1) 0%, rgba(14, 16, 21, 1.00) 71.51%),
+  linear-gradient(180deg, #0B0C10 5.32%, #0B0C10 100%)
+`

src/components/layout/CircleEmbellishment.tsx

@@ -0,0 +1,103 @@
+import styled from 'styled-components'
+
+export function CircleEmbellishment({
+  width,
+  height,
+  rotate,
+  position,
+}: {
+  width?: number | string
+  height?: number | string
+  rotate?: number
+  position?: {
+    top?: number | string
+    left?: number | string
+    right?: number | string
+    bottom?: number | string
+  }
+}) {
+  return (
+    <div className="hidden md:block">
+      <EmbellishmentSC
+        $width={width}
+        $height={height}
+        $rotate={rotate}
+        $position={position}
+      >
+        <EmbellishmentSVG />
+      </EmbellishmentSC>
+    </div>
+  )
+}
+
+const EmbellishmentSC = styled.div<{
+  $width?: number | string
+  $height?: number | string
+  $rotate?: number
+  $position?: {
+    top?: number | string
+    left?: number | string
+    right?: number | string
+    bottom?: number | string
+  }
+  $showMobile?: boolean
+}>(({ $width = 300, $height = 300, $rotate, $position }) => ({
+  position: 'absolute',
+  zIndex: 0,
+  ...$position,
+  width: $width,
+  height: $height,
+  transform: $rotate ? `rotate(${$rotate}deg)` : 'none',
+  '& svg': {
+    width: '100%',
+    height: '100%',
+  },
+}))
+
+function EmbellishmentSVG() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 500 500"
+    >
+      <defs>
+        <linearGradient
+          id="grad1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+        >
+          <stop
+            offset="0%"
+            stopColor="#5C77FF"
+          />
+          <stop
+            offset="25%"
+            stopColor="transparent"
+          />
+          <stop
+            offset="65%"
+            stopColor="#52F4D94D"
+          />
+          <stop
+            offset="85%"
+            stopColor="#8FD6FF5C"
+          />
+          <stop
+            offset="98%"
+            stopColor="#494FF299"
+          />
+        </linearGradient>
+      </defs>
+      <circle
+        cx="50%"
+        cy="50%"
+        r="49.5%"
+        fill="none"
+        stroke="url(#grad1)"
+        strokeWidth="1"
+      />
+    </svg>
+  )
+}

src/components/layout/GradientBG.tsx

@@ -7,20 +7,22 @@ const GradientBGSC = styled.div<{
   $position?: string
   $image?: string
   $size?: string
+  $imageType?: 'image' | 'custom'
 }>(
   ({
     theme,
     $position: position = 'top center',
     $size = '100%',
     $image: image = '/images/gradients/gradient-bg-1.jpg',
+    $imageType: imageType = 'image',
   }) => ({
     position: 'relative',
     '.bg': {
       // Make sure background doesn't intersect 3d objects in older Safari
       transform: `translateZ(-1000px)`,
       perspective: 'none',
     },
-    '.bg, .bg::after': {
+    '.bg, .bg::before': {
       overflow: 'hidden',
       content: '""',
       position: 'absolute',
@@ -29,8 +31,8 @@ const GradientBGSC = styled.div<{
       right: '0',
       bottom: '0',
     },
-    '.bg::after': {
-      backgroundImage: `url(${image})`,
+    '.bg::before': {
+      backgroundImage: imageType === 'image' ? `url(${image})` : `${image}`,
       backgroundPosition: position,
       backgroundSize: $size,
       backgroundRepeat: 'no-repeat',
@@ -44,27 +46,32 @@ const GradientBGSC = styled.div<{
 
 export function GradientBG({
   children,
+  bgChildren,
   position,
   image,
   size,
+  imageType,
   ...props
 }: Merge<
   ComponentProps<typeof GradientBGSC>,
   {
     children: ReactNode
+    bgChildren?: ReactNode
     position?: string
     image?: string
     size?: string
+    imageType?: 'image' | 'custom'
   }
 >) {
   return (
     <GradientBGSC
       $position={position}
       $image={image}
       $size={size}
+      $imageType={imageType}
       {...props}
     >
-      <div className="bg" />
+      <div className="bg">{bgChildren}</div>
       <div className="content">{children}</div>
     </GradientBGSC>
   )

src/components/page-sections/ImpactCardSection.tsx

@@ -6,6 +6,7 @@ import styled, { useTheme } from 'styled-components'
 
 import { useMousePosition } from '@src/hooks/useMousePosition'
 
+import { CircleEmbellishment } from '../layout/CircleEmbellishment'
 import { ResponsiveText } from '../Typography'
 
 const CARD_Z_INDEX = 1
@@ -65,7 +66,12 @@ function ImpactCard({
       `}
       $borderGradientDir={borderGradientDir}
     >
-      {embellishment && <EmblishmentSC $position={embellishment} />}
+      {embellishment && (
+        <CircleEmbellishment
+          rotate={embellishment === 'bottom-right' ? 200 : 355}
+          position={getEmbelishmentPosition(embellishment)}
+        />
+      )}
       <ImpactCardContentSC>
         {tooltipText && (
           <Tooltip
@@ -158,47 +164,6 @@ const ImpactCardSubtitleSC = styled.p(({ theme }) => ({
   lineHeight: '150%',
 }))
 
-const EmblishmentSC = styled.div<{ $position: 'top-left' | 'bottom-right' }>(
-  ({ $position }) => {
-    const size = 300
-    const strokeWidth = 1
-    const gradientBorderSVG = encodeURIComponent(`
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${size} ${size}'>
-        <defs>
-          <linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>
-            <stop offset='0%' stop-color='#5C77FF'/>
-            <stop offset='30%' stop-color='#494FF299'/>
-            <stop offset='46%' stop-color='#8FD6FF5C'/>
-            <stop offset='60%' stop-color='#52F4D94D'/>
-            <stop offset='85%' stop-color='#8FD6FF5C'/>
-            <stop offset='98%' stop-color='#494FF299'/>
-          </linearGradient>
-        </defs>
-        <circle
-          cx='${size / 2}'
-          cy='${size / 2}'
-          r='${(size - strokeWidth) / 2}'
-          fill='none'
-          stroke='url(#grad1)'
-          stroke-width='${strokeWidth}'
-        />
-      </svg>
-    `)
-
-    return {
-      position: 'absolute',
-      zIndex: CARD_Z_INDEX - 1,
-      top: $position === 'top-left' ? -size / 2 : 'auto',
-      left: $position === 'top-left' ? -size / 2 : 'auto',
-      right: $position === 'bottom-right' ? -size / 2.25 : 'auto',
-      bottom: $position === 'bottom-right' ? -size / 1.6 : 'auto',
-      width: `${size}px`,
-      height: `${size}px`,
-      backgroundImage: `url("data:image/svg+xml,${gradientBorderSVG}")`,
-    }
-  }
-)
-
 const TooltipTextSC = styled.p(({ theme }) => ({
   ...theme.partials.marketingText.body1,
   color: theme.colors.grey[750],
@@ -240,3 +205,12 @@ const impactCards: ImpactCardProps[] = [
       'Through optimized resource utilization, reduced downtime, and efficient infrastructure management, Plural delivers a significant return on investment, enabling your platform team to build, innovate, and iterate faster without the typical operational bottlenecks.',
   },
 ]
+
+const getEmbelishmentPosition = (
+  embellishment: ImpactCardProps['embellishment']
+) => {
+  if (embellishment === 'top-left') return { bottom: '17%', left: '-21%' }
+  if (embellishment === 'bottom-right') return { top: '38%', right: '-18%' }
+
+  return undefined
+}