solutions pages (supabase#36628)

* solutions: supabse for beginner

* solutions: supabse for beginner

* solutions: supabse for beginner

* solutions: supabse for beginner

* solutions: supabase for developers

* solutions: supabase for postgres developers

* solutions: supabase for no-coders

* solutions: no code builders

* solutions: sticky nav

* solutions pages

* fix metadata

* add ai prompts to no code page

* prerify

* Solutions dropdown nav

* update footer

* update mobile menu

* fix visual

* chore: add startups solution page

* chore: startups page

* chore: metadata

* chore: update solutions labels

* chore: remove old export

* fix footer links

Author: fsansalvadore

apps/www/components/CodeBlock/CodeBlock.tsx

@@ -9,10 +9,11 @@ import kotlin from 'react-syntax-highlighter/dist/cjs/languages/hljs/kotlin'
 import py from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'
 import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'
 import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml'
+import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json'
 import { Button, cn } from 'ui'
 import monokaiCustomTheme from './CodeBlock.utils'
 
-export type LANG = 'js' | 'sql' | 'py' | 'bash' | 'ts' | 'tsx' | 'kotlin' | 'yaml'
+export type LANG = 'js' | 'sql' | 'py' | 'bash' | 'ts' | 'tsx' | 'kotlin' | 'yaml' | 'json'
 export interface CodeBlockProps {
   lang: LANG
   startingLineNumber?: number
@@ -62,6 +63,7 @@ function CodeBlock(props: CodeBlockProps) {
   SyntaxHighlighter.registerLanguage('bash', bash)
   SyntaxHighlighter.registerLanguage('kotlin', kotlin)
   SyntaxHighlighter.registerLanguage('yaml', yaml)
+  SyntaxHighlighter.registerLanguage('json', json)
 
   // const large = props.size === 'large' ? true : false
   const large = false

apps/www/components/Enterprise/Security.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react'
-import type { LucideIcon } from 'lucide-react'
-
 import { TextLink } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 
-interface Props {
+import type { LucideIcon } from 'lucide-react'
+
+export interface SecuritySectionProps {
   id: string
   label: string | JSX.Element
   heading: string | JSX.Element
@@ -27,7 +27,7 @@ type FeatureProps = {
   heading: string
 }
 
-const EnterpriseSecurity: FC<Props> = (props) => {
+const EnterpriseSecurity: FC<SecuritySectionProps> = (props) => {
   return (
     <SectionContainer
       id={props.id}

apps/www/components/Footer/index.tsx

@@ -62,8 +62,8 @@ const Footer = (props: Props) => {
         <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent" />
       </div>
       <SectionContainer className="py-8">
-        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
-          <div className="space-y-8 xl:col-span-1">
+        <div className="xl:grid xl:grid-cols-7 xl:gap-4">
+          <div className="space-y-8 xl:col-span-2">
             <Link href="#" as="/" className="w-40">
               <Image
                 src={supabaseLogoWordmarkLight}
@@ -116,8 +116,8 @@ const Footer = (props: Props) => {
               </a>
             </div>
           </div>
-          <div className="mt-12 grid grid-cols-1 gap-8 xl:col-span-2 xl:mt-0">
-            <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
+          <div className="mt-12 grid grid-cols-1 gap-8 xl:col-span-5 xl:mt-0">
+            <div className="grid grid-cols-2 gap-4 md:grid-cols-5">
               {footerData.map((segment) => {
                 return (
                   <div key={`footer_${segment.title}`}>

apps/www/components/Hero/HeroFrameworks.tsx

@@ -97,11 +97,11 @@ const MobileMenu = ({ open, setOpen, menu }: Props) => {
           </Link>
         </>
       ) : menuItem.title === 'Developers' ? (
-        <div className="px-3 mb-2 flex flex-col gap-2">
+        <div className="px-3 mb-2 flex flex-col gap-6">
           {menuItem.subMenu['navigation'].map((column: any) => (
             <div key={column.label} className="flex flex-col gap-3">
               {column.label !== 'Developers' && (
-                <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono mt-4">
+                <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono">
                   {column.label}
                 </label>
               )}
@@ -136,6 +136,27 @@ const MobileMenu = ({ open, setOpen, menu }: Props) => {
             />
           </div>
         </div>
+      ) : menuItem.title === 'Solutions' ? (
+        <div className="px-3 mb-2 flex flex-col gap-6">
+          {menuItem.subMenu['navigation'].map((column: any) => (
+            <div key={column.label} className="flex flex-col gap-3">
+              {column.label !== 'Solutions' && (
+                <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono">
+                  {column.label}
+                </label>
+              )}
+              {column.links.map((link: any) => (
+                <TextLink
+                  hasChevron={false}
+                  key={link.text}
+                  url={link.url}
+                  label={link.text}
+                  className="focus-visible:ring-offset-4 focus-visible:ring-offset-background-overlay !mt-0"
+                />
+              ))}
+            </div>
+          ))}
+        </div>
       ) : null}
     </>
   )

apps/www/components/Nav/MobileMenu.tsx

@@ -9,11 +9,10 @@ import { TextLink } from 'ui'
 import { NavigationMenuLink } from 'ui/src/components/shadcn/ui/navigation-menu'
 import MenuItem from './MenuItem'
 
-import ComparisonsData from '~/data/Comparisons'
-import SolutionsData from '~/data/Solutions'
-import CustomersData from '~/data/CustomerStories'
-import MainProductsData from '~/data/MainProducts'
-import ProductModulesData from '~/data/ProductModules'
+import ComparisonsData from 'data/Comparisons'
+import CustomersData from 'data/CustomerStories'
+import MainProductsData from 'data/MainProducts'
+import ProductModulesData from 'data/ProductModules'
 
 const ProductDropdown = () => {
   const { basePath } = useRouter()
@@ -178,23 +177,6 @@ const ProductDropdown = () => {
               ))}
             </ul>
           </div>
-          <div className="col-span-2">
-            <p className="text-foreground-lighter text-xs uppercase tracking-widest font-mono mb-3">
-              {SolutionsData.label}
-            </p>
-            <ul className="flex flex-col gap-2">
-              {SolutionsData.solutions.map((link) => (
-                <li key={link.text}>
-                  <TextLink
-                    chevronAnimation="fadeIn"
-                    url={link.url}
-                    label={link.text}
-                    className="mt-0 hover:text-foreground focus-visible:text-foreground focus-visible:ring-offset-4 focus-visible:ring-offset-background-overlay"
-                  />
-                </li>
-              ))}
-            </ul>
-          </div>
         </div>
       </div>
     </div>

apps/www/components/Nav/ProductDropdown.tsx

@@ -0,0 +1,45 @@
+import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+import { navData as DevelopersData } from 'data/Solutions'
+
+type LinkProps = {
+  text: string
+  description?: string
+  url?: string
+  icon?: any
+  svg?: any
+}
+
+const SolutionsDropdown = () => (
+  <div className="flex flex-col xl:flex-row">
+    <div className="w-[550px] xl:w-[470px] py-8 px-8 bg-background grid gap-3 grid-cols-2">
+      {DevelopersData['navigation'].map((column) => (
+        <div key={column.label} className="p-0 flex flex-col gap-6">
+          <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono">
+            {column.label}
+          </label>
+          <ul className="flex flex-col gap-4">
+            {column.links.map(({ icon: Icon, ...link }: LinkProps) => (
+              <li key={link.text}>
+                <Link
+                  href={link.url!}
+                  className="flex group items-center gap-2 text-foreground-light text-sm hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-none focus-visible:rounded focus-visible:ring-foreground-lighter"
+                >
+                  {Icon && <Icon size={16} strokeWidth={1.3} />}
+                  <span>{link.text}</span>
+                  <ChevronRight
+                    strokeWidth={2}
+                    className="w-3 -ml-1 transition-all will-change-transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
+                  />
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  </div>
+)
+
+export default SolutionsDropdown

apps/www/components/Nav/SolutionsDropdown.tsx

@@ -25,7 +25,6 @@ import RightClickBrandLogo from './RightClickBrandLogo'
 import { useSendTelemetryEvent } from '~/lib/telemetry'
 import useDropdownMenu from './useDropdownMenu'
 import { AnnouncementBanner, AuthenticatedDropdownMenu } from 'ui-patterns'
-import Announcement from '../LaunchWeek/7/LaunchSection/Announcement'
 
 interface Props {
   hideNavbar: boolean

apps/www/components/Nav/index.tsx

@@ -30,7 +30,7 @@ const findIntanceValueByColumn = (instance: any, column: string) =>
 
 const parsePrice = (price: string) => parseInt(price?.toString().replace('$', '').replace(',', ''))
 
-const ComputePricingCalculator = () => {
+const ComputePricingCalculator = ({ disableInteractivity }: { disableInteractivity?: boolean }) => {
   const computeInstances = pricingAddOn.database.rows
   const priceSteps = computeInstances.map((instance) =>
     parsePrice(findIntanceValueByColumn(instance, 'pricing'))
@@ -290,12 +290,13 @@ const ComputePricingCalculator = () => {
             type="outline"
             block
             icon={<Plus />}
-            onClick={() =>
+            onClick={() => {
+              if (disableInteractivity) return
               setActiveInstances([
                 ...activeInstances,
                 { ...computeInstances[0], position: activeInstances.length },
               ])
-            }
+            }}
             className="w-full border-dashed text-foreground-light hover:text-foreground"
           >
             <span className="w-full text-left">Add Project</span>

apps/www/components/Pricing/ComputePricingCalculator.tsx

@@ -5,16 +5,17 @@ import { cn } from 'ui'
 
 interface Props {
   className?: string
+  hasGlow?: boolean
 }
 
-const DatabaseVisual: React.FC<Props> = ({ className }) => {
+const DatabaseVisual: React.FC<Props> = ({ className, hasGlow = true }) => {
   const containerRef = useRef(null)
   const ref = useRef(null)
   const [gradientPos, setGradientPos] = useState({ x: 0, y: 0 })
   const isSafari = isBrowser && detectBrowser() === 'Safari'
 
   const handleGlow = (event: any) => {
-    if (!ref.current || !containerRef.current) return null
+    if (!ref.current || !containerRef.current || !hasGlow) return null
 
     const containerRefElement = containerRef.current as HTMLDivElement
 
@@ -59,14 +60,15 @@ const DatabaseVisual: React.FC<Props> = ({ className }) => {
       role="img"
       aria-label="Supabase Postgres database visual composition"
     >
-      <span className="absolute w-full md:w-auto h-full md:aspect-square flex items-end md:items-center justify-center md:justify-end right-0 left-0 md:left-auto xl:-right-12 2xl:right-0 top-12 md:top-0 md:bottom-0 my-auto">
+      <span className="absolute group w-full md:w-auto h-full md:aspect-square flex items-end md:items-center justify-center md:justify-end right-0 left-0 md:left-auto xl:-right-12 2xl:right-0 top-12 md:top-0 md:bottom-0 my-auto">
         <Image
           src="/images/index/products/database-dark.png"
           alt="Supabase Postgres database"
           fill
           priority
           quality={100}
           sizes="100%"
+          draggable={false}
           className="hidden dark:block absolute antialiased inset-0 object-contain object-center z-0 w-full md:w-auto h-full transition-opacity group-hover:opacity-80"
         />
         <Image
@@ -75,6 +77,7 @@ const DatabaseVisual: React.FC<Props> = ({ className }) => {
           fill
           priority
           quality={100}
+          draggable={false}
           sizes="100%"
           className="dark:hidden absolute antialiased inset-0 object-contain object-center z-0 w-full md:w-auto h-full transition-opacity group-hover:opacity-80"
         />