Theme implementation which does not rely on the Chakra Container component, which is for contianing width (and buggy). Last commit before pulling in latest to resolve merge confilicts, and continue to fix the survey pages.

2026-09-11 11:50:17 +08:00 · 2023-01-01 23:12:37 -08:00
parent 6299f3673e
commit 97625a8398
14 changed files with 161 additions and 82 deletions
@@ -1,13 +1,13 @@
-import { Container } from "@chakra-ui/react";
+

 export function AuthLayout({ children }) {
  return (
-    <Container className="flex items-center justify-center sm:py-4 subpixel-antialiased">
+    <div className="flex items-center justify-center sm:py-4 subpixel-antialiased">
      <div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
        <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-4">
          {children}
        </div>
      </div>
-    </Container>
+    </div>
  );
 }
@@ -1,16 +1,51 @@
-import { CircleBackground } from "./CircleBackground";
+import { useId } from "react";
+import { useColorMode } from "@chakra-ui/react";
 import { Container } from "./Container";

-export function CallToAction() {
+
+function CircleBackground({ width = 558, height = 558, ...props }) {
+  const id = useId();
+
+  const { colorMode } = useColorMode();
+  const baseRingColor = colorMode === "light" ? "#777" : "#000";
+  const gradStopColor = colorMode === "light" ? "#fff" : "#000";
+
  return (
-    <section id="join-us" className="relative overflow-hidden bg-gray-900 py-20 sm:py-28">
+    <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={gradStopColor} />
+          <stop offset="1" stopColor={baseRingColor} 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={baseRingColor}
+      />
+      <path d="M1 279C1 125.465 125.465 1 279 1" stroke={`url(#${id})`} strokeLinecap="round" />
+    </svg>
+  );
+}
+
+
+export function CallToAction() {
+
+  const { colorMode } = useColorMode();
+  const bgColorClass = colorMode === "light" ? "bg-gray-900" : "bg-gray-50";
+  const headingColorClass = colorMode === "light" ? "text-white" : "text-black";
+  const textColorClass = colorMode === "light" ? "text-gray-300" : "text-black";
+  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
+
+  return (
+    <section id="join-us" className={`relative overflow-hidden py-20 sm:py-28 ${bgColorClass} ${textColorClass}`}>
      <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" />
+        <CircleBackground 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">
+          <h2 className={`text-3xl font-medium tracking-tight sm:text-4xl ${headingColorClass}`}>Join Us</h2>
+          <p className="mt-4 text-lg">
            All open source projects begin with people like you. Open source is the belief that if we collaborate we can
            together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us
            here:
@@ -1,22 +0,0 @@
-import { useId } from "react";
-
-export function CircleBackground({ color, width = 558, height = 558, ...props }) {
-  const 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>
-  );
-}
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { useColorMode } from "@chakra-ui/react";

 import { Container } from "./Container";

@@ -27,11 +27,20 @@ const faqs = [
 ];

 export function Faq() {
+
+  const { colorMode } = useColorMode();
+  const bgColorClass = colorMode === "light" ? "bg-gray-900" : "bg-gray-50";
+  
+  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
+
+  const headingColorClass = colorMode === "light" ? "text-gray-900" : "text-white";
+  const textColorClass = colorMode === "light" ? "text-gray-700" : "text-gray-100";
+
  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">
+          <h2 id="faqs-title" className={`text-3xl font-medium tracking-tight ${headingColorClass}`}>
            Frequently Asked Questions
          </h2>
          {/* <p className="mt-2 text-lg text-gray-600">
@@ -54,8 +63,8 @@ export function Faq() {
              <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>
+                    <h3 className={`text-lg font-semibold leading-6 ${headingColorClass}`}>{faq.question}</h3>
+                    <p className={`mt-4 text-sm ${textColorClass}`}>{faq.answer}</p>
                  </li>
                ))}
              </ul>
@@ -1,12 +1,15 @@
 import Image from "next/image";
 import Link from "next/link";
-
-import { Container, Text, useColorModeValue } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";

 export function Footer() {
+  const { colorMode } = useColorMode();
+  const bgColorClass = colorMode === "light" ? "bg-transparent" : "bg-gray-800";
+  const borderClass = colorMode === "light" ? "border-slate-200" : "border-gray-900";
+
  return (
-    <footer>
-      <Container className="flex justify-evenly py-10 px-10 border-t">
+    <footer className={bgColorClass}>
+      <div className={`flex justify-evenly py-10 px-10 border-t ${borderClass}`}>
        <div className="flex items-center pr-8">
          <Link href="/" aria-label="Home" className="flex items-center">
            <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
@@ -66,7 +69,7 @@ export function Footer() {
            </div>
          </div>
        </nav>
-      </Container>
+      </div>
    </footer>
  );
 }
@@ -1,4 +1,4 @@
-import { Button, Container, Box } from "@chakra-ui/react";
+import { Button, Box } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
@@ -56,8 +56,7 @@ function AccountButton() {
 export function Header(props) {
  const borderClass = props.transparent ? "" : props.borderClass ?? "border-b border-gray-100";
  return (
-    <nav>
-      <Container>
+    <nav className="oa-basic-theme">
      <Box className={`flex mx-auto max-w-7xl justify-between py-8 px-10 ${borderClass}`}>
        <div className="relative z-10 flex items-center gap-16">
          <Link href="/" aria-label="Home" className="flex items-center">
@@ -118,7 +117,6 @@ export function Header(props) {
          <ColorModeIconToggle className="ml-5"/>
        </div>
      </Box>
-      </Container>
    </nav>
  );
 }
@@ -2,8 +2,21 @@ import { useState } from "react";
 import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";

+import { useColorMode } from "@chakra-ui/react";
+
+
 export function NavLinks(): JSX.Element {
  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const { colorMode } = useColorMode();
+
+
+  const linkColor = (colorMode === "light") ? 
+    "text-gray-700 hover:text-gray-900" :
+    "text-gray-50 hover:text-white";
+
+  const hoverBgColor = (colorMode === "light") ? 
+  "bg-gray-100" :
+  "bg-gray-800";

  return (
    <>
@@ -14,14 +27,14 @@ export function NavLinks(): JSX.Element {
        <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]"
+          className={`${linkColor} relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm transition-colors delay-150 hover:delay-[0ms]`}
          onMouseEnter={() => setHoveredIndex(index)}
          onMouseLeave={() => setHoveredIndex(null)}
        >
          <AnimatePresence>
            {hoveredIndex === index && (
              <motion.span
-                className="absolute inset-0 rounded-lg bg-gray-100"
+                className={`${hoverBgColor} absolute inset-0 rounded-lg`}
                layoutId="hoverBackground"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1, transition: { duration: 0.15 } }}
@@ -1,11 +1,16 @@
 import { useId } from "react";
 import Image from "next/image";
+import { useColorMode } from "@chakra-ui/react";

 import { Container } from "./Container";

 function BackgroundIllustration(props) {
  const id = useId();

+  const { colorMode } = useColorMode();
+  const baseRingColor = colorMode === "light" ? "#d4d4d4" : "#005a69";
+  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
+
  return (
    <div {...props}>
      <svg
@@ -16,14 +21,14 @@ function BackgroundIllustration(props) {
      >
        <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"
+          stroke={baseRingColor}
          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" />
+            <stop stopColor={gradStopColor} />
+            <stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
@@ -35,14 +40,14 @@ function BackgroundIllustration(props) {
      >
        <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"
+          stroke={baseRingColor}
          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" />
+            <stop stopColor={gradStopColor} />
+            <stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
@@ -51,17 +56,21 @@ function BackgroundIllustration(props) {
 }

 export function Hero() {
+  const { colorMode } = useColorMode();
+  const pTextColor = colorMode === "light" ? "text-gray-600" : "text-white";
+  const fancyTextGradientClasses = colorMode === "light" ? "from-blue-600 via-sky-400 to-blue-700" : "from-blue-500 via-sky-300 to-blue-400";
+  
  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">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">
+            <p className={`bg-gradient-to-r ${fancyTextGradientClasses} mt-8 text-3xl inline 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">
+            <p className={`mt-6 text-lg ${pTextColor}`}>We believe we can create a revolution.</p>
+            <p className={`mt-6 text-lg ${pTextColor}`}>
              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>