Grading Page WIP & Homepage

2026-07-31 12:00:10 +08:00 · 2022-12-18 10:28:43 -08:00
parent 03879d2b34
commit a296f6ea99
50 changed files with 2801 additions and 407 deletions
@@ -0,0 +1,47 @@
+import Link from 'next/link'
+
+
+function BackgroundIllustration(props) {
+  return (
+    <svg
+      viewBox="0 0 1090 1090"
+      aria-hidden="true"
+      fill="none"
+      preserveAspectRatio="none"
+      {...props}
+    >
+      <circle cx={545} cy={545} r="544.5" />
+      <circle cx={545} cy={545} r="480.5" />
+      <circle cx={545} cy={545} r="416.5" />
+      <circle cx={545} cy={545} r="352.5" />
+    </svg>
+  )
+}
+
+export function AuthLayout({ title, subtitle, children }) {
+  return (
+    <main className="flex min-h-full overflow-hidden pt-16 sm:py-28">
+      <div className="mx-auto flex w-full max-w-2xl flex-col px-4 sm:px-6">
+        <Link href="/" aria-label="Home">
+          {/* logo */}
+        </Link>
+        <div className="relative mt-12 sm:mt-16">
+          <BackgroundIllustration
+            width="1090"
+            height="1090"
+            className="absolute -top-7 left-1/2 -z-10 h-[788px] -translate-x-1/2 stroke-gray-300/30 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:-top-9 sm:h-auto"
+          />
+          <h1 className="text-center text-2xl font-medium tracking-tight text-gray-900">
+            {title}
+          </h1>
+          {subtitle && (
+            <p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>
+          )}
+        </div>
+        <div className="-mx-4 mt-10 flex-auto bg-white py-10 px-4 shadow-2xl shadow-gray-900/10 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-24">
+          {children}
+        </div>
+      </div>
+    </main>
+  )
+}
@@ -0,0 +1,39 @@
+import { forwardRef } from 'react'
+import Link from 'next/link'
+import clsx from 'clsx'
+
+const baseStyles = {
+  solid:
+    'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors',
+  outline:
+    'inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm outline-2 outline-offset-2 transition-colors',
+}
+
+const variantStyles = {
+  solid: {
+    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
+    white:
+      'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
+    gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
+  },
+  outline: {
+    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+  },
+}
+
+export const Button = forwardRef(function Button(
+  { variant = 'solid', color = 'gray', className, href, ...props },
+  ref
+) {
+  className = clsx(
+    baseStyles[variant],
+    variantStyles[variant][color],
+    className
+  )
+
+  return href ? (
+    <Link ref={ref} href={href} className={className} {...props} />
+  ) : (
+    <button ref={ref} className={className} {...props} />
+  )
+})
@@ -0,0 +1,58 @@
+
+import { CircleBackground } from './CircleBackground'
+import { Container } from './Container'
+
+export function CallToAction() {
+  return (
+    <section
+      id="join-us"
+      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+    >
+      <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
+        <CircleBackground color="#fff" className="animate-spin-slower" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-md sm:text-center">
+          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
+            Join Us
+          </h2>
+          <p className="mt-4 text-lg text-gray-300">
+            All open source projects begin with people like you.
+            Open source is the belief that if we collaborate we can together
+            gift our knoweledge and technology to the world for the benefit
+            of humanity. Are you in? Find us here:
+          </p>
+          <div className="mt-8 flex justify-center">
+          
+          <a href="https://discord.gg/pXtnYk9c" target="_blank">
+            <button
+              type="button" 
+              className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" className="w-6 h-6">
+                <path fill="currentColor" d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/>
+              </svg>
+              <span className="text-lg ml-3">DISCORD</span>
+            </button>
+          </a>
+
+          <a href="https://github.com/LAION-AI/Open-Assistant" target="_blank">
+            <button
+              type="button" 
+              className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            >
+                <svg className="mr-2 -ml-1 w-6 h-6" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+                  <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
+                </svg>
+
+              <span className="text-lg ml-1">Github</span>
+            </button>
+          </a>
+
+
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}
@@ -0,0 +1,45 @@
+import { useId } from 'react'
+
+export function CircleBackground({
+  color,
+  width = 558,
+  height = 558,
+  ...props
+}) {
+  let id = useId()
+
+  return (
+    <svg
+      viewBox="0 0 558 558"
+      width={width}
+      height={height}
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <defs>
+        <linearGradient
+          id={id}
+          x1="79"
+          y1="16"
+          x2="105"
+          y2="237"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={color} />
+          <stop offset="1" stopColor={color} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path
+        opacity=".2"
+        d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
+        stroke={color}
+      />
+      <path
+        d="M1 279C1 125.465 125.465 1 279 1"
+        stroke={`url(#${id})`}
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
@@ -0,0 +1,10 @@
+import clsx from 'clsx'
+
+export function Container({ className, ...props }) {
+  return (
+    <div
+      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      {...props}
+    />
+  )
+}
@@ -0,0 +1,77 @@
+import Link from 'next/link'
+
+import { Container } from './Container'
+
+const faqs = [
+  [
+    {
+      question: 'How far along is this project?',
+      answer:
+        'We are in the early stages of development, working from established research in applying RLHF to large language models.',
+    },
+  ],
+  [
+    {
+      question: 'Who is behind Open Assistant?',
+      answer:
+        'Open Assistant is a project organized by LAION and individuals around the world interested in bringing this technology to everyone.',
+    },
+  ],
+  [
+    // {
+    //   question: 'Where can I learn more?',
+    //   answer:
+    //     'Please feel free to reach out to us on Discord. We are happy to answer any questions you may have.',
+    // },
+  ],
+]
+
+export function Faq() {
+  return (
+    <section
+      id="faq"
+      aria-labelledby="faqs-title"
+      className="border-t border-gray-200 py-20 sm:py-32"
+    >
+      <Container className="">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2
+            id="faqs-title"
+            className="text-3xl font-medium tracking-tight text-gray-900"
+          >
+            Frequently Asked Questions
+          </h2>
+          {/* <p className="mt-2 text-lg text-gray-600">
+            If you have anything else you want to ask,{' '}
+            <Link
+              href="mailto:info@open-assistant.tech"
+              className="text-gray-900 underline"
+            >
+              reach out to us
+            </Link>
+            .
+          </p> */}
+        </div>
+        <ul
+          role="list"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:max-w-none lg:grid-cols-3"
+        >
+          {faqs.map((column, columnIndex) => (
+            <li key={columnIndex}>
+              <ul role="list" className="space-y-10">
+                {column.map((faq, faqIndex) => (
+                  <li key={faqIndex}>
+                    <h3 className="text-lg font-semibold leading-6 text-gray-900">
+                      {faq.question}
+                    </h3>
+                    <p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </section>
+  )
+}
@@ -0,0 +1,33 @@
+import clsx from 'clsx'
+
+const formClasses =
+  'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm'
+
+function Label({ id, children }) {
+  return (
+    <label
+      htmlFor={id}
+      className="mb-2 block text-sm font-semibold text-gray-900"
+    >
+      {children}
+    </label>
+  )
+}
+
+export function TextField({ id, label, type = 'text', className, ...props }) {
+  return (
+    <div className={className}>
+      {label && <Label id={id}>{label}</Label>}
+      <input id={id} type={type} {...props} className={formClasses} />
+    </div>
+  )
+}
+
+export function SelectField({ id, label, className, ...props }) {
+  return (
+    <div className={className}>
+      {label && <Label id={id}>{label}</Label>}
+      <select id={id} {...props} className={clsx(formClasses, 'pr-8')} />
+    </div>
+  )
+}
@@ -0,0 +1,36 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+
+import { Container } from './Container'
+import { NavLinks } from './NavLinks'
+
+
+export function Footer() {
+  return (
+    <footer className="border-t border-gray-200">
+      <Container className="">
+        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-16">
+          <div>
+            <div className="flex items-center text-gray-900">
+            <Link href="/" aria-label="Home" className='flex items-center'>
+            <Image src="/images/logos/CHAT-THOUGHT-LOGO.svg" className="mx-auto object-fill" width="50" height="50" alt="logo"/>
+            
+            </Link>
+
+
+              <div className="ml-4">
+                <p className="text-base font-semibold">Open Assistant</p>
+                <p className="mt-1 text-sm">Conversational AI for everyone.</p>
+              </div>
+            </div>
+            <nav className="mt-11 flex gap-8">
+              {/* <NavLinks /> */}
+            </nav>
+          </div>
+
+        </div>
+      </Container>
+    </footer>
+  )
+}
@@ -0,0 +1,140 @@
+import Link from 'next/link'
+import { Popover } from '@headlessui/react'
+import { AnimatePresence, motion } from 'framer-motion'
+
+import { Container } from './Container'
+import Image from 'next/image'
+import { NavLinks } from './NavLinks'
+
+function MenuIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
+      <path
+        d="M5 6h14M5 18h14M5 12h14"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+function ChevronUpIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
+      <path
+        d="M17 14l-5-5-5 5"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+function MobileNavLink({ children, ...props }) {
+  return (
+    <Popover.Button
+      as={Link}
+      href={props.href}
+      className="block text-base leading-7 tracking-tight text-gray-700"
+      {...props}
+    >
+      {children}
+    </Popover.Button>
+  )
+}
+
+export function Header() {
+  return (
+    <header>
+      <nav>
+        <Container className="relative z-50 flex justify-between py-8">
+          <div className="relative z-10 flex items-center gap-16">
+            <Link href="/" aria-label="Home" className='flex items-center'>
+            <Image src="/images/logos/CHAT-THOUGHT-LOGO.svg" className="mx-auto object-fill" width="50" height="50" alt="logo"/>
+            <span className='text-2xl font-bold ml-3'>Open Assistant</span>
+            </Link>
+            <div className="hidden lg:flex lg:gap-10">
+              <NavLinks />
+            </div>
+          </div>
+          <div className="flex items-center gap-6">
+            <Popover className="lg:hidden">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
+                    aria-label="Toggle site navigation"
+                  >
+                    {({ open }) =>
+                      open ? (
+                        <ChevronUpIcon className="h-6 w-6" />
+                      ) : (
+                        <MenuIcon className="h-6 w-6" />
+                      )
+                    }
+                  </Popover.Button>
+                  <AnimatePresence initial={false}>
+                    {open && (
+                      <>
+                        <Popover.Overlay
+                          static
+                          as={motion.div}
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1 }}
+                          exit={{ opacity: 0 }}
+                          className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur"
+                        />
+                        <Popover.Panel
+                          static
+                          as={motion.div}
+                          initial={{ opacity: 0, y: -32 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{
+                            opacity: 0,
+                            y: -32,
+                            transition: { duration: 0.2 },
+                          }}
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
+                        >
+                          <div className="space-y-4">
+                            <MobileNavLink href="#join-us">
+                              Join Us
+                            </MobileNavLink>
+                            <MobileNavLink href="#faqs">FAQs</MobileNavLink>
+                          </div>
+                          <div className="mt-8 flex flex-col gap-4">
+
+                            <a href="/login">
+                              <button
+                                type="button"
+                                className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                              >
+                                Log in
+                              </button>
+                            </a>
+
+
+                          </div>
+                        </Popover.Panel>
+                      </>
+                    )}
+                  </AnimatePresence>
+                </>
+              )}
+            </Popover>
+            <a href="/login">
+              <button
+                type="button"
+                className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              >
+                Log in
+              </button>
+            </a>
+          </div>
+        </Container>
+      </nav>
+    </header>
+  )
+}
@@ -0,0 +1,109 @@
+import { useId } from 'react'
+import Image from 'next/image'
+
+import { Container } from './Container'
+
+function BackgroundIllustration(props) {
+  let id = useId()
+
+  return (
+    <div {...props}>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-slow"
+      >
+        <path
+          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M513 1025C230.23 1025 1 795.77 1 513"
+          stroke={`url(#${id}-gradient-1)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-1`}
+            x1="1"
+            y1="513"
+            x2="1"
+            y2="1025"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
+      >
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400"
+          stroke={`url(#${id}-gradient-2)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-2`}
+            x1="913"
+            y1="513"
+            x2="913"
+            y2="913"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  )
+}
+
+
+export function Hero() {
+  return (
+    <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
+      <Container className="">
+        <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
+          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
+            <h1 className="text-5xl mb-6 font-bold tracking-tight text-gray-900">
+              Open Assistant
+            </h1>
+            <p className="mt-8 text-3xl inline bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text font-display tracking-tight text-transparent">
+              <b>Conversational AI for everyone.</b>
+            </p>
+            <p className="mt-6 text-lg text-gray-600">
+              We believe we can create a revolution.
+            </p>
+            <p className="mt-6 text-lg text-gray-600">
+              In the same way that Stable Diffusion helped the world make art
+              and images in new ways, we want to improve
+              the world by providing amazing conversational AI.
+            </p>
+          </div>
+
+          <div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
+            <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/3 stroke-gray-300/70 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
+            <div className="-mx-4 h-[448px] px-9 [mask-image:linear-gradient(to_bottom,white_60%,transparent)] sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
+              <Image src="/images/logos/CHAT-THOUGHT-CONVO.svg" className="mx-auto mr-6 object-fill" width="450" height="450" alt={''}/>
+            </div>
+          </div>
+
+        </div>
+      </Container>
+    </div>
+  )
+}
@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import { AnimatePresence, motion } from 'framer-motion'
+
+export function NavLinks(): JSX.Element {
+  let [hoveredIndex, setHoveredIndex] = useState(null)
+
+  return <>
+  
+  {[
+    ['Join Us', '#join-us'],
+    ['FAQ', '#faq'],
+  ].map(([label, href], index) => (
+    <Link
+      key={label}
+      href={href}
+      className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
+      onMouseEnter={() => setHoveredIndex(index)}
+      onMouseLeave={() => setHoveredIndex(null)}
+    >
+      <AnimatePresence>
+        {hoveredIndex === index && (
+          <motion.span
+            className="absolute inset-0 rounded-lg bg-gray-100"
+            layoutId="hoverBackground"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1, transition: { duration: 0.15 } }}
+            exit={{
+              opacity: 0,
+              transition: { duration: 0.15, delay: 0.2 },
+            }}
+          />
+        )}
+      </AnimatePresence>
+      <span className="relative z-10">{label}</span>
+    </Link>
+  ))}
+</>
+
+}