diff --git a/components/Button.jsx b/components/Button.jsx index 3c36278..c203253 100644 --- a/components/Button.jsx +++ b/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 }) { diff --git a/components/DocsSidebarNavigation.jsx b/components/DocsSidebarNavigation.jsx index 243d8ed..f583256 100644 --- a/components/DocsSidebarNavigation.jsx +++ b/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 }) {
  • {link.title} diff --git a/components/FeatureTabsLeft.jsx b/components/FeatureTabsLeft.jsx index 51090d4..01534c5 100644 --- a/components/FeatureTabsLeft.jsx +++ b/components/FeatureTabsLeft.jsx @@ -30,7 +30,7 @@ const FeatureTabsLeft = (layout) => {
    @@ -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', )} >

    @@ -93,7 +93,7 @@ const FeatureTabsLeft = (layout) => { {features.map((feature) => (
    -
    +

    {feature.featureDescription}

    diff --git a/components/FeatureTabsTop.jsx b/components/FeatureTabsTop.jsx index 57faa19..0ac653b 100644 --- a/components/FeatureTabsTop.jsx +++ b/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 }) { /> ))} - +
    {features.map((feature, featureIndex) => ( {

    {feature.name}

    -

    - {feature.description} -

    +
    diff --git a/components/HomepageLayoutsLayoutsFaqsLayout.jsx b/components/HomepageLayoutsLayoutsFaqsLayout.jsx index 2b12135..8230666 100644 --- a/components/HomepageLayoutsLayoutsFaqsLayout.jsx +++ b/components/HomepageLayoutsLayoutsFaqsLayout.jsx @@ -28,7 +28,7 @@ const HomepageLayoutsLayoutsFaqsLayout = ({ title, description, questions }) =>
    diff --git a/components/HomepageLayoutsLayoutsHeroLayout.jsx b/components/HomepageLayoutsLayoutsHeroLayout.jsx index 370afc6..38e24f5 100644 --- a/components/HomepageLayoutsLayoutsHeroLayout.jsx +++ b/components/HomepageLayoutsLayoutsHeroLayout.jsx @@ -18,13 +18,13 @@ function TrafficLightsIcon(props) { const HomepageLayoutsLayoutsHeroLayout = (hero) => { return ( -
    +
    )} -
    -
    +
    +
    ) } @@ -149,13 +149,13 @@ function FieldTypeGrid({ fieldTypes }) { const HomepageLayoutsLayoutsSupportedFieldTypesLayout = (data) => { return (

    {data.title} diff --git a/components/Layout.jsx b/components/Layout.jsx index b9dda98..127f46f 100644 --- a/components/Layout.jsx +++ b/components/Layout.jsx @@ -135,7 +135,7 @@ export function Layout({ node, children, toc, title }) {
    -
    +
    + diff --git a/components/PrimaryNavigation.jsx b/components/PrimaryNavigation.jsx index 2de4c41..1599612 100644 --- a/components/PrimaryNavigation.jsx +++ b/components/PrimaryNavigation.jsx @@ -63,7 +63,7 @@ export function PrimaryNavigation({ navigation }) {
  • @@ -71,7 +71,7 @@ export function PrimaryNavigation({ navigation }) {
    {sublink?.label}
    -

    +

    {sublink.menuItemMeta?.description}

    @@ -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} diff --git a/components/SiteHeader.jsx b/components/SiteHeader.jsx index 9a465d8..302c819 100644 --- a/components/SiteHeader.jsx +++ b/components/SiteHeader.jsx @@ -33,8 +33,8 @@ 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', )} >
    @@ -42,7 +42,7 @@ export function SiteHeader({ navigation, isNoticeVisible = false }) {
    - +
    diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx index 0fe3291..9fa9d32 100644 --- a/components/ui/badge.tsx +++ b/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: diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx index 154ba3a..b1a900c 100644 --- a/components/ui/navigation-menu.tsx +++ b/components/ui/navigation-menu.tsx @@ -86,7 +86,7 @@ const NavigationMenuViewport = React.forwardRef<
    - +
    diff --git a/public/fonts/inter/InterVariable-Italic.ttf b/public/fonts/inter/InterVariable-Italic.ttf new file mode 100644 index 0000000..ed674e7 Binary files /dev/null and b/public/fonts/inter/InterVariable-Italic.ttf differ diff --git a/public/fonts/inter/InterVariable.ttf b/public/fonts/inter/InterVariable.ttf new file mode 100644 index 0000000..2d4b470 Binary files /dev/null and b/public/fonts/inter/InterVariable.ttf differ diff --git a/public/fonts/lora/Lora-Italic-VariableFont_wght.ttf b/public/fonts/lora/Lora-Italic-VariableFont_wght.ttf new file mode 100644 index 0000000..05cbde2 Binary files /dev/null and b/public/fonts/lora/Lora-Italic-VariableFont_wght.ttf differ diff --git a/public/fonts/lora/Lora-VariableFont_wght.ttf b/public/fonts/lora/Lora-VariableFont_wght.ttf new file mode 100644 index 0000000..b23ea94 Binary files /dev/null and b/public/fonts/lora/Lora-VariableFont_wght.ttf differ diff --git a/styles/tailwind.css b/styles/tailwind.css index 0c2a9f2..4bbac58 100644 --- a/styles/tailwind.css +++ b/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; } -} \ No newline at end of file +} + +@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; +} diff --git a/tailwind.config.js b/tailwind.config.js index 55f83d4..9301598 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -39,7 +39,8 @@ module.exports = { extend: { fontFamily: { sans: ['Inter', ...defaultTheme.fontFamily.sans], - display: ['Lexend', ...defaultTheme.fontFamily.sans], + serif: ['Lora', ...defaultTheme.fontFamily.serif], + display: ['Lora', ...defaultTheme.fontFamily.sans], }, colors: { 'wp-primary': 'var(--wp--preset--color--primary)', @@ -79,7 +80,77 @@ module.exports = { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))', }, + teal: { + DEFAULT: '#0ECAD4', + light: '#5EDCE2', + lightest: '#E7FAFB', + dark: '#0CA8B1', + }, + blue: { + DEFAULT: '#006BD6', + dark: '#00366B', + light: '#D5E6F8', + }, + navy: { + DEFAULT: '#002447', + }, + purple: { + DEFAULT: '#7A45E5', + light: '#E9E0FB', + }, + green: { + DEFAULT: '#039B5C', + light: '#D3F3E2', + }, + yellow: { + DEFAULT: '#FFC34E', + light: '#FFF9ED', + }, + orange: { + DEFAULT: '#FF6119', + light: '#FFE5D9', + }, + red: { + DEFAULT: '#DD1243', + }, + lightGray: { + DEFAULT: '#F4F5F6', + }, + mediumGray: { + DEFAULT: '#5B6C74', + }, + darkGray: { + DEFAULT: '#1F2426', + }, + gradients: { + center: ['#5EDCE2', '#0CA8B1'], + power: ['#0ECAD4', '#006BD6'], + build: ['#0ECAD4', '#7A45E5'], + grow: ['#0ECAD4', '#039B5C'], + elevate: ['#0ECAD4', '#00366B'], + spark: ['#FFC34E', '#FF6119'], + centerLight: ['#E7FAFB', '#D7F6F8'], + powerLight: ['#E7FAFB', '#D5E6F8'], + buildLight: ['#E7FAFB', '#E9E0FB'], + growLight: ['#E7FAFB', '#D3F3E2'], + elevateLight: ['#E7FAFB', '#F5F6F7'], + sparkLight: ['#FFF9ED', '#FFE5D9'], + }, }, + backgroundImage: theme => ({ + 'gradient-center': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.center[0]')}, ${theme('colors.gradients.center[1]')})`, + 'gradient-power': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.power[0]')}, ${theme('colors.gradients.power[1]')})`, + 'gradient-build': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.build[0]')}, ${theme('colors.gradients.build[1]')})`, + 'gradient-grow': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.grow[0]')}, ${theme('colors.gradients.grow[1]')})`, + 'gradient-elevate': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.elevate[0]')}, ${theme('colors.gradients.elevate[1]')})`, + 'gradient-spark': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.spark[0]')}, ${theme('colors.gradients.spark[1]')})`, + 'gradient-center-light': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.centerLight[0]')}, ${theme('colors.gradients.centerLight[1]')})`, + 'gradient-power-light': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.powerLight[0]')}, ${theme('colors.gradients.powerLight[1]')})`, + 'gradient-build-light': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.buildLight[0]')}, ${theme('colors.gradients.buildLight[1]')})`, + 'gradient-grow-light': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.growLight[0]')}, ${theme('colors.gradients.growLight[1]')})`, + 'gradient-elevate-light': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.elevateLight[0]')}, ${theme('colors.gradients.elevateLight[1]')})`, + 'gradient-spark-light': `radial-gradient(circle at -100% -200%, ${theme('colors.gradients.sparkLight[0]')}, ${theme('colors.gradients.sparkLight[1]')})`, + }), fontSize: { 'wp-small': 'var(--wp--preset--font-size--small)', 'wp-medium': 'var(--wp--preset--font-size--medium)',