Simple Homepage

src/components/animated-terminal/index.tsx

@@ -36,6 +36,7 @@ export default function AnimatedTerminal({
       title={title}
       fontSize={fontSize}
       lines={frames[currentFrame]}
+      disableScrolling={true}
     />
   );
 }

src/components/link/Link.module.css

@@ -50,10 +50,10 @@
   border: 1px solid var(--buttonColor);
   &:hover {
     background-color: var(--buttonColor);
+    text-decoration: none;
   }
 
   border-radius: 6px;
-  text-decoration: none;
   transition: background-color .15s;
   &.small {
     font-size: 14px;

src/components/terminal/Terminal.module.css

@@ -73,9 +73,12 @@
     font-size: var(--content-font-size);
     margin-top: var(--code-margin-top);
     color: var(--gray-6);
-    overflow-y: scroll;
     word-wrap: break-word;
     scroll-behavior: smooth;
+    overflow-y: scroll;
+    &.disableScrolling {
+      overflow-y: hidden;
+    }
     & > div {
       white-space: pre-wrap;
       & :global(.b) {

src/components/terminal/index.tsx

@@ -11,6 +11,7 @@ export interface TerminalProps {
   title?: string;
   lines?: string[];
   whitespacePadding?: number;
+  disableScrolling?: boolean;
 }
 
 export default function Terminal({
@@ -21,6 +22,7 @@ export default function Terminal({
   title,
   lines,
   whitespacePadding = 0,
+  disableScrolling = false,
 }: TerminalProps) {
   const [autoScroll, setAutoScroll] = useState(true);
   const handleScroll = (e: UIEvent<HTMLElement>) => {
@@ -71,7 +73,13 @@ export default function Terminal({
         </ul>
         <P className={s.title}>{title}</P>
       </div>
-      <Code ref={codeRef} className={s.content} onScroll={handleScroll}>
+      <Code
+        ref={codeRef}
+        className={classNames(s.content, {
+          [s.disableScrolling]: disableScrolling,
+        })}
+        onScroll={handleScroll}
+      >
         {lines?.map((line, i) => {
           return (
             <div

src/layouts/nav-footer-layout/index.tsx

@@ -0,0 +1,40 @@
+import { SimpleLink } from "@/components/link";
+import Navbar from "@/components/navbar";
+import RootLayout, { RootLayoutProps } from "../root-layout";
+import Footer from "@/components/footer";
+
+const navLinks: Array<SimpleLink> = [
+  {
+    text: "About",
+    href: "/",
+  },
+  {
+    text: "Docs",
+    href: "/docs",
+  },
+  {
+    text: "Discord",
+    href: "https://discord.gg/ghostty",
+  },
+  {
+    text: "Github",
+    href: "https://github.com/ghostty-org/ghostty",
+  },
+];
+
+export default function NavFooterLayout(props: RootLayoutProps) {
+  const { children, ...otherProps } = props;
+  return (
+    <RootLayout {...otherProps}>
+      <Navbar
+        links={navLinks}
+        cta={{
+          href: "/download",
+          text: "Download",
+        }}
+      />
+      {children}
+      <Footer links={navLinks} copyright="© Ghostty 2024" />
+    </RootLayout>
+  );
+}

src/layouts/root-layout/index.tsx

@@ -1,30 +1,8 @@
-import Footer from "@/components/footer";
-import { SimpleLink } from "@/components/link";
-import Navbar from "@/components/navbar";
 import { jetbrainsMono, pretendardVariable } from "@/components/text";
 import classNames from "classnames";
 import Head from "next/head";
 import s from "./RootLayout.module.css";
 
-const navLinks: Array<SimpleLink> = [
-  {
-    text: "About",
-    href: "/",
-  },
-  {
-    text: "Docs",
-    href: "/docs",
-  },
-  {
-    text: "Discord",
-    href: "https://discord.gg/ghostty",
-  },
-  {
-    text: "Github",
-    href: "https://github.com/ghostty-org/ghostty",
-  },
-];
-
 export interface PageMeta {
   title: string;
   description: string;
@@ -58,15 +36,7 @@ export default function RootLayout({
         <link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png" />
         <link rel="shortcut icon" href="/favicon.ico" />
       </Head>
-      <Navbar
-        links={navLinks}
-        cta={{
-          href: "/download",
-          text: "Download",
-        }}
-      />
       {children}
-      <Footer links={navLinks} copyright="© Ghostty 2024" />
     </div>
   );
 }

src/pages/Home.module.css

@@ -1,14 +1,16 @@
 .homePage {
   & .terminalWrapper {
-    padding: 100px 0;
-    @media(max-width: 1100px) {
-      padding: 75px 0;
-    }
-    @media(max-width: 768px) {
-      padding: 48px 0;
-    }
+    padding-top: 70px;
+    padding-bottom: 20px;
     display: grid;
     place-content: center;
     overflow: hidden;
   }
+
+  & .buttonsList {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
 }

src/pages/docs/[...path]/index.tsx

@@ -1,16 +1,16 @@
+import Breadcrumbs, { Breadcrumb } from "@/components/breadcrumbs";
 import CustomMDX from "@/components/custom-mdx";
 import NavTree, { NavTreeNode } from "@/components/nav-tree";
 import { H1, P } from "@/components/text";
-import RootLayout from "@/layouts/root-layout";
+import NavFooterLayout from "@/layouts/nav-footer-layout";
 import {
   DocsPageData,
   loadAllDocsPageSlugs,
   loadDocsPage,
 } from "@/lib/fetch-docs";
 import { loadDocsNavTreeData } from "@/lib/fetch-nav";
-import s from "./DocsPage.module.css";
-import Breadcrumbs, { Breadcrumb } from "@/components/breadcrumbs";
 import { navTreeToBreadcrumbs } from "@/lib/nav-tree-to-breadcrumbs";
+import s from "./DocsPage.module.css";
 
 // This is the location that we expect our docs mdx files to be located,
 // relative to the root of the Next.js project.
@@ -70,7 +70,7 @@ export default function DocsPage({
   breadcrumbs,
 }: DocsPageProps) {
   return (
-    <RootLayout meta={{ title, description }}>
+    <NavFooterLayout meta={{ title, description }}>
       <div className={s.docsPage}>
         <div className={s.sidebar}>
           <div className={s.sidebarContentWrapper}>
@@ -100,6 +100,6 @@ export default function DocsPage({
           </div>
         </main>
       </div>
-    </RootLayout>
+    </NavFooterLayout>
   );
 }

src/pages/download/index.tsx

@@ -1,11 +1,11 @@
-import RootLayout from "@/layouts/root-layout";
-import s from "./DownloadPage.module.css";
-import { H1 } from "@/components/text";
 import SectionWrapper from "@/components/section-wrapper";
+import { H1 } from "@/components/text";
+import NavFooterLayout from "@/layouts/nav-footer-layout";
+import s from "./DownloadPage.module.css";
 
 export default function Download() {
   return (
-    <RootLayout
+    <NavFooterLayout
       meta={{
         title: "Ghostty",
         description:
@@ -18,6 +18,6 @@ export default function Download() {
           <H1>Download Page TODO</H1>
         </SectionWrapper>
       </main>
-    </RootLayout>
+    </NavFooterLayout>
   );
 }

src/pages/index.tsx

@@ -1,22 +1,15 @@
 import AnimatedTerminal from "@/components/animated-terminal";
-import InfoCardsSection from "@/components/info-cards-section";
-import TabbedTerminalsSection from "@/components/tabbed-terminals-section";
-import TerminalCardsSection from "@/components/terminal-cards-section";
 import RootLayout from "@/layouts/root-layout";
 import {
   loadAllTerminalFiles,
   TerminalsMap,
 } from "@/lib/fetch-terminal-content";
-import {
-  AppWindow,
-  Cpu,
-  FileCheck,
-  Files,
-  MessageSquareWarning,
-  SquareTerminal,
-} from "lucide-react";
 import { useLayoutEffect, useState } from "react";
 import s from "./Home.module.css";
+import Button from "@/components/button";
+import { ButtonLink } from "@/components/link";
+import SectionWrapper from "@/components/section-wrapper";
+import GridContainer from "@/components/grid-container";
 
 export async function getStaticProps() {
   return {
@@ -61,11 +54,9 @@ export default function Home({ terminalData }: HomePageProps) {
       <main className={s.homePage}>
         <section className={s.terminalWrapper}>
           <AnimatedTerminal
-            title={"Ghostty"}
+            title={"👻 Ghostty"}
             fontSize={
-              windowWidth > 1300
-                ? "medium"
-                : windowWidth > 1100
+              windowWidth > 1100
                 ? "small"
                 : windowWidth > 674
                 ? "tiny"
@@ -81,107 +72,15 @@ export default function Home({ terminalData }: HomePageProps) {
             frameLengthMs={31}
           />
         </section>
-
-        <InfoCardsSection
-          title="Ghostty is a cross-platform, GPU-accelerated terminal emulator designed to eerily-enhance and expand CLI capabilities."
-          infoCards={[
-            {
-              title: "GPU-Accelerated",
-              description:
-                "Faster performance and improved responsiveness through the use of GPU power.",
-              icon: <Cpu size={28} strokeWidth={1} />,
-            },
-            {
-              title: "Terminfo",
-              description:
-                "Ghostty ships with its own terminfo entry to tell software about its capabilities.",
-              icon: <SquareTerminal size={28} strokeWidth={1} />,
-            },
-            {
-              title: "Drop-in Replacement",
-              description:
-                "Faster performance and improved responsiveness through the use of GPU power.",
-              icon: <Files size={28} strokeWidth={1} />,
-            },
-            {
-              title: "Standards Compliant",
-              description:
-                "Fully standards compliant with all existing shells and terminal software for seamless integration.",
-              icon: <FileCheck size={28} strokeWidth={1} />,
-            },
-            {
-              title: "Crash Reports",
-              description:
-                "Built-in crash reporter that automatically generates and saves crash reports to disk.",
-              icon: <MessageSquareWarning size={28} strokeWidth={1} />,
-            },
-            {
-              title: "Richer Windowing",
-              description:
-                "Multi-window, tabbing, and pane support for seamless session organization and switching.",
-              icon: <AppWindow size={28} strokeWidth={1} />,
-            },
-          ]}
-        />
-
-        <TabbedTerminalsSection
-          title="Built to spook the boundaries of terminal emulation."
-          terminalTabs={[
-            {
-              title: "Configuration",
-              description:
-                "Built to enable CLI tool developers to create more feature rich, interactive applications.",
-              lines: terminalData["home/tabbed-terminals/configuration"],
-            },
-            {
-              title: "Modern, Opt-In Features",
-              description:
-                "Built to enable CLI tool developers to create more feature rich, interactive applications.",
-              lines: terminalData["home/tabbed-terminals/opt-in-features"],
-            },
-            {
-              title: "Experimental Platform",
-              description:
-                "Built to enable CLI tool developers to create more feature rich, interactive applications.",
-              lines:
-                terminalData["home/tabbed-terminals/experimental-platform"],
-            },
-          ]}
-        />
-
-        <TerminalCardsSection
-          title="Create richer, more interactive CLI applications. Wicked."
-          description="Modern, opt-in features offer CLI developers new ways to build richer, more interactive applications, all while ensuring full compatibility with existing shells and software."
-          cards={[
-            {
-              title: "Configuration",
-              description:
-                "Personalize your terminal experience with customized configurations, or select from over 300+ built-in themes.",
-              terminal: {
-                title: "~",
-                lines: terminalData["home/terminal-cards/1"],
-              },
-            },
-            {
-              title: "Modern, Opt-In Features",
-              description:
-                "Built to enable CLI tool developers to create more feature rich, interactive applications.",
-              terminal: {
-                title: "~",
-                lines: terminalData["home/terminal-cards/2"],
-              },
-            },
-            {
-              title: "Experimental Platform",
-              description:
-                "Built as a platform to experiment with modern, non-standard features, enhancing CLI application capabilities.",
-              terminal: {
-                title: "~",
-                lines: terminalData["home/terminal-cards/3"],
-              },
-            },
-          ]}
-        />
+        <GridContainer className={s.buttonsList}>
+          <ButtonLink href="/download" text="Download" size="large" />
+          <ButtonLink
+            href="/docs"
+            text="Documentation"
+            size="large"
+            theme="neutral"
+          />
+        </GridContainer>
       </main>
     </RootLayout>
   );