landing page & color variables

docusaurus.ts

@@ -16,6 +16,16 @@ export const getConfig = (cfg: LttleDocusaurusConfig): Config => ({
   title: "lttle.cloud docs",
   tagline: "no rewrites. no cold starts. no paying for idle.",
   favicon: "img/favicon.ico",
+  customFields: {
+    brandTitleParts: {
+      lttle: "lttle",
+      dot: ".",
+      cloud: "cloud",
+      suffix: "docs",
+      taglineHtml:
+        "no rewrites.<br /> no cold starts.<br /> no paying for idle.",
+    },
+  },
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {

src/components/BrowserWindow/styles.module.css

@@ -68,7 +68,9 @@
   background-color: var(--ifm-background-color);
   color: var(--ifm-color-gray-800);
   padding: 5px 15px;
-  font: 400 13px Arial, sans-serif;
+  font:
+    400 13px Arial,
+    sans-serif;
   user-select: none;
 }
 

src/components/HomepageFeatures/index.tsx

@@ -9,61 +9,107 @@ type FeatureItem = {
   description: ReactNode;
 };
 
-const FeatureList: FeatureItem[] = [
+const FeatureList1: FeatureItem[] = [
   {
-    title: "Easy to Use",
-    Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
+    title: "lightweight",
+    Svg: require("@site/static/img/chunk/folder-open.svg").default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        lttle.cloud is designed to be lightweight and efficient, with a focus on
+        performance and scalability.
       </>
     ),
   },
   {
-    title: "Focus on What Matters",
-    Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
+    title: "open source",
+    Svg: require("@site/static/img/chunk/door-open.svg").default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        lttle.cloud is open source, and we&apos;re always looking for
+        contributions.
       </>
     ),
   },
   {
-    title: "Powered by React",
-    Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+    title: "simple",
+    Svg: require("@site/static/img/chunk/checkmark.svg").default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        lttle.cloud is designed to be simple and easy to use, with a focus on
+        usability and accessibility.
+      </>
+    ),
+  },
+];
+
+const FeatureList2: FeatureItem[] = [
+  {
+    title: "secure",
+    Svg: require("@site/static/img/chunk/shield-check.svg").default,
+    description: (
+      <>
+        lttle.cloud is designed to be secure and reliable, with a focus on
+        security and reliability.
+      </>
+    ),
+  },
+  {
+    title: "community",
+    Svg: require("@site/static/img/chunk/users.svg").default,
+    description: (
+      <>
+        lttle.cloud is designed to be high performance, with a focus on
+        performance and scalability.
+      </>
+    ),
+  },
+  {
+    title: "high performance",
+    Svg: require("@site/static/img/chunk/arrow-trend-up.svg").default,
+    description: (
+      <>
+        lttle.cloud is designed to be high performance, with a focus on
+        performance and scalability.
       </>
     ),
   },
 ];
 
 function Feature({ title, Svg, description }: FeatureItem) {
   return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h2">{title}</Heading>
-        <p>{description}</p>
-      </div>
+    <div className={styles.featureCard}>
+      <Svg className={styles.featureSvg} role="img" />
+      <Heading as="h2">{title}</Heading>
+      <p>{description}</p>
     </div>
   );
 }
 
 export default function HomepageFeatures(): ReactNode {
   return (
     <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
+      <div className={styles.featuresContainer}>
+        <div className={styles.featuresSection}>
+          <div className={styles.featuresHeader}>
+            <Heading as="h2">key features</Heading>
+            <p>grows with you, not against you</p>
+          </div>
+          <div className={styles.featuresRow}>
+            {FeatureList1.map((props, idx) => (
+              <Feature key={idx} {...props} />
+            ))}
+          </div>
+        </div>
+        <div className={styles.featuresSection}>
+          <div className={styles.featuresHeader}>
+            <Heading as="h2">why lttle.cloud</Heading>
+            <p>we keep things running, you keep moving</p>
+          </div>
+          <div className={styles.featuresRow}>
+            {FeatureList2.map((props, idx) => (
+              <Feature key={idx} {...props} />
+            ))}
+          </div>
         </div>
       </div>
     </section>

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,118 @@
 .features {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  padding: 2rem 0;
+
+  gap: 1rem;
+  padding: 4rem 0;
   width: 100%;
+  background-color: var(--ifm-landing-page-section-background-color);
+}
+
+.featuresContainer {
+  max-width: 1200px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+  padding: 0 1rem;
+}
+
+.featuresSection {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.featuresHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  text-align: center;
+
+  h2 {
+    font-size: 2.25rem;
+    margin: 0;
+    color: var(--ifm-font-color-base);
+  }
+
+  p {
+    font-size: 1rem;
+    margin: 0;
+    color: var(--ifm-font-color-secondary);
+    line-height: 1.2;
+  }
+}
+
+.featuresRow {
+  display: flex;
+  gap: 1rem;
+}
+
+.featureCard {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border-radius: 1rem;
+
+  box-shadow: var(--ifm-landing-page-feature-card-box-shadow);
+
+  background-color: var(--ifm-landing-page-feature-card-background-color);
+}
+
+.featureCard h2 {
+  font-size: 1.5rem;
+  margin: 0;
+  color: var(--ifm-font-color-base);
+}
+
+.featureCard p {
+  font-size: 1rem;
+  margin: 0;
+  color: var(--ifm-font-color-secondary);
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 64px;
+  width: 64px;
+}
+
+@media screen and (max-width: 768px) {
+  .features {
+    padding: 2rem 0;
+  }
+
+  .featuresHeader {
+    h2 {
+      font-size: 1.5rem;
+    }
+
+    p {
+      font-size: 0.875rem;
+    }
+  }
+
+  .featuresRow {
+    flex-direction: column;
+  }
+
+  .featureCard {
+    padding: 1rem;
+
+    h2 {
+      font-size: 1.25rem;
+    }
+
+    p {
+      font-size: 0.875rem;
+    }
+  }
+
+  .featureSvg {
+    height: 32px;
+    width: 32px;
+  }
 }

src/components/HomepageSocials/index.tsx

@@ -0,0 +1,60 @@
+import Heading from "@theme/Heading";
+import type { ReactNode } from "react";
+import styles from "./styles.module.css";
+import clsx from "clsx";
+
+type SocialItem = {
+  title: string;
+  Svg: React.ComponentType<React.ComponentProps<"svg">>;
+  href: string;
+};
+
+const socials: SocialItem[] = [
+  {
+    title: "GitHub",
+    Svg: require("@site/static/img/social-media/github.svg").default,
+    href: "https://github.com/lttle-cloud/ignition",
+  },
+  {
+    title: "Discord",
+    Svg: require("@site/static/img/social-media/discord.svg").default,
+    href: "https://discord.gg/xhNGGrZQja",
+  },
+  {
+    title: "LinkedIn",
+    Svg: require("@site/static/img/social-media/linkedin.svg").default,
+    href: "https://www.linkedin.com/company/lttle-cloud",
+  },
+];
+
+function SocialCard({ title, Svg, href }: SocialItem) {
+  return (
+    <a
+      className={clsx(styles.socialCard, title.toLowerCase())}
+      href={href}
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      <Svg className={styles.socialIcon} role="img" />
+      <span className={styles.socialTitle}>{title}</span>
+    </a>
+  );
+}
+
+export default function HomepageSocials(): ReactNode {
+  return (
+    <section className={styles.socialsSection}>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <Heading as="h2">join the community</Heading>
+          <p>Connect with other developers and get help when you need it.</p>
+        </div>
+        <div className={styles.cardsRow}>
+          {socials.map((s, i) => (
+            <SocialCard key={i} {...s} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}