Restructured front page

Signed-off-by: Janos Bonic <[email protected]>

docusaurus.config.ts

@@ -232,13 +232,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",
         },
         {

src/components/GetStarted/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+
+
+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">
+                <div className="bg-white dark:bg-blue-900 p-6">
+                    <h3 className="text-xl mb-2">I want a high-level overview</h3>
+                    <p className="text-gray-600 dark:text-gray-500">
+                        Learn the fundamentals of Infrastructure-as-Code in
+                        this high level guide, understand why IaC is so powerful, and how OpenTofu can help.
+                    </p>
+                </div>
+                <div className="bg-white dark:bg-blue-900 p-6">
+                    <h3 className="text-xl mb-2">I'm new to OpenTofu</h3>
+                    <p className="text-gray-600 dark:text-gray-500">
+                        For newcomers to infrastructure as code an OpenTofu, this hands-on guide runs you through the
+                        basics of creating your first server with OpenTofu.
+                    </p>
+                </div>
+                <div className="bg-white dark:bg-blue-900 p-6">
+                    <h3 className="text-xl mb-2">I'm migrating from Terraform</h3>
+                    <p className="text-gray-600 dark:text-gray-500">
+                        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.
+                    </p>
+                </div>
+                <div className="bg-white dark:bg-blue-900 p-6">
+                    <h3 className="text-xl mb-2">Just give me the docs</h3>
+                    <p className="text-gray-600 dark:text-gray-500">
+                        Reference manual for those in need of a quick lookup.
+                    </p>
+                </div>
+            </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>
   );