Website refresh

docusaurus.config.ts

@@ -139,6 +139,24 @@ const config: Config = {
   ],
 
   plugins: [
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'getting-started',
+        path: 'getting-started',
+        routeBasePath: 'getting-started',
+        sidebarPath: './getting-started/sidebars.json',
+      },
+    ],
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'download',
+        path: 'download',
+        routeBasePath: 'download',
+        sidebarPath: './download/sidebars.json',
+      },
+    ],
     "./plugins/blog-plugin",
     function tailwindPlugin() {
       return {
@@ -245,13 +263,13 @@ const config: Config = {
       hideOnScroll: true,
       items: [
         {
-          to: "/manifesto",
-          label: "Manifesto",
+          to: "/getting-started",
+          label: "Getting started",
           position: "left",
         },
         {
-          to: "/supporters",
-          label: "Supporters",
+          to: "/download",
+          label: "Download",
           position: "left",
         },
         {

download/sidebars.json

@@ -0,0 +1,8 @@
+{
+  "download": [
+    {
+      "type": "autogenerated",
+      "dirName": "."
+    }
+  ]
+}

getting-started/chapter1/deb.mdx

@@ -0,0 +1,4 @@
+---
+sidebar_label: ".deb-based systems"
+sidebar_position: 1
+---

getting-started/chapter1/index.mdx

@@ -0,0 +1,41 @@
+---
+sidebar_label: "Chapter 1: Setting up OpenTofu"
+sidebar_position: 2
+---
+
+# Chapter 1: Setting up OpenTofu
+
+OpenTofu is a single, static binary. This means you can download the .zip/.tar.gz file [from GitHub](https://github.com/opentofu/opentofu/releases) and use it out of the box, no installation is required. However, we maintain a list of [installation methods](/download/) that allow you to easily update your OpenTofu installation in the future.
+
+To get started, please select your operating system below.
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+    <TabItem value="linux" label="Linux" default>
+        <Tabs>
+            <TabItem value="deb" label={<span>.deb-based systems<br /><small>(Debian & derivatives)</small></span>} default>
+
+            </TabItem>
+            <TabItem value="rpm" label={<span>.rpm-based systems<br /><small>(RHEL, SUSE, etc)</small></span>}>
+
+            </TabItem>
+            <TabItem value="alpine" label="Alpine Linux">
+
+            </TabItem>
+            <TabItem value="other" label="Other distributions">
+
+            </TabItem>
+        </Tabs>
+    </TabItem>
+    <TabItem value="Windows" label="Windows">
+        Windows
+    </TabItem>
+    <TabItem value="MacOS" label="MacOS">
+        MacOS
+    </TabItem>
+    <TabItem value="UNIX/BSD" label="UNIX/BSD">
+        Unix/BSD
+    </TabItem>
+</Tabs>

getting-started/index.mdx

@@ -0,0 +1,12 @@
+---
+sidebar_label: Overview
+sidebar_position: 1
+---
+
+# Getting started with OpenTofu
+
+Welcome to OpenTofu! If you are new to OpenTofu or infrastructure-as-code, this section is for you. It is a practical, hands-on introduction to getting your first cloud infrastructure going.
+
+This guide is structured into the following parts:
+
+- [Chapter 1: Setting up OpenTofu](./chapter1/index.mdx)

getting-started/sidebars.json

@@ -0,0 +1,8 @@
+{
+  "guides": [
+    {
+      "type": "autogenerated",
+      "dirName": "."
+    }
+  ]
+}

src/components/GetStarted/index.tsx

@@ -0,0 +1,54 @@
+import Link from "@docusaurus/Link";
+import React from "react";
+
+function LinkCard({
+  title,
+  description,
+  path,
+}: {
+  title: string;
+  description: string;
+  path: string;
+}) {
+  return (
+    <div className="bg-white dark:bg-blue-900 p-6 relative flex flex-col gap-2 ">
+      <Link to={path} className="text-xl">
+        <span className="absolute inset-0"></span>
+        {title}
+      </Link>
+      <p className="text-gray-600 dark:text-gray-500">{description}</p>
+    </div>
+  );
+}
+
+export default function GetStarted() {
+  return (
+    <section className="py-12 mx-auto container items-center flex flex-col px-4">
+      <h2 className="text-center text-3xl md:text-5xl font-bold mb-4 md:mb-7">
+        Which of these best describes you?
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <LinkCard
+          title="I want a high-level overview"
+          description="Learn the fundamentals of Infrastructure-as-Code in this high level guide, understand why IaC is so powerful, and how OpenTofu can help."
+          path="/test1"
+        />
+        <LinkCard
+          title="I'm new to OpenTofu"
+          description="For newcomers to infrastructure as code an OpenTofu, this hands-on guide runs you through the basics of creating your first server with OpenTofu."
+          path="/test2"
+        />
+        <LinkCard
+          title="I'm migrating from Terraform"
+          description="If you already have experience with Terraform but want to migrate to OpenTofu, this is for you. Tried and tested migration paths from Terraform to OpenTofu."
+          path="/test3"
+        />
+        <LinkCard
+          title="Just give me the docs"
+          description="Reference manual for those in need of a quick lookup."
+          path="/test4"
+        />
+      </div>
+    </section>
+  );
+}

src/components/Hero/index.tsx

@@ -33,16 +33,16 @@ export default function Hero() {
         The open source infrastructure as code tool.
       </Headline>
       <p className="my-6 text-xl sm:max-w-lg md:max-w-xl lg:max-w-2xl text-center text-gray-600 dark:text-gray-500">
-        Previously named OpenTF, OpenTofu is a fork of Terraform that is
-        open-source, community-driven, and managed by the Linux Foundation.
+        OpenTofu is a community-driven infrastructure-as-code tool that lets you
+          declaratively create and manage your cloud infrastructure.
       </p>
 
       <div className="flex gap-4 pt-6">
-        <Button className="text-center" variant="secondary" href="/manifesto">
-          Read Manifesto
+        <Button className="text-center" variant="secondary" href="/getting-started">
+          Getting started
         </Button>
-        <Button variant="primary" href="/docs/intro/install">
-          Try it out
+        <Button variant="primary" href="/download">
+          Download
         </Button>
       </div>
     </header>

src/components/Home/index.tsx

@@ -1,18 +1,14 @@
 import React from "react";
 import Layout from "@theme/Layout";
 import Hero from "../Hero";
-import Goals from "../Goals";
 import Supporters from "../Supporters";
-import FAQ from "../FAQ";
-import HowToContribute from "../HowToContribute";
+import GetStarted from "../GetStarted";
 
 export default function Home() {
   return (
     <Layout description="The open source infrastructure as code tool.">
       <Hero />
-      <Goals />
-      <HowToContribute />
-      <FAQ />
+      <GetStarted />
       <Supporters />
     </Layout>
   );