New website for 2024

deploy.ts

@@ -16,7 +16,7 @@ dotenv.config();
 const count = getAccountCount();
 console.log(`Found ${count} accounts. Deploying...`);
 
-for (let i = 2; i <= count; i++) {
+for (let i = 1; i <= count; i++) {
   for (const region of getRegions()) {
     setEnvForKey(i);
     console.log(`Deploying to ${region} in account ${i}`);

icons/PrivateContributionsIcon.tsx

@@ -1,23 +1,9 @@
 import type { SVGProps } from "react";
 export const PrivateContributionsIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 22 22"
-    height={22}
-    width={22}
-    fill="none"
-    {...props}
-  >
-    <g clipPath="url(#a)">
-      <path
-        fill="#507EFF"
-        d="M17.355 10.086a6.422 6.422 0 0 0-6.352-5.5 6.422 6.422 0 0 0-6.353 5.5H1.836v1.833H4.65a6.422 6.422 0 0 0 6.353 5.5 6.422 6.422 0 0 0 6.352-5.5h2.814v-1.833h-2.814Zm-3.602 3.208a.92.92 0 0 1-.917.917H9.169a.92.92 0 0 1-.916-.917v-2.75a.92.92 0 0 1 .916-.916V8.71a1.833 1.833 0 0 1 2.145-1.806c.899.147 1.522.99 1.522 1.907v.816a.92.92 0 0 1 .917.916v2.75ZM11.69 11.92a.693.693 0 0 1-.687.688.693.693 0 0 1-.688-.688c0-.376.312-.687.688-.687.375 0 .687.311.687.687Zm.23-3.208v.917h-1.834V8.71a.92.92 0 0 1 .917-.917.92.92 0 0 1 .916.917Z"
-      />
-    </g>
-    <defs>
-      <clipPath id="a">
-        <path fill="#fff" d="M0 0h22v22H0z" />
-      </clipPath>
-    </defs>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
+    <path
+      fill="white"
+      d="M144 144c0-44.2 35.8-80 80-80c31.9 0 59.4 18.6 72.3 45.7c7.6 16 26.7 22.8 42.6 15.2s22.8-26.7 15.2-42.6C331 33.7 281.5 0 224 0C144.5 0 80 64.5 80 144l0 48-16 0c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-240 0 0-48z"
+    />
   </svg>
 );

icons/UserIcon.tsx

@@ -7,7 +7,7 @@ export const UserIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   >
     <path
       d="M5.80469 5.07031C5.80469 6.87937 7.27688 8.35156 9.08594 8.35156C10.895 8.35156 12.3672 6.87937 12.3672 5.07031C12.3672 3.26125 10.895 1.78906 9.08594 1.78906C7.27688 1.78906 5.80469 3.26125 5.80469 5.07031ZM14.9193 15.6432H15.6484V14.9141C15.6484 12.1002 13.3581 9.8099 10.5443 9.8099H7.6276C4.81302 9.8099 2.52344 12.1002 2.52344 14.9141V15.6432H14.9193Z"
-      fill="currentColor"
+      fill="white"
     />
   </svg>
 );

vite/About/About.tsx

@@ -1,5 +1,4 @@
 import { YEAR_TO_REVIEW } from "../../src/helpers/year";
-import { Stars } from "../Home/Stars";
 import { RadialGradient } from "../RadialGradient";
 import { AboutItem } from "./AboutItem";
 import { DesktopHeader } from "./DesktopHeader";
@@ -16,7 +15,6 @@ const About = () => {
   return (
     <div className={styles.wrapper}>
       <RadialGradient />
-      <Stars />
       <div className={styles.contentWrapper}>
         <MobileHeader {...headerProps} />
         <DesktopHeader {...headerProps} />

vite/About/AboutItem.tsx

@@ -1,16 +1,23 @@
+import { Box, BoxInner } from "../Box/Box";
 import type { AboutItemContent } from "./content";
 import styles from "./styles.module.css";
 
 export const AboutItem: React.FC<{ item: AboutItemContent }> = ({ item }) => {
   return (
-    <div className={styles.aboutItem}>
-      <div className={styles.aboutItemTitleRow}>
-        {item.icon && <img src={item.icon} />}
-        {item.step && <h4 className={styles.aboutItemTitle}>{item.step}.</h4>}
-        <h4 className={styles.aboutItemTitle}>{item.title}</h4>
-      </div>
-      {item.description && <p>{item.description}</p>}
-      {item.node}
-    </div>
+    <Box>
+      <BoxInner>
+        <div className={styles.aboutItem}>
+          <div className={styles.aboutItemTitleRow}>
+            {item.icon && <img src={item.icon} />}
+            {item.step && (
+              <h4 className={styles.aboutItemTitle}>{item.step}.</h4>
+            )}
+            <h4 className={styles.aboutItemTitle}>{item.title}</h4>
+          </div>
+          {item.description && <p>{item.description}</p>}
+          {item.node}
+        </div>
+      </BoxInner>
+    </Box>
   );
 };

vite/About/content.tsx

@@ -178,7 +178,6 @@ export const content: Array<AboutItemContent> = [
         {YEAR_TO_REVIEW}?
         <br />
         <br />
-        <strong>Developers</strong>: <br />
         Check out{" "}
         <a className={styles.aboutLink} href="https://www.remotion.dev">
           Remotion

vite/About/styles.module.css

@@ -32,8 +32,6 @@
 }
 
 .aboutDescription {
-  color: #ebeaee;
-
   font-family: Mona Sans;
   font-size: 16px;
   font-style: normal;
@@ -49,8 +47,7 @@
   align-items: flex-start;
   gap: 24px;
   border-radius: 8px;
-  border: 2px solid #20222f;
-  background: #171823;
+  background: var(--pane-bg);
   font-weight: 500;
   @media only screen and (min-width: 40em) {
     padding: 32px;
@@ -62,7 +59,7 @@
 }
 
 .aboutItemTitle {
-  color: white;
+  color: var(--pane-text);
   font-size: 20px;
   font-weight: 600;
   line-height: normal;

vite/Box/Box.tsx

@@ -13,3 +13,9 @@ export const Box: React.FC<{
     </div>
   );
 };
+
+export const BoxInner: React.FC<{
+  readonly children: React.ReactNode;
+}> = ({ children }) => {
+  return <div className={styles.boxinner}>{children}</div>;
+};

vite/Box/styles.module.css

@@ -1,12 +1,18 @@
 .box {
-  background: #191c29eb;
-  border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(5px);
-  overflow: visible;
   width: calc(100% - 24px);
   max-width: 1000px;
-  border-radius: 10px;
+  border-radius: 25px;
   height: fit-content;
+  padding: 15px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--pane-text);
+}
+
+.boxinner {
+  background: var(--pane-bg);
+  border-radius: 10px;
 }
 
 /*
@@ -15,10 +21,9 @@
 
 .headerTopContainer {
   display: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 8px 6px;
+  padding: 0px 0px;
+  padding-bottom: 12px;
   align-items: center;
-  background: rgba(255, 255, 255, 0.03);
 
   @media only screen and (min-width: 40em) {
     display: flex;

vite/Button/styles.module.css

@@ -38,7 +38,7 @@
   font-weight: bold;
   appearance: none;
   cursor: pointer;
-  color: rgb(165, 198, 227);
+  color: var(--pane-text);
 }
 
 .invalidInput {