feat: darkmode, pinned resources, optimized UI

Closes SUP-2068
Closes SUP-2069
Closes SUP-2072
Closes SUP-2071

package.json

@@ -47,13 +47,15 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "@vercel/analytics": "^0.1.5",
     "aos": "3.0.0-beta.6",
     "lite-youtube-embed": "0.2.0",
     "next": "12.3.3",
     "next-gtag": "0.2.0",
     "next-image-export-optimizer": "0.17.1",
     "next-seo": "5.14.1",
+    "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "4.6.0",

src/components/Atom/Title.tsx

@@ -1,51 +1,32 @@
 import { PropsWithChildren } from "react";
+import { useTheme } from "next-themes";
 
 const AtomTitle = ({
   children,
   alignText = "left",
   inverted = false,
+  ignoreDarkMode = false,
   subtitle = "",
 }: PropsWithChildren<{
   alignText?: string;
   inverted?: boolean;
+  ignoreDarkMode?: boolean;
   subtitle?: string;
 }>) => {
-  const colorClass = inverted
-    ? "from-pink-50 to-pink-300"
-    : "from-pink-500 to-pink-900";
-  const subtitleColorClass = inverted ? "text-pink-50" : "text-pink-600";
-  const flexJustify =
-    alignText === "left"
-      ? "justify-start"
-      : alignText === "right"
-      ? "justify-end"
-      : "justify-center";
+  const { theme } = useTheme();
+  const invertedBasedOnTheme = ignoreDarkMode ? inverted : theme === "dark" ? !inverted : inverted;
+  const colorClass = invertedBasedOnTheme ? "from-pink-50 to-pink-300" : "from-pink-500 to-pink-900";
+  const subtitleColorClass = invertedBasedOnTheme ? "text-pink-50" : "text-pink-600";
+  const flexJustify = alignText === "left" ? "justify-start" : alignText === "right" ? "justify-end" : "justify-center";
   const alignTextClass = `text-${alignText}`;
   return (
-    <div
-      className={`${alignTextClass} mb-8 w-auto space-y-3 ${flexJustify}`}
-      data-aos="fade-up"
-      data-aos-delay="100"
-    >
-      <h2
-        className={`text-2xl font-extrabold tracking-tight md:max-w-full md:text-3xl ${alignTextClass}`}
-        data-aos="slide-up"
-      >
-        <span
-          className={`-mb-1 block bg-gradient-to-r pb-1 ${colorClass} relative bg-clip-text text-transparent`}
-        >
-          {children}
-        </span>
+    <div className={`${alignTextClass} mb-8 w-auto space-y-3 ${flexJustify}`} data-aos="fade-up" data-aos-delay="100">
+      <h2 className={`text-2xl font-extrabold tracking-tight md:max-w-full md:text-3xl ${alignTextClass}`} data-aos="slide-up">
+        <span className={`-mb-1 block bg-gradient-to-r pb-1 ${colorClass} relative bg-clip-text text-transparent`}>{children}</span>
       </h2>
-      {subtitle && (
-        <h3
-          className={`${alignTextClass} tracking-normal md:text-lg ${subtitleColorClass}`}
-        >
-          {subtitle}
-        </h3>
-      )}
+      {subtitle && <h3 className={`${alignTextClass} tracking-normal md:text-lg ${subtitleColorClass}`}>{subtitle}</h3>}
     </div>
   );
 };
 
-export default AtomTitle;
+export default AtomTitle;

src/components/Authors.tsx

@@ -35,12 +35,12 @@ export default function Authors() {
   ];
   return (
     <div
-      className="bg-gradient-to-t from-pink-50 py-16 text-center"
+      className="uiBlock lightBackground"
       id="authors"
     >
       <Container>
         <AtomTitle alignText="center">ERC-4626 AUTHORS</AtomTitle>
-        <div className="mt-8 flex flex-col items-start space-y-6 text-lg text-slate-700 md:flex-row md:flex-wrap md:items-center lg:justify-center xl:space-y-0">
+        <div className="mt-8 flex flex-col items-start space-y-6 text-lg text-slate-700 dark:text-zinc-100 md:flex-row md:flex-wrap md:items-center lg:justify-center xl:space-y-0">
           <div className="inline-flex h-full mb-1 md:mt-6 xl:mt-0 md:mb-0">ERC-4626 was authored by:</div>
           {authorList.map(
             (
@@ -56,7 +56,7 @@ export default function Authors() {
                 target="_blank"
                 rel="nofollow noreferrer"
                 key={`author-${index}`}
-                className="group ml-4 inline-flex items-center space-x-1.5 font-semibold text-pink-700 underline decoration-from-font underline-offset-4 md:space-x-2 md:no-underline md:hover:text-pink-700 md:hover:underline"
+                className="group ml-4 inline-flex items-center space-x-1.5 font-semibold text-pink-700 dark:text-pink-400 underline decoration-from-font underline-offset-4 md:space-x-2 md:no-underline md:hover:text-pink-700 md:hover:underline"
               >
                 <span className="relative h-10 w-10 overflow-hidden rounded-full  ring-2 ring-transparent md:group-hover:ring-pink-700">
                   <img
@@ -76,4 +76,4 @@ export default function Authors() {
       </Container>
     </div>
   );
-}
+}

src/components/Block/About.tsx

@@ -3,28 +3,28 @@ import Container from "@/components/Container";
 import Image from "next/future/image";
 
 export default function About() {
-  return <div className="relative overflow-hidden bg-white">
+  return <div className="relative overflow-hidden uiBlock lightBackground">
     <div aria-hidden="true" className="absolute inset-x-0 top-4 h-48 " />
     <Container>
       <div className="mx-auto py-16 md:grid lg:grid-cols-12 lg:gap-20 lg:py-32">
         <div className="md:col-span-5 md:text-left" data-aos="fade-right">
           <AtomTitle>WHAT IS ERC-4626?</AtomTitle>
-          <p className="mb-4 text-lg leading-relaxed text-slate-700">
-            <code className="mr-1  select-none rounded-lg bg-pink-100 px-2 py-1">ERC-4626</code>
+          <p className="mb-4 text-lg leading-relaxed text-slate-700 dark:text-zinc-100">
+            <code className="mr-1 select-none whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1 dark:bg-pink-900">ERC-4626</code>
             is a tokenized vault standard. Vaults are smart contracts that take in token deposits and do something with those tokens to provide token rewards to the depositor.
           </p>
-          <p className="mb-4 text-lg leading-relaxed text-slate-700">
+          <p className="mb-4 text-lg leading-relaxed text-slate-700 dark:text-zinc-100">
             Standardizing vault implementations makes it easier for applications, plugins, and tools to integrate with vaults.
           </p>
-          <p className="mb-4 text-lg leading-relaxed text-slate-700">
+          <p className="mb-4 text-lg leading-relaxed text-slate-700 dark:text-zinc-100">
             Rather than building many custom adapters for each vault implementation, applications can easily build on top of any vault following the
-            <code className="mx-1 select-none whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1">ERC-4626</code>
+            <code className="mx-1 select-none whitespace-nowrap rounded-lg bg-pink-100 dark:bg-pink-900 px-2 py-1">ERC-4626</code>
             standard.
           </p>
-          <p className="text-lg leading-relaxed text-slate-700">
-            <code className="mr-1 select-none whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1">ERC-4626</code>
+          <p className="text-lg leading-relaxed text-slate-700 dark:text-zinc-100">
+            <code className="mr-1 select-none whitespace-nowrap rounded-lg bg-pink-100 dark:bg-pink-900 px-2 py-1">ERC-4626</code>
             is to vaults what
-            <code className="mx-1 select-none  whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1">ERC-721</code>
+            <code className="mx-1 select-none  whitespace-nowrap rounded-lg bg-pink-100 dark:bg-pink-900 px-2 py-1">ERC-721</code>
             is to NFTs.
           </p>
         </div>
@@ -36,7 +36,17 @@ export default function About() {
             width={823}
             height={370}
             loading="lazy"
-            className="w-full 2xl:h-full 2xl:w-auto"
+            className="w-full 2xl:h-full 2xl:w-auto dark:hidden"
+            alt="WHAT IS ERC-4626?"
+          />
+          <Image
+            priority={false}
+            unoptimized={true}
+            src="images/superCharged-dark.svg"
+            width={823}
+            height={370}
+            loading="lazy"
+            className="w-full 2xl:h-full 2xl:w-auto hidden dark:block"
             alt="WHAT IS ERC-4626?"
           />
         </div>
@@ -52,20 +62,30 @@ export default function About() {
               width={823}
               height={370}
               src="images/superRobust.svg"
-              className="w-full 2xl:h-full 2xl:w-auto"
+              className="w-full 2xl:h-full 2xl:w-auto dark:hidden"
+              alt="WHAT IS ERC-4626?"
+              loading="lazy"
+              unoptimized={true}
+            />
+            <Image
+              priority={false}
+              width={823}
+              height={370}
+              src="images/superRobust-dark.svg"
+              className="w-full 2xl:h-full 2xl:w-auto hidden dark:block"
               alt="WHAT IS ERC-4626?"
               loading="lazy"
               unoptimized={true}
             />
           </div>
           <div className="col-span-full row-span-1 md:col-span-5 md:row-auto md:mx-auto md:text-left" data-aos="fade-left">
             <AtomTitle>WHY ERC-4626?</AtomTitle>
-            <p className="mb-4 text-lg leading-relaxed text-slate-700">
+            <p className="mb-4 text-lg leading-relaxed text-slate-700 dark:text-zinc-100">
               A lack of standardization for tokenized vaults makes integration and composability difficult. Lending markets, aggregators, and other interest-bearing tokens all
               might use a vault standard – without a standard implementation, each protocol needs to implement their own adapter, leading to more errors, more attack vectors, and
               wasted development resources
             </p>
-            <p className="mb-4 text-lg leading-relaxed text-slate-700">
+            <p className="mb-4 text-lg leading-relaxed text-slate-700 dark:text-zinc-100">
               A standard for tokenized vaults will lower the integration effort for yield-bearing vaults, while creating more consistent and robust implementation patterns.
             </p>
           </div>

src/components/Block/Alliance.tsx

@@ -14,34 +14,34 @@ function QuoteIcon(props: any) {
 
 export default function BlockAlliance() {
   return (
-    <section id="alliance" className="bg-gradient-to-r pb-1 from-pink-50 to-pink-300 py-16 mt-8 text-center">
+    <section id="alliance" className="bg-gradient-to-r pb-1 from-pink-100 to-pink-300 dark:from-pink-600 dark:to-pink-900 py-16 mt-8 text-center">
       <Container>
-        <div className="mx-auto max-w-5xl text-slate-700 md:text-center">
+        <div className="mx-auto max-w-5xl text-slate-700 dark:text-zinc-100 md:text-center">
           <AtomTitle alignText="center">4626 Alliance</AtomTitle>
           <p className="mu-4 text-xl leading-relaxed">
             <strong>The 4626 Alliance</strong> is a group of leading protocols and applications that share the mission of supporting the development and deployment of
-            <code className="mx-[2px]  select-none rounded-lg bg-pink-100 px-2 py-1">ERC-4626</code> vaults.
-            <code className="mx-[2px] select-none rounded-lg bg-pink-100 px-2 py-1">ERC-4626</code>
+            <code className="mx-[2px]  select-none rounded-lg bg-pink-100 dark:bg-pink-900 px-2 py-1">ERC-4626</code> vaults.
+            <code className="mx-[2px] select-none rounded-lg bg-pink-100 dark:bg-pink-900 px-2 py-1">ERC-4626</code>
             drastically simplifies the process of building cool and useful applications by decreasing the complexity of integration while improving UX and security.
           </p>
         </div>
         <ul role="list" className="mx-auto my-16 grid grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-4">
           {alliance.map((testimonial, testimonialIndex) => (
             <li key={testimonialIndex}>
-              <a href={testimonial.website} target="_blank" className="relative flex rounded-lg bg-white p-6 shadow-xl shadow-slate-900/10 lg:hover:bg-white/70" rel="noreferrer">
+              <a href={testimonial.website} target="_blank" className="relative flex rounded-lg bg-white dark:bg-zinc-700 p-6 shadow-xl shadow-slate-900/10 lg:hover:bg-white/70 dark:lg:hover:bg-zinc-700/70 transition-colors delay-75 ease-linear" rel="noreferrer">
                 <figure>
                   <QuoteIcon className="absolute top-6 left-6 fill-pink-100/40 group-hover:fill-white/70" />
                   <blockquote className="relative">
-                    <p className="text-right text-lg text-slate-700">{testimonial.content}</p>
+                    <p className="text-right text-lg text-slate-700 dark:text-zinc-100">{testimonial.content}</p>
                   </blockquote>
                   <figcaption className="relative mt-6 flex items-center justify-between border-t-[0.5px] border-pink-200 pt-6 text-left">
                     <div>
-                      <div className="mt-3 flex items-center whitespace-nowrap bg-gradient-to-r from-pink-500 to-pink-900 bg-clip-text text-2xl font-extrabold uppercase tracking-tight text-transparent">
+                      <div className="mt-3 flex items-center whitespace-nowrap bg-gradient-to-r from-pink-500 to-pink-900 dark:from-pink-50 dark:to-pink-300 bg-clip-text text-2xl font-extrabold uppercase tracking-tight text-transparent">
                         {testimonial.name}
                         <a
                           href={`https://twitter.com/${testimonial.twitter}`}
                           target="_blank"
-                          className="group ml-4 inline-flex items-center space-x-1.5 font-semibold text-pink-700 underline decoration-from-font underline-offset-4 md:space-x-2 md:no-underline md:hover:text-pink-700 md:hover:underline"
+                          className="group ml-4 inline-flex items-center space-x-1.5 font-semibold text-pink-700 dark:text-pink-100 underline decoration-from-font underline-offset-4 md:space-x-2 md:no-underline md:hover:text-pink-700 md:hover:underline"
                           rel="noreferrer"
                         >
                           <IoLogoTwitter className="h-[20px] w-auto md:opacity-25 md:group-hover:opacity-100" />
@@ -60,15 +60,15 @@ export default function BlockAlliance() {
         <div className="pb-8 flex flex-col items-center md:mt-8">
           <div className="py-16">
             <AtomTitle alignText="center">Funds Raised</AtomTitle>
-            <div className="text-xl leading-relaxed text-slate-700">The alliance contributes capital to advance the development of the ERC-4626 ecosystem</div>
-            <div className="text-4xl font-black mt-8 flex items-center justify-center whitespace-nowrap bg-gradient-to-bl from-pink-500 to-pink-900 bg-clip-text text-transparent">$15,000</div>
+            <div className="text-xl leading-relaxed text-slate-700 dark:text-zinc-100">The alliance contributes capital to advance the development of the ERC-4626 ecosystem</div>
+            <div className="text-4xl font-black mt-8 flex items-center justify-center whitespace-nowrap bg-gradient-to-bl from-pink-500 to-pink-900 dark:from-pink-100 dark:to-pink-300 bg-clip-text text-transparent">$15,000</div>
           </div>
 
           <a
             target="_blank"
             href="https://forms.gle/DsCsttsxBUYQTB9r6"
             rel="nofollow noreferrer"
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border-2 border-pink-700 px-8 py-5 text-xl font-medium text-pink-700 shadow-sm transition-all md:hover:bg-pink-700 md:hover:text-white md:hover:shadow-md"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border-2 border-pink-700 dark:border-pink-300 px-8 py-5 text-xl font-medium text-pink-700 dark:text-pink-300 shadow-sm transition-all md:hover:bg-pink-700 dark:md:hover:bg-pink-600 md:hover:text-white md:hover:shadow-md"
           >
             Join the Alliance
           </a>