feat: prep FAQ.vue

Author: prplwtf

apps/frontend/src/components/ui/marketing/Gridbackground.vue renamed to apps/frontend/src/components/ui/Gridbackground.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    :class="props.class"
+    class="grid grid-cols-2 overflow-hidden rounded-3xl border border-neutral-700 bg-neutral-950"
+  >
+    <div class="border-e border-neutral-700">
+      <div
+        class="flex flex-row justify-between border-b border-neutral-700 p-4"
+      >
+        <h2>What's Blueprint?</h2>
+        <Icon name="memory:chevron-down" :size="24" />
+      </div>
+      <div
+        class="flex flex-row justify-between border-b border-neutral-700 p-4"
+      >
+        <h2>Where can I discover and download extensions?</h2>
+        <Icon name="memory:chevron-down" :size="24" />
+      </div>
+      <div
+        class="flex flex-row justify-between border-b border-neutral-700 p-4"
+      >
+        <h2>Does Blueprint work with Pterodactyl forks?</h2>
+        <Icon name="memory:chevron-down" :size="24" />
+      </div>
+      <div class="flex flex-row justify-between p-4">
+        <h2>Are Blueprint's financials publicly available?</h2>
+        <Icon name="memory:chevron-down" :size="24" />
+      </div>
+    </div>
+    <div>test2</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+    required: false,
+  },
+})
+</script>

apps/frontend/src/components/ui/marketing/sections/Faq.vue

@@ -1,14 +1,17 @@
 <template>
-  <span class="md:display h1 mt-4 block xl:text-justify">
-    <span class="text-gray-500">The</span>
-    industry-leading modding platform
-    <span class="text-gray-500"> for the Pterodactyl® panel </span>
-  </span>
+  <div class="space-y-12">
+    <span class="md:display h1 mt-4 block xl:text-justify">
+      <span class="text-gray-500">The</span>
+      industry-leading modding platform
+      <span class="text-gray-500"> for the Pterodactyl® panel </span>
+    </span>
 
-  <UiMarketingSectionsHighlights class="my-12" />
-  <UiMarketingSectionsMarquee class="my-12" />
-  <UiMarketingSectionsHero class="my-12" />
-  <UiMarketingSectionsRepositories class="my-12" />
+    <UiMarketingSectionsHighlights />
+    <UiMarketingSectionsMarquee />
+    <UiMarketingSectionsHero />
+    <UiMarketingSectionsRepositories />
+    <UiMarketingSectionsFaq />
+  </div>
 
-  <UiMarketingGridbackground />
+  <UiGridbackground />
 </template>