About page technologies placeholder

Author: dthyresson

app/lib/footer.tsx

@@ -32,21 +32,7 @@ export function Footer() {
 
   return (
     <footer className="bg-white">
-      <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
-        <nav
-          className="-mx-5 -my-2 flex flex-wrap justify-center"
-          aria-label="Footer"
-        >
-          {navigation.main.map((item) => (
-            <div key={item.name} className="px-5 py-2">
-              <Link href={item.href}>
-                <a className="text-base text-gray-500 hover:text-gray-900">
-                  {item.name}
-                </a>
-              </Link>
-            </div>
-          ))}
-        </nav>
+      <div className="max-w-7xl mx-auto py-4 px-4 overflow-hidden sm:px-6 lg:px-8">
         <div className="bg-white">
           <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
             <div className="grid grid-cols-2 gap-8 md:grid-cols-2 lg:grid-cols-2">
@@ -71,6 +57,20 @@ export function Footer() {
             </div>
           </div>
         </div>
+        <nav
+          className="-mx-5 -my-2 flex flex-wrap justify-center"
+          aria-label="Footer"
+        >
+          {navigation.main.map((item) => (
+            <div key={item.name} className="px-5 py-2">
+              <Link href={item.href}>
+                <a className="text-base text-gray-500 hover:text-gray-900">
+                  {item.name}
+                </a>
+              </Link>
+            </div>
+          ))}
+        </nav>
         <div className="mt-8 flex justify-center space-x-6">
           {navigation.social.map((item) => (
             <a

app/pages/about.tsx

@@ -24,7 +24,7 @@ const About: NextPage = () => {
     {
       name: "Supabase",
       description:
-        "Supabase is an open source Firebase alternative. It provides all the backend services you need to build a product. You can use it completely, or just the services you require.",
+        "Supabase has all the backend services you need to build a product with GraphQL.",
       icon: LightningBoltIcon,
       href: "https://www.supabase.com",
     },
@@ -44,14 +44,14 @@ const About: NextPage = () => {
     {
       name: "GraphQL Codegen",
       description:
-        "Generate code from your GraphQL schema and operations with a simple CLI. Code with type safety and autocomplete.",
+        "Generate code from your GraphQL schema and operations with a simple CLI.",
       icon: CodeIcon,
       href: "https://www.graphql-code-generator.com",
     },
     {
       name: "GraphiQL",
       description:
-        "GraphiQL from GraphQL Yoga is an in-browser IDE for writing, validating, and testing GraphQL queries.",
+        "GraphiQL is an in-browser IDE for writing, validating, and testing GraphQL queries.",
       icon: TemplateIcon,
       href: "https://www.graphql-yoga.com/docs/features/graphiql",
     },
@@ -64,6 +64,57 @@ const About: NextPage = () => {
     },
   ];
 
+  const faqs = [
+    {
+      id: 1,
+      question: "GraphQL Queries and Mutations",
+      answer:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
+    },
+    {
+      id: 2,
+      question: "Pagination",
+      answer:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
+    },
+    {
+      id: 3,
+      question: "GraphQL Code Generation",
+      answer:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
+    },
+    {
+      id: 4,
+      question: "Supabase Postgres",
+      answer:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
+    },
+    {
+      id: 4,
+      question: "Supabase Auth",
+      answer:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
+    },
+    {
+      id: 4,
+      question: "Postgres Triggers",
+      answer:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
+    },
+    {
+      id: 5,
+      question: "Postgres Functions",
+      answer:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
+    },
+    {
+      id: 5,
+      question: "pg_graphql Postgres Extension",
+      answer:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
+    },
+  ];
+
   return (
     <Container>
       <Head>
@@ -74,14 +125,14 @@ const About: NextPage = () => {
       <div className="relative bg-white py-4 sm:py-8 lg:py-12">
         <div className="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl">
           <h2 className="text-base font-semibold tracking-wider text-green-600 uppercase">
-            Deploy faster
+            GraphQL + Postgres + Tooling
           </h2>
           <p className="mt-2 text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
             Everything you need to deploy a GraphQL app
           </p>
           <p className="mt-5 max-w-prose mx-auto text-xl text-gray-500">
-            Built GraphQL powered apps with tools from Supabase and The Guild
-            faster and easier.
+            Build GraphQL powered apps faster and easier with tools from
+            Supabase and The Guild.
           </p>
           <div className="mt-12">
             <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
@@ -114,6 +165,28 @@ const About: NextPage = () => {
             </div>
           </div>
         </div>
+
+        <div className="bg-white">
+          <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+            <h2 className="text-3xl font-extrabold text-gray-900 text-center">
+              Technologies Used
+            </h2>
+            <div className="mt-12">
+              <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
+                {faqs.map((faq) => (
+                  <div key={faq.id}>
+                    <dt className="text-lg leading-6 font-medium text-gray-900">
+                      {faq.question}
+                    </dt>
+                    <dd className="mt-2 text-base text-gray-500">
+                      {faq.answer}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+        </div>
       </div>
     </Container>
   );