diff --git a/apps/www/components/Sections/HighlightCards.tsx b/apps/www/components/Sections/HighlightCards.tsx index 8a33f528b94..9e2493492a2 100644 --- a/apps/www/components/Sections/HighlightCards.tsx +++ b/apps/www/components/Sections/HighlightCards.tsx @@ -44,8 +44,14 @@ const HighlightCard = ({ highlight, index }: { highlight: Highlight; index: numb onMouseLeave={() => setIsHovered(false)} animate={isInView ? animate : initial} > - +
+
{highlight.image && } {highlight.svg && highlight.svg}
diff --git a/apps/www/components/Sections/TimedTabsSection.tsx b/apps/www/components/Sections/TimedTabsSection.tsx index 6864e52b32f..532a70fb177 100644 --- a/apps/www/components/Sections/TimedTabsSection.tsx +++ b/apps/www/components/Sections/TimedTabsSection.tsx @@ -25,7 +25,7 @@ const Tab = ({ isActive, label, paragraph, onClick, progress, intervalDuration } aria-selected={isActive} role="tab" > -
+
{isActive && ( { const { isDarkMode } = useTheme() + const ref = useRef() + const isInView = useInView(ref, { margin: '-25%', once: true }) + + const initial = INITIAL_BOTTOM + const animate = getAnimation({}) return ( - - +
- - - - - - - - - - - - + - - - - - - - {/* Vector Icon */} - - - - - - + + + + + + + {/* center green main line */} + + + + + + + + {/* top green */} + + + + + + + {/* logo bg rays */} + + {/* Vector logo */} + + {/* logo side archs */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - + + - - - - - + + - - - - - + + - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + {/* bg overlays */} + + + + + + + {/* coordinates */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/apps/www/components/products/vector/DeployGlobally.tsx b/apps/www/components/products/vector/DeployGlobally.tsx index 3dc3cfaf782..2077b88c6a7 100644 --- a/apps/www/components/products/vector/DeployGlobally.tsx +++ b/apps/www/components/products/vector/DeployGlobally.tsx @@ -11,14 +11,11 @@ function getRandomNumber(min: number, max: number) { const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => { const { isDarkMode } = useTheme() const ref = React.useRef() - const states = ['off', 'medium', 'high'] + const states = ['1', '2', '3'] const colors = { green: isDarkMode ? '#1CF7C3' : '#00B99F', gray: isDarkMode ? '#151918' : '#D3D3D3', } - const indices = [ - 3, 11, 14, 23, 27, 35, 42, 48, 55, 62, 67, 71, 81, 83, 91, 98, 103, 107, 110, 115, - ] const transitionDuration = 250 React.useEffect(() => { @@ -27,24 +24,18 @@ const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => { const circles = [...ref.current?.querySelectorAll('circle')] const interval = setInterval(() => { - circles?.map((circle, index: any) => { - const isMatch = indices.includes(index) - - if (!isMatch) { - return - } - + circles?.map((circle) => { const nextState = states[Math.floor(Math.random() * states.length)] const currentState = circle.dataset.state const pulse = Math.random() > 0.2 && - ((currentState === 'off' && nextState === 'high') || - (currentState === 'off' && nextState === 'medium') || - (currentState === 'medium' && nextState === 'high')) + ((currentState === '1' && nextState === '3') || + (currentState === '1' && nextState === '2') || + (currentState === '2' && nextState === '3')) if (pulse) { - const delay = getRandomNumber(50, 100) + const delay = getRandomNumber(40, 90) timeoutIds.push( setTimeout(() => { @@ -59,13 +50,13 @@ const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => { ) } - if (currentState === 'high' && nextState === 'medium' && pulse) { - circle.dataset.state = 'off' + if (currentState === '3' && nextState === '2' && pulse) { + circle.dataset.state = '1' } else { circle.dataset.state = nextState } }) - }, 300) + }, 200) return () => { clearInterval(interval) @@ -75,12 +66,6 @@ const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => { return ( <> -
{ +const OpenAIImage = ({ isHovered }: { isHovered: boolean }) => { const { isDarkMode } = useTheme() + const lineVariants = { + animate: { + strokeDashoffset: -38, + transition: { + ease: 'linear', + duration: 3, + yoyo: false, + repeat: Infinity, + }, + }, + + initial: { + strokeDashoffset: 0, + }, + } + + const colors = { + glow: isDarkMode ? '#009C77' : '#00FFD9', + rectStart: isDarkMode ? '#17FDDF' : '#49615E', + rectEnd: isDarkMode ? '#10FFE0' : '#202020', + cardBgStart: isDarkMode ? '#171717' : 'white', + cardBgEnd: isDarkMode ? '#171717' : 'white', + openAIStart: isDarkMode ? '#89FFCA' : '#4FD7B6', + openAIEnd: isDarkMode ? '#D0FAE6' : '#4F7362', + openAIStrokeStart: isDarkMode ? '#A5FFD6' : '#5F5F5F', + openAIStrokeEnd: isDarkMode ? '#D0FAE6' : '#D6D6D6', + openAIAltStart: isDarkMode ? '#00DBA7' : '#00DBA7', + openAIAltEnd: isDarkMode ? '#171717' : '#DFDFDF', + } + return ( <> -
- OpenAI vector graphic +
+ OpenAi logo +
+ + + + + + {/* rectangles grid */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/apps/www/components/products/vector/PGvectorImg.tsx b/apps/www/components/products/vector/PGvectorImg.tsx index 446315b328b..3429d0601d5 100644 --- a/apps/www/components/products/vector/PGvectorImg.tsx +++ b/apps/www/components/products/vector/PGvectorImg.tsx @@ -1,28 +1,487 @@ -import React from 'react' +import React, { useEffect, useRef } from 'react' import { useTheme } from 'common/Providers' -import Image from 'next/image' +import { DEFAULT_EASE } from '~/lib/animations' +import { LazyMotion, domAnimation, m } from 'framer-motion' -const PGvectorImg = () => { +const PGvectorImg = ({ isHovered }: { isHovered: boolean }) => { const { isDarkMode } = useTheme() + const svgRef = useRef() + + const colors = { + circles1: isDarkMode ? '#105C3B' : '#008B4F', + circles2: isDarkMode ? '#1A2520' : '#DDDFDE', + pgLogoStart: isDarkMode ? '#70F8BB' : '#7CDBC5', + pgLogoEnd: isDarkMode ? '#A3A3A3' : '#006136', + pgLogoBg: isDarkMode ? '#161616' : 'white', + radialBgStart: isDarkMode ? '#131313' : '#F1F3F5', + radialBgEnd: isDarkMode ? '#161616' : '#F8F9FA', + coordinatesStart: isDarkMode ? '#23FF98' : '#002313', + coordinatesEnd: isDarkMode ? '#49FFAA' : '#032C18', + rectStart: isDarkMode ? '#17FDDF' : '#49615E', + rectEnd: isDarkMode ? '#10FFE0' : '#202020', + arrow: isDarkMode ? '#02FF8F' : '#00542F', + asdfStart: isDarkMode ? '#23FF98' : '#002313', + asdfEnd: isDarkMode ? '#49FFAA' : '#032C18', + } + + const transition = (type: string) => ({ + transition: `${type} 0.18s cubic-bezier(${DEFAULT_EASE})`, + }) + + const lineVariants = { + animate: { + strokeDashoffset: 38, + transition: { + ease: 'linear', + duration: 3, + yoyo: false, + repeat: Infinity, + }, + }, + + initial: { + strokeDashoffset: 0, + }, + } + + useEffect(() => { + const coordinates = svgRef.current.querySelector('#coordinates') + const circles = svgRef.current.querySelector('#circles') + const arrowtl = svgRef.current.querySelector('#arrow-tl') + const arrowtr = svgRef.current.querySelector('#arrow-tr') + const arrowbl = svgRef.current.querySelector('#arrow-bl') + const arrowbr = svgRef.current.querySelector('#arrow-br') + + coordinates.style.opacity = isHovered ? '1' : '0.4' + circles.style.opacity = isHovered ? '1' : '0.2' + arrowtl.style.transform = isHovered ? 'translate3d(0,0,0)' : 'translate3d(10px,4px,0)' + arrowtr.style.transform = isHovered ? 'translate3d(0,0,0)' : 'translate3d(-5px,2px,0)' + arrowbl.style.transform = isHovered ? 'translate3d(0,0,0)' : 'translate3d(4px,-2px,0)' + arrowbr.style.transform = isHovered ? 'translate3d(0,0,0)' : 'translate3d(-8px,-1px,0)' + }, [isHovered]) return ( <> -
- OpenAI vector graphic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/apps/www/components/products/vector/SecureAndScalableImg.tsx b/apps/www/components/products/vector/SecureAndScalableImg.tsx index fb5f588caab..efdb757d261 100644 --- a/apps/www/components/products/vector/SecureAndScalableImg.tsx +++ b/apps/www/components/products/vector/SecureAndScalableImg.tsx @@ -1,28 +1,574 @@ -import React from 'react' +import React, { useEffect, useRef } from 'react' import { useTheme } from 'common/Providers' -import Image from 'next/image' +import { DEFAULT_EASE } from '~/lib/animations' -const SecureAndScalableImg = () => { +const SecureAndScalableImg = ({ isHovered }: { isHovered: boolean }) => { const { isDarkMode } = useTheme() + const shieldsRef = useRef() + const mainRef = useRef() + + const colors = { + shieldsStroke: isDarkMode ? '#494949' : '#D5D5D5', + cardBg: isDarkMode ? '#161616' : '#F8F9FA', + bgGlow: isDarkMode ? '#009C77' : '#00FFD9', + iconBg: isDarkMode ? '#112B25' : '#DCDCDC', + smallIcon: isDarkMode ? '#1DF7C3' : '#00826A', + cardLine: isDarkMode ? '#1DF7C3' : '#00826A', + } + + useEffect(() => { + mainRef.current.style.transform = isHovered ? 'translateY(-5px)' : 'translateY(0px)' + + if (!isHovered) return + + const shields = [...shieldsRef.current?.querySelectorAll('path')] + + shields.map((shield, i) => { + shield.style.transition = 'opacity 0.2s ease' + + setTimeout(() => { + shield.style.opacity = '0.1' + + setTimeout(() => { + shield.style.opacity = '1' + }, 400) + }, i * 35) + }) + }, [isHovered]) return ( <> -
- OpenAI vector graphic + + {/* concentric shields */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* bg glow */} + + + + {/* Main content */} + + + + + + + + + + {/* main shield behind */} + + + + {/* main shield behind glow */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/apps/www/public/images/product/vector/openai-logo-dark.png b/apps/www/public/images/product/vector/openai-logo-dark.png new file mode 100644 index 00000000000..35843164710 Binary files /dev/null and b/apps/www/public/images/product/vector/openai-logo-dark.png differ diff --git a/apps/www/public/images/product/vector/openai-logo-light.png b/apps/www/public/images/product/vector/openai-logo-light.png new file mode 100644 index 00000000000..8fa3ca5a241 Binary files /dev/null and b/apps/www/public/images/product/vector/openai-logo-light.png differ