feat: update colors, fonts, logo

components/Button.jsx

@@ -3,9 +3,9 @@ import Link from 'next/link'
 
 const styles = {
   primary:
-    'rounded-full bg-orange-500 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-orange-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-300/50 active:bg-orange-500',
+    'btn-primary',
   secondary:
-    'rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400',
+    'btn-secondary',
 }
 
 export function Button({ variant = 'primary', className, href, ...props }) {

components/DocsSidebarNavigation.jsx

@@ -78,7 +78,7 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
               className={clsx(
                 'mt-2 space-y-2 border-l-2 transition-all duration-300',
                 expandedSections[section.title]
-                  ? 'border-slate-100 dark:border-slate-800'
+                  ? 'border-slate-100 dark:border-slate-700'
                   : 'hidden border-transparent',
                 'lg:mt-4 lg:space-y-4 lg:border-slate-200'
               )}
@@ -87,7 +87,7 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
                 <li key={link.href} className="relative pl-3.5">
                   <Link href={link.href}                       className={clsx(
                         'block',
-                        link.href === data?.node?.uri ? 'font-semibold text-sky-500' : 'text-slate-500 hover:text-slate-600 dark:text-slate-400'
+                        link.href === data?.node?.uri ? 'font-semibold text-sky-400' : 'text-slate-500 hover:text-slate-600 dark:text-slate-300'
                       )}>
                       {link.title}
                   </Link>

components/FeatureTabsLeft.jsx

@@ -30,7 +30,7 @@ const FeatureTabsLeft = (layout) => {
     <section
       id="features"
       aria-label="Features of WPGraphQL for ACF"
-      className="relative overflow-hidden bg-slate-100  pb-28 pt-20 dark:bg-slate-800 sm:py-32"
+      className="relative overflow-hidden bg-slate-100  pb-28 pt-20 dark:bg-blue sm:py-32"
     >
       <Container className="relative">
         <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
@@ -58,8 +58,8 @@ const FeatureTabsLeft = (layout) => {
                       className={clsx(
                         'group relative my-2 rounded-full px-4  py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
                         selectedIndex === featureIndex
-                          ? 'bg-slate-600 group-hover:text-white dark:bg-slate-800 lg:ring-1 lg:ring-inset lg:ring-white/10 lg:dark:bg-slate-700 '
-                          : 'bg-gray-100 hover:bg-slate-600 group-hover:text-white dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700',
+                          ? 'bg-gradient-build group-hover:text-white dark:bg-blue-800 lg:ring-1 lg:ring-inset lg:ring-white/10'
+                          : 'bg-gradient-build-light hover:bg-gradient-build group-hover:text-white dark:hover:bg-blue-900',
                       )}
                     >
                       <h3>
@@ -93,7 +93,7 @@ const FeatureTabsLeft = (layout) => {
                 {features.map((feature) => (
                   <Tab.Panel key={feature.name} unmount={false}>
                     <div className="relative sm:px-6 lg:hidden">
-                      <div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-slate-200 ring-1 ring-inset ring-white/10 dark:bg-slate-700 sm:inset-x-0 sm:rounded-t-xl lg:bg-white/10" />
+                      <div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-slate-100 dark:bg-blue sm:inset-x-0 sm:rounded-t-xl lg:bg-white/10" />
                       <p className="relative mx-auto max-w-2xl text-base text-slate-800 dark:text-white sm:text-center">
                         {feature.featureDescription}
                       </p>

components/FeatureTabsTop.jsx

@@ -13,8 +13,8 @@ function Feature({ feature, isActive, className, ...props }) {
         className,
         'rounded-lg p-5',
         !isActive
-          ? 'opacity-75 hover:bg-slate-50 hover:opacity-100 dark:hover:bg-gray-800'
-          : 'bg-slate-100 dark:bg-slate-800',
+          ? 'opacity-75 hover:bg-slate-50 hover:opacity-100 dark:hover:bg-slate-900'
+          : 'bg-slate-100 dark:bg-slate-900',
       )}
       {...props}
     >
@@ -86,7 +86,7 @@ function FeaturesDesktop({ features }) {
               />
             ))}
           </Tab.List>
-          <Tab.Panels className="relative mt-20 overflow-hidden rounded-xl bg-slate-200 px-14 py-16 dark:bg-slate-700 xl:px-16">
+          <Tab.Panels className="relative mt-20 overflow-hidden rounded-xl bg-slate-200 px-14 py-16 dark:bg-slate-900 xl:px-16">
             <div className="-mx-5 flex">
               {features.map((feature, featureIndex) => (
                 <Tab.Panel
@@ -134,9 +134,7 @@ const FeatureTabsTop = (feature) => {
           <h2 className="font-display text-3xl tracking-tight text-slate-900 dark:text-slate-50 sm:text-4xl">
             {feature.name}
           </h2>
-          <p className="mt-4 text-lg tracking-tight text-slate-700 dark:text-slate-100">
-            {feature.description}
-          </p>
+          <div className="mt-4 text-lg tracking-tight text-slate-700 dark:text-slate-100" dangerouslySetInnerHTML={{__html: feature.description }} />
         </div>
         <FeaturesMobile features={feature.features} />
         <FeaturesDesktop features={feature.features} />

components/HomepageLayoutsLayoutsFaqsLayout.jsx

@@ -28,7 +28,7 @@ const HomepageLayoutsLayoutsFaqsLayout = ({ title, description, questions }) =>
     <section
       id="faq"
       aria-labelledby="faq-title"
-      className="relative overflow-hidden bg-slate-100 py-20 dark:bg-slate-800 sm:py-32"
+      className="relative overflow-hidden bg-white py-20 dark:bg-navy sm:py-32"
     >
       <Container className="relative">
         <div className="prose mx-auto max-w-2xl dark:prose-invert lg:mx-0">

components/HomepageLayoutsLayoutsHeroLayout.jsx

@@ -18,13 +18,13 @@ function TrafficLightsIcon(props) {
 
 const HomepageLayoutsLayoutsHeroLayout = (hero) => {
   return (
-    <div className="overflow-hidden bg-white dark:-mb-32 dark:mt-[-4.5rem] dark:bg-slate-900 dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
+    <div className="overflow-hidden bg-white dark:-mb-32 dark:mt-[-4.5rem] dark:bg-navy dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
       <div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
         <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
           <div className="relative z-10 md:text-center lg:text-left">
             <div className="relative">
               <div
-                className="inline bg-gradient-to-r from-orange-600 via-orange-500 to-orange-600 bg-clip-text font-display text-5xl tracking-tight text-transparent dark:from-orange-300 dark:via-orange-600 dark:to-orange-300"
+                className="inline bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-clip-text font-display text-5xl tracking-tight text-transparent dark:from-blue-300 dark:via-blue-600 dark:to-blue-300"
                 dangerouslySetInnerHTML={{ __html: hero.title }}
               />
               <div

components/HomepageLayoutsLayoutsSupportedFieldTypesLayout.jsx

@@ -140,22 +140,22 @@ function FieldTypeGrid({ fieldTypes }) {
           />
         </>
       )}
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-gray-50 dark:from-slate-700" />
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-gray-50 dark:from-slate-700" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-slate-100 dark:from-purple-800" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-slate-100 dark:from-purple-800" />
     </div>
   )
 }
 
 const HomepageLayoutsLayoutsSupportedFieldTypesLayout = (data) => {
   return (
     <section
-      id="reviews"
-      aria-labelledby="reviews-title"
-      className="pb-16 pt-20 dark:bg-slate-700 sm:pb-24 sm:pt-32"
+      id="field-types"
+      aria-labelledby="field-types-title"
+      className="pb-16 pt-20 bg-slate-100 dark:bg-purple-800 sm:pb-24 sm:pt-32"
     >
       <Container>
         <h2
-          id="reviews-title"
+          id="field-types-title"
           className="mb-5 text-3xl font-medium tracking-tight text-gray-900 dark:text-gray-100 sm:text-center"
         >
           {data.title}

components/Layout.jsx

@@ -135,7 +135,7 @@ export function Layout({ node, children, toc, title }) {
           <div className="hidden lg:relative lg:block lg:flex-none">
             <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:bg-gray-800/25" />
             <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
-            <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
+            <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-700 dark:block" />
             <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
               <DocsSidebarNavigation
                 data={{

components/Logo.jsx

@@ -2,7 +2,7 @@ import Image from 'next/image'
 
 function LogomarkPaths() {
   return (
-    <g fill="none" stroke="#38BDF8" strokeLinejoin="round" strokeWidth={3}>
+    <g fill="none" stroke="#002447" strokeLinejoin="round" strokeWidth={3}>
       <path d="M10.308 5L18 17.5 10.308 30 2.615 17.5 10.308 5z" />
       <path d="M18 17.5L10.308 5h15.144l7.933 12.5M18 17.5h15.385L25.452 30H10.308L18 17.5z" />
     </g>

components/PrimaryNavigation.jsx

@@ -63,15 +63,15 @@ export function PrimaryNavigation({ navigation }) {
                         <li className="row-span-3" key={sublink.id}>
                           <NavigationMenuLink asChild>
                             <Link
-                              className="flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                              className="flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md text-accent-foreground"
                               href={sublink.href}
                               target={sublink?.target ?? null}
                             >
                               {/* <Icons.logo className="h-6 w-6" /> */}
                               <div className="mb-2 mt-4 text-lg font-medium">
                                 {sublink?.label}
                               </div>
-                              <p className="text-sm leading-tight text-muted-foreground">
+                              <p className="text-sm leading-tight text-popover-foreground">
                                 {sublink.menuItemMeta?.description}
                               </p>
                             </Link>
@@ -86,6 +86,7 @@ export function PrimaryNavigation({ navigation }) {
                             href={sublink.href}
                             target={sublink?.target ?? null}
                             title={sublink.label}
+                            className="text-accent-foreground"
                           >
                             {sublink.menuItemMeta?.description}
                           </ListItem>

components/SiteHeader.jsx

@@ -33,16 +33,16 @@ export function SiteHeader({ navigation, isNoticeVisible = false }) {
         headerTopPosition,
         'z-40 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
         isScrolled
-          ? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
-          : 'dark:bg-slate-900',
+          ? 'dark:bg-navy/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-navy/75'
+          : 'dark:bg-navy',
       )}
     >
       <div className="mr-6 flex lg:hidden">
         <MobileNavigation navigation={navigation} />
       </div>
       <div className="relative flex grow basis-0 items-center gap-4">
         <Link href="/" aria-label="Home page" className='shrink-0'>
-          <Logo className="h-5 w-auto rounded-md bg-slate-900/95 fill-slate-700 p-1 dark:fill-sky-100 md:block lg:block lg:h-9" />
+          <Logo className="h-5 w-auto rounded-md bg-gradient-power dark:bg-none fill-slate-700 p-1 dark:fill-sky-100 md:block lg:block lg:h-9" />
         </Link>
         <div className="hidden lg:block">
           <PrimaryNavigation navigation={navigation} />

components/ui/badge.tsx

@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+          'border-transparent bg-primary dark:bg-slate-900 dark:text-white text-primary-foreground hover:bg-primary/80',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:

components/ui/navigation-menu.tsx

@@ -86,7 +86,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn('absolute left-0 top-full flex justify-center')}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-accent-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
         className,
       )}
       ref={ref}

pages/_document.js

@@ -4,7 +4,7 @@ export default function Document() {
   return (
     <Html className="antialiased [font-feature-settings:'ss01']" lang="en">
       <Head />
-      <body className="bg-white dark:bg-slate-900">
+      <body className="bg-white dark:bg-navy font-inter">
         <Main />
         <NextScript />
       </body>

styles/tailwind.css

@@ -21,70 +21,70 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
+    --muted-foreground: 215.4 10% 45%;
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 47.4% 11.2%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 47.4% 11.2%;
- 
+
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 100% 50%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 215 20.2% 65.1%;
- 
+
     --radius: 0.5rem;
   }
- 
+
 [data-theme='dark'] {
     --background: 224 71% 4%;
     --foreground: 213 31% 91%;
- 
+
     --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
- 
-    --popover: 224 71% 4%;
+    --muted-foreground: 215.4 10% 75%;
+
+    --popover: 222 47% 11%;
     --popover-foreground: 215 20.2% 65.1%;
- 
+
     --card: 224 71% 4%;
     --card-foreground: 213 31% 91%;
- 
+
     --border: 216 34% 17%;
     --input: 216 34% 17%;
- 
-    --primary: 210 40% 98%;
+
+    --primary: 210 100% 14%;
     --primary-foreground: 222.2 47.4% 1.2%;
- 
+
     --secondary: 222.2 47.4% 11.2%;
     --secondary-foreground: 210 40% 98%;
- 
-    --accent: 216 34% 17%;
+
+    --accent: 210 100% 42%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 63% 31%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 216 34% 17%;
- 
+
     --radius: 0.5rem;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
@@ -96,4 +96,49 @@
   [inert] ::-webkit-scrollbar {
     display: none;
   }
-}
+}
+
+@font-face {
+    font-family: 'Lora';
+    src: url('/fonts/lora/Lora-VariableFont_wght.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Inter';
+    src: url('/fonts/inter/InterVariable.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+h1, h2 {
+    font-family: 'Lora', serif;
+}
+
+/* Regular buttons */
+.btn-primary {
+    @apply mt-8 bg-blue text-white border border-transparent rounded-full shadow px-5 py-3 inline-flex items-center text-base font-medium hover:bg-blue-500 hover:shadow-lg transition-all duration-300;
+}
+
+.btn-secondary {
+    @apply mt-8 border-2 dark:text-white dark:border-white border-navy text-navy bg-transparent rounded-full shadow px-5 py-3 inline-flex items-center text-base font-medium hover:bg-navy hover:text-white hover:shadow-lg dark:hover:bg-white dark:hover:text-navy duration-300;
+}
+
+/* Small buttons */
+.btn-primary-sm {
+    @apply mt-8 bg-blue text-white border border-transparent rounded-full shadow px-3 py-2 inline-flex items-center text-sm font-medium hover:bg-blue-600 hover:shadow-lg transition-all duration-300;
+}
+
+.btn-secondary-sm {
+    @apply mt-8 border-2 border-navy text-navy bg-transparent rounded-full shadow px-3 py-2 inline-flex items-center text-sm font-medium hover:bg-navy hover:text-white hover:shadow-lg transition-all duration-300;
+}
+
+.subtitle {
+    @apply text-base font-semibold tracking-wider text-purple-600 dark:text-purple-400 uppercase;
+}
+
+/* Apply margin left to all adjacent "buttons", excluding the first button */
+[class*='btn-'] + [class*='btn-'] {
+    @apply ml-4;
+}