From 24f9be9283bdd1dbbbbff164ba52e0ec59b18c8e Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Fri, 26 May 2023 20:28:51 +0200
Subject: [PATCH] update content

---
 apps/www/components/CodeBlock/CodeBlock.tsx   |   3 +-
 apps/www/components/Layouts/Default.tsx       |   5 +-
 .../components/Sections/FeaturesSection.tsx   |   6 +-
 .../components/Sections/HighlightCards.tsx    |   2 +-
 .../{TimedTabs.tsx => TimedTabsSection.tsx}   |  16 +--
 .../components/Sections/UseCasesSection.tsx   |  10 +-
 apps/www/data/products/vector/page.tsx        |  80 +++++++-------
 apps/www/pages/vector/Vector.tsx              | 102 +-----------------
 apps/www/styles/index.css                     |   2 +-
 9 files changed, 73 insertions(+), 153 deletions(-)
 rename apps/www/components/Sections/{TimedTabs.tsx => TimedTabsSection.tsx} (91%)

diff --git a/apps/www/components/CodeBlock/CodeBlock.tsx b/apps/www/components/CodeBlock/CodeBlock.tsx
index 732f558354e..99f0cb02169 100644
--- a/apps/www/components/CodeBlock/CodeBlock.tsx
+++ b/apps/www/components/CodeBlock/CodeBlock.tsx
@@ -17,6 +17,7 @@ export interface CodeBlockProps {
   className?: string
   children?: string
   size?: 'small' | 'medium' | 'large'
+  background?: string
 }
 
 function CodeBlock(props: CodeBlockProps) {
@@ -98,7 +99,7 @@ function CodeBlock(props: CodeBlockProps) {
             padding: '21px 24px',
             fontSize: large ? 18 : '0.875rem',
             lineHeight: large ? 1.6 : 1.4,
-            background: '#181818',
+            background: props.background ?? '#1A1A1A',
           }}
           showLineNumbers={props.showLineNumbers}
           lineNumberStyle={{
diff --git a/apps/www/components/Layouts/Default.tsx b/apps/www/components/Layouts/Default.tsx
index 134f8243f35..99c1b5d863b 100644
--- a/apps/www/components/Layouts/Default.tsx
+++ b/apps/www/components/Layouts/Default.tsx
@@ -5,17 +5,18 @@ import Footer from 'components/Footer/index'
 type Props = {
   hideHeader?: boolean
   hideFooter?: boolean
+  className?: string
   children: React.ReactNode
 }
 
 const DefaultLayout = (props: Props) => {
-  const { hideHeader = false, hideFooter = false, children } = props
+  const { hideHeader = false, hideFooter = false, className = '', children } = props
 
   return (
     <>
       {!hideHeader && <Nav />}
       <div className="min-h-screen">
-        <main>{children}</main>
+        <main className={className}>{children}</main>
       </div>
       {!hideFooter && <Footer />}
     </>
diff --git a/apps/www/components/Sections/FeaturesSection.tsx b/apps/www/components/Sections/FeaturesSection.tsx
index 929e5e77a63..ce79c63b78f 100644
--- a/apps/www/components/Sections/FeaturesSection.tsx
+++ b/apps/www/components/Sections/FeaturesSection.tsx
@@ -23,7 +23,7 @@ const FeaturesSection = ({ title, paragraph, features }: Props) => {
           <h2 className="text-2xl sm:text-3xl xl:text-4xl max-w-[280px] sm:max-w-xs xl:max-w-[360px] tracking-[-1px]">
             {title}
           </h2>
-          <p className="p">{paragraph}</p>
+          <p className="text-scale-900 mb-4">{paragraph}</p>
           <Link href="">
             <a className="">
               <Button type="default" size="small">
@@ -56,7 +56,9 @@ const FeaturesSection = ({ title, paragraph, features }: Props) => {
                 </div>
                 <div className="text-sm lg:text-base">
                   <h2 className="text-base">{feature.title}</h2>
-                  <ReactMarkdown className="prose pt-1 text-sm">{feature.text}</ReactMarkdown>
+                  <ReactMarkdown className="prose pt-1 text-sm text-scale-900">
+                    {feature.text}
+                  </ReactMarkdown>
                 </div>
               </div>
             )
diff --git a/apps/www/components/Sections/HighlightCards.tsx b/apps/www/components/Sections/HighlightCards.tsx
index 4c2f003cf52..aadf5376c7e 100644
--- a/apps/www/components/Sections/HighlightCards.tsx
+++ b/apps/www/components/Sections/HighlightCards.tsx
@@ -16,7 +16,7 @@ const HighlightCards = ({ highlights }: { highlights: Highlight[] }) => {
           <InteractiveShimmerCard innerClassName="flex flex-col p-8 !bg-scale-200">
             <div className="w-full aspect-square mb-4">image</div>
             <h3 className="text-lg text-scale-1200 font-medium mb-2">{highlight.title}</h3>
-            <p>{highlight.paragraph}</p>
+            <p className="text-scale-900">{highlight.paragraph}</p>
           </InteractiveShimmerCard>
         ))}
       </div>
diff --git a/apps/www/components/Sections/TimedTabs.tsx b/apps/www/components/Sections/TimedTabsSection.tsx
similarity index 91%
rename from apps/www/components/Sections/TimedTabs.tsx
rename to apps/www/components/Sections/TimedTabsSection.tsx
index 857e362a4d4..3caaf16814d 100644
--- a/apps/www/components/Sections/TimedTabs.tsx
+++ b/apps/www/components/Sections/TimedTabsSection.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, ReactNode } from 'react'
-import { motion, useAnimation, AnimatePresence } from 'framer-motion'
+import { motion, useAnimation } from 'framer-motion'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import Link from 'next/link'
 import { Button } from 'ui'
@@ -42,18 +42,18 @@ interface Tab {
 }
 
 interface Props {
-  title: string
+  title: string | ReactNode
   paragraph: string
   tabs: Tab[]
   intervalDuration?: number
   updateFrequency?: number
 }
 
-const TimedTabs = ({
+const TimedTabsSection = ({
   title,
   paragraph,
   tabs,
-  intervalDuration = 15,
+  intervalDuration = 25,
   updateFrequency = 10,
 }: Props) => {
   const [activeTab, setActiveTab] = useState(0)
@@ -120,10 +120,10 @@ const TimedTabs = ({
     <SectionContainer className="flex flex-col gap-8">
       <div className="flex flex-col lg:flex-row gap-8 xl:gap-10 justify-between">
         <div className="w-full lg:w-1/2 gap-2 flex flex-col">
-          <h2 className="text-2xl sm:text-3xl xl:text-4xl max-w-[280px] sm:max-w-xs xl:max-w-[360px] tracking-[-1px]">
+          <h2 className="text-3xl xl:text-4xl max-w-[280px] sm:max-w-xs xl:max-w-[360px] tracking-[-1px]">
             {title}
           </h2>
-          <p className="p max-w-sm">{paragraph}</p>
+          <p className="text-scale-900 mb-4 max-w-sm">{paragraph}</p>
           <Link href="">
             <a className="">
               <Button type="default" size="small">
@@ -146,7 +146,7 @@ const TimedTabs = ({
           >
             {tabs.map((tab, i) => (
               <SwiperSlide key={i}>
-                <CodeBlock key={i} lang="py" size="medium">
+                <CodeBlock key={i} lang="py" size="large" background="#1A1A1A">
                   {tab.code}
                 </CodeBlock>
               </SwiperSlide>
@@ -170,4 +170,4 @@ const TimedTabs = ({
   )
 }
 
-export default TimedTabs
+export default TimedTabsSection
diff --git a/apps/www/components/Sections/UseCasesSection.tsx b/apps/www/components/Sections/UseCasesSection.tsx
index ebeca428cf0..cd448356172 100644
--- a/apps/www/components/Sections/UseCasesSection.tsx
+++ b/apps/www/components/Sections/UseCasesSection.tsx
@@ -15,10 +15,10 @@ interface Props {
 
 const UseCasesSection = ({ title, paragraph, useCases }: Props) => {
   return (
-    <SectionContainer className="flex flex-col gap-8">
-      <div className="flex flex-col gap-4 items-center justify-center">
+    <SectionContainer className="flex flex-col gap-12">
+      <div className="flex flex-col text-center gap-4 items-center justify-center">
         <h2 className="heading-gradient text-2xl sm:text-3xl xl:text-4xl font-medium">{title}</h2>
-        <p className="p mx-auto text-center lg:w-1/2">{paragraph}</p>
+        <p className="mx-auto text-scale-900 lg:w-1/2">{paragraph}</p>
       </div>
       <div className="grid gap-10 grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
         {useCases.map((example) => {
@@ -36,8 +36,8 @@ const UseCasesSection = ({ title, paragraph, useCases }: Props) => {
                   alt={example.title}
                 />
                 <div className="prose">
-                  <h4 className="">{example.title}</h4>
-                  <p className="text-sm">{example.description}</p>
+                  <h4 className="text-lg">{example.title}</h4>
+                  <p className="text-sm text-scale-900">{example.description}</p>
                 </div>
               </div>
             </>
diff --git a/apps/www/data/products/vector/page.tsx b/apps/www/data/products/vector/page.tsx
index 674626d71b0..b56cf088276 100644
--- a/apps/www/data/products/vector/page.tsx
+++ b/apps/www/data/products/vector/page.tsx
@@ -9,39 +9,47 @@ export const pageData = {
       component: '',
     },
   ],
-  highlights: [
-    {
-      title: 'PostgreSQL + pgvector',
-      paragraph:
-        'Every Supabase project is a dedicated Postgres instance. Use pgvector to store, query, and index your vector embeddings at scale.',
-      image: '',
-    },
-    {
-      title: 'Connect with OpenAI',
-      paragraph:
-        'Easily connect to any LLM or embeddings API, including Hugging Face, SageMaker and more.',
-      image: '',
-    },
-    {
-      title: 'Secure and Scalable',
-      paragraph:
-        'Supabase is SOC2 type 2 compliant, and comes with an advanced permissions system.',
-      image: '',
-    },
-    {
-      title: 'Deploy Globally',
-      paragraph:
-        'Choose from 12 Fully Managed datacenters or, or Self-Host on your own cloud or servers.',
-      image: '',
-    },
-  ],
+  highlightsSection: {
+    highlights: [
+      {
+        title: 'PostgreSQL + pgvector',
+        paragraph:
+          'Every Supabase project is a dedicated Postgres instance. Use pgvector to store, query, and index your vector embeddings at scale.',
+        image: '',
+      },
+      {
+        title: 'Connect with OpenAI',
+        paragraph:
+          'Easily connect to any LLM or embeddings API, including Hugging Face, SageMaker and more.',
+        image: '',
+      },
+      {
+        title: 'Secure and Scalable',
+        paragraph:
+          'Supabase is SOC2 type 2 compliant, and comes with an advanced permissions system.',
+        image: '',
+      },
+      {
+        title: 'Deploy Globally',
+        paragraph:
+          'Choose from 12 Fully Managed datacenters or, or Self-Host on your own cloud or servers.',
+        image: '',
+      },
+    ],
+  },
   integrations: {
     title: 'Leverage the tools you love',
     image: <IntegrationsSVG />,
   },
   useCasesSection: {
-    title: 'What you can build with Supabase Vector',
-    paragraph: 'Manage your vector embeddings to power any AI project from start to finish.',
+    title: (
+      <>
+        <span className="heading-gradient">What you can build</span>
+        <br />
+        <span className="heading-gradient">with Supabase Vector</span>
+      </>
+    ),
+    paragraph: 'Go effortlessly from experimentation to production-ready AI applications.',
     useCases: [
       {
         img: 'toast-messages.svg',
@@ -155,32 +163,32 @@ docs.query(
       {
         icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
         title: 'Fully managed or Self-Hosted',
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
+        text: 'Start without hassle with our cloud platform, or self-host your own solution to keep everything under control. You choose.',
       },
       {
         icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
-        title: 'Multi region',
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
+        title: 'Global & Multi-Region',
+        text: 'Automatically provision and configure a global view of applications across multiple regions to reduce read latency.',
       },
       {
         icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
-        title: 'Health Benefits',
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
+        title: 'Integrated',
+        text: 'Vector embeddings are in the same database as the rest of your data, which reduces I/O roundtrips and improves performance.',
       },
       {
         icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
         title: 'No vendor lock-in',
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
+        text: 'We use existing standards to increase portability and to avoid lock-in, making it easy to migrate in and out.',
       },
       {
         icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
         title: 'Automatic Backups',
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
+        text: 'Automatic backups and PITR (Point In Time Recovery) ensure your data is always safe and recoverable.',
       },
       {
         icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
         title: 'Highly Scalable',
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
+        text: 'Designed for unparalleled high performance and availability at global scale.',
       },
     ],
   },
diff --git a/apps/www/pages/vector/Vector.tsx b/apps/www/pages/vector/Vector.tsx
index d044fbe88ad..8bbe5a07523 100644
--- a/apps/www/pages/vector/Vector.tsx
+++ b/apps/www/pages/vector/Vector.tsx
@@ -1,43 +1,19 @@
-import { Button, IconGrid, IconLayers, IconMenu } from 'ui'
 import Solutions from 'data/Solutions.json'
 import { NextSeo } from 'next-seo'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import CTABanner from '~/components/CTABanner'
 import DefaultLayout from '~/components/Layouts/Default'
-import SectionContainer from '~/components/Layouts/SectionContainer'
 import CommunitySlider from '~/components/Sections/CommunitySlider'
-import APISection from '~/components/Sections/APISection'
 import ProductHeaderCentered from '~/components/Sections/ProductHeaderCentered'
-import VectorStyles from './vector.module.css'
 import FeaturesSection from '~/components/Sections/FeaturesSection'
 import HighlightCards from '~/components/Sections/HighlightCards'
 import UseCasesSection from '~/components/Sections/UseCasesSection'
 import CenteredTitleImage from '~/components/Sections/CenteredTitleImage'
-import TimedTabs from '~/components/Sections/TimedTabs'
+import TimedTabsSection from '~/components/Sections/TimedTabsSection'
 import { pageData } from '~/data/products/vector/page'
 
 import 'swiper/swiper.min.css'
 
-const Cursor = ({ className = '', color = 'none' }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill={color}
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      className={`h-10 w-10 stroke-black dark:stroke-white ${className}`}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-        d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"
-      />
-    </svg>
-  )
-}
-
 function VectorPage() {
   // base path for images
   const { basePath } = useRouter()
@@ -61,7 +37,7 @@ function VectorPage() {
           ],
         }}
       />
-      <DefaultLayout>
+      <DefaultLayout className="bg-scale-100">
         <ProductHeaderCentered
           icon={Solutions['vector']?.icon}
           title={Solutions['vector']?.name}
@@ -74,83 +50,15 @@ function VectorPage() {
           subheader={[
             'Integrate your favorite ML-models to easily store, index and search vector embeddings for any AI use case.',
           ]}
-          image={[
-            <div className="bg-scale-300 border-scale-500 relative flex h-[372px] w-[560px] items-center justify-center overflow-hidden rounded border drop-shadow-md">
-              <div
-                className={[
-                  'border-brand-800 relative h-12 w-48 bg-[#34B27B]',
-                  `flex items-center justify-center ${VectorStyles['shape']}`,
-                ].join(' ')}
-              >
-                <p
-                  className={`text-scale-1200 text-[18px] font-medium ${VectorStyles['button-text']}`}
-                >
-                  Start for free
-                </p>
-              </div>
-              <Cursor
-                color="var(--colors-yellow9)"
-                className={`${VectorStyles['cursor-one']} absolute top-[220px] right-[130px]`}
-              />
-              <Cursor
-                color="var(--colors-indigo9)"
-                className={`${VectorStyles['cursor-two']} absolute top-[180px] right-[280px]`}
-              />
-              <div
-                className={[
-                  'border-scale-1200 absolute bottom-[40px] left-[175px] flex h-10 w-20',
-                  'items-center justify-center space-x-2 rounded-full border-[3px] bg-indigo-900',
-                  `${VectorStyles['cursor-two-comment']}`,
-                ].join(' ')}
-              >
-                <p className="text-lg">🤔</p>
-              </div>
-              <Cursor
-                color="var(--colors-tomato9)"
-                className={`${VectorStyles['cursor-three']} absolute top-[170px] right-[180px]`}
-              />
-              <div
-                className={[
-                  'border-scale-1200 absolute top-[72px] left-[320px] flex h-10 w-20',
-                  'items-center justify-center space-x-2 rounded-full border-[3px] bg-tomato-900',
-                  `${VectorStyles['cursor-three-comment']}`,
-                ].join(' ')}
-              >
-                <p className="text-lg">😄</p>
-              </div>
-              {/* <div className="bg-scale-100 border-scale-500 absolute left-0 h-full w-24 border-r py-9 shadow">
-                <div className="border-scale-500 h-7 border-b" />
-              </div> */}
-              {/* <div className="bg-scale-100 border-scale-500 absolute right-0 h-full w-20 border-l py-9 shadow">
-                <div className="border-scale-500 h-7 border-b" />
-              </div> */}
-              <div className="bg-scale-200 border-scale-500 absolute top-0 flex h-9 w-full items-center justify-between border-b">
-                <div className="flex items-center">
-                  <IconMenu className="text-scale-1200 mx-3" strokeWidth={1} size={16} />
-                  <IconGrid className="text-scale-1200 mx-3" strokeWidth={1} size={15} />
-                  <IconLayers className="text-scale-1200 mx-3" strokeWidth={1} size={15} />
-                </div>
-                <div className="mx-3 flex items-center">
-                  <div className="border-scale-300 dark:border-scale-1200 bg-tomato-900 dark:bg-tomato-900 relative -right-4 h-5 w-5 rounded-full border" />
-                  <div className="border-scale-300 dark:border-scale-1200 bg-yellow-900 dark:bg-yellow-900 relative -right-2 z-[2] h-5 w-5 rounded-full border" />
-                  <div className="border-scale-300 dark:border-scale-1200 bg-indigo-900 dark:bg-indigo-900 z-[3] h-5 w-5 rounded-full border" />
-                </div>
-              </div>
-            </div>,
-          ]}
+          image={[]}
           documentation_url={'/docs/guides/vector/broadcast'}
         />
 
-        <HighlightCards highlights={pageData.highlights} />
-
+        <HighlightCards {...pageData.highlightsSection} />
         <CenteredTitleImage {...pageData.integrations} />
-
+        <TimedTabsSection {...pageData.APIsection} />
         <UseCasesSection {...pageData.useCasesSection} />
-
-        <TimedTabs {...pageData.APIsection} />
-
         <FeaturesSection {...pageData.featuresSection} />
-
         <CommunitySlider />
 
         <CTABanner />
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index 909477afcac..50fd685751c 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -91,7 +91,7 @@ h6:not(.overwrite) {
 }
 
 .heading-gradient-brand {
-  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand-900 dark:to-brand-900;
+  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand-900 dark:to-brand-800;
 }
 
 .toc-animate {