Refactored main page for UI refresh

package.json

@@ -11,22 +11,25 @@
   },
   "dependencies": {
     "@mdi/font": "7.2.96",
+    "gsap": "^3.12.2",
     "roboto-fontface": "0.10.0",
     "vue": "3.3.4",
-    "vuetify": "3.3.6",
     "webfontloader": "1.6.28"
   },
   "devDependencies": {
     "@babel/types": "7.22.5",
+    "@iconify/vue": "^4.1.1",
     "@types/jsdom": "21.1.1",
     "@types/node": "18.16.19",
     "@types/webfontloader": "1.6.35",
     "@vitejs/plugin-vue": "4.2.3",
     "@vue/tsconfig": "0.1.3",
+    "autoprefixer": "^10.4.14",
     "jsdom": "22.1.0",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2",
     "typescript": "5.1.6",
     "vite": "4.3.9",
-    "vite-plugin-vuetify": "1.0.2",
     "vue-tsc": "1.8.3"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-app>
-    <v-main>
-      <HelloWorld />
-    </v-main>
-  </v-app>
+  <div>
+    <Hero />
+    <MarketingSection />
+  </div>
 </template>
 
 <script setup lang="ts">
-  import HelloWorld from '@/components/HelloWorld.vue'
+import Hero from '@/components/Hero.vue';
+import MarketingSection from '@/components/MarketingSection.vue';
 </script>

src/components/Hero.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div class="relative isolate px-6 md:h-screen py-8 lg:px-8 bg-repeat bg-[url('/pattern.svg')] bg-left-top">
+      <div class="mx-auto max-w-2xl py-16 md:py-48">
+        <div class="mb-4 flex justify-center">
+          <img id="main-hero-project-icon" src="/assets/logo.svg" class="h-44" />
+        </div>
+        <div class="text-center">
+          <h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">FDM Monster</h1>
+          <p class="mt-6 text-lg leading-8 text-gray-300 mb-2">Are you ready to scale up your 3D Print farm using OctoPrint instances?</p>
+
+          <div class="mt-10 flex items-center justify-center gap-x-6">
+            <a
+              href="#"
+              class="rounded-md text-lg bg-red-600 px-4 py-2.5 font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+              >Let's Print!</a
+            >
+            <a href="#" class="text-sm font-semibold leading-6 text-white">Learn more <span aria-hidden="true">→</span></a>
+          </div>
+        </div>
+      </div>
+      <Socials />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import Socials from '@/components/Socials.vue';
+</script>
+<style scoped>
+#main-hero-project-icon {
+  animation: fadeIn 2s ease;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  opacity: 0;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+</style>

src/components/MarketingSection.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="bg-white p-8 flex flex-col gap-4">
+    <h2 class="text-6xl md:p-8">What's FDM Monster?</h2>
+
+    <div ref="section1" class="bg-red-950 text-white py-8 px-4 rounded-xl md:flex items-center gap-12 max-w-6xl">
+      <img src="/farm.jpeg" class="rounded-xl max-w-full md:h-80" />
+      <div>
+        <div class="text-4xl mb-4">Farm Solution</div>
+        <div>Looking for a good solution to manage your print farm, with a workflow that is suitable for both business and hobbie?</div>
+      </div>
+    </div>
+    <div ref="section2" class="bg-gray-950 text-white p-8 rounded-xl md:flex items-center gap-8 max-w-4xl ml-auto">
+      <div>
+        <div class="text-4xl mb-4">Open Source</div>
+        <div>
+          The project is entirely open-source, <a href="https://github.com/fdm-monster" class="text-red-500">check it out on GitHub ❤️</a>
+        </div>
+      </div>
+      <img src="/github.png" class="rounded-xl max-w-full md:h-80" />
+    </div>
+
+    <div ref="section3" class="bg-gray-950 text-white p-8 rounded-xl md:flex items-center gap-8 max-w-4xl justify-end">
+      <img src="/demo_1.png" class="rounded-xl max-w-full md:h-80" />
+      <div class="">
+        <div class="text-4xl mb-4">Interested?</div>
+        <div>We have a demo you can try today!</div>
+        <a class="text-red-600 hover:text-red-600 cursor-pointer" href="">Head on to live demo</a>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { gsap } from 'gsap';
+import { ref, unref, onMounted } from 'vue';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+const section1 = ref(null);
+const section2 = ref(null);
+const section3 = ref(null);
+const animationVars = [
+    {
+      opacity: 0,
+      x: -100,
+    },
+    {
+      opacity: 1,
+      x: 0,
+      duration: 1.5,
+    },
+  ]
+
+const reversedAnimationVars = [
+    {
+      opacity: 0,
+      x: 100,
+    },
+    {
+      opacity: 1,
+      x: 0,
+      duration: 1.5,
+    },
+  ]
+
+gsap.registerPlugin(ScrollTrigger);
+
+onMounted(() => {
+  [section1, section2, section3].forEach((section, index) => {
+    const animation = gsap
+      .fromTo(
+        unref(section),
+        index%2 ? reversedAnimationVars[0] : animationVars[0],
+        index%2 ? reversedAnimationVars[1] : animationVars[1],
+      )
+      .pause();
+
+    ScrollTrigger.create({
+      trigger: unref(section),
+      start: 'top 80%',
+      end: 'bottom 20%',
+      onEnter: () => animation.play(),
+      onEnterBack: () => animation.play(),
+      onLeaveBack: () => animation.reverse(),
+    });
+  });
+});
+</script>

src/components/Socials.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col md:flex-row gap-2 md:justify-around md:gap-4 text-white">
+    <a
+      class="text-center inline-flex items-center gap-8 px-6 py-3 rounded cursor-pointer hover:bg-gray-800  focus:ring-4 focus:outline-none focus:ring-red-700"
+      href="https://discord.com/invite/mwA8uP8CMc"
+    >
+      <Icon icon="ic:baseline-discord" class="text-2xl" />
+      Discord
+    </a>
+    <a
+      class="text-center inline-flex items-center gap-8 px-6 py-3 rounded cursor-pointer hover:bg-gray-800  focus:ring-4 focus:outline-none focus:ring-red-700"
+      href="https://docs.fdm-monster.net"
+    >
+      <Icon icon="fluent-mdl2:documentation" class="text-2xl" />
+      Documentation
+    </a>
+    <a
+      class="text-center inline-flex items-center gap-8 px-6 py-3 rounded cursor-pointer hover:bg-gray-800  focus:ring-4 focus:outline-none focus:ring-red-700"
+      href="https://octoprint.org/"
+    >
+      <Icon icon="game-icons:octopus" class="text-2xl" />
+      OctoPrint
+    </a>
+  </div>
+</template>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+</script>

src/index.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+    height: 100%;
+    background-color: rgb(18,18,18);
+}

src/main.ts

@@ -6,16 +6,16 @@
 
 // Components
 import App from "./App.vue";
+import './index.css'
 
 // Composables
 import { createApp } from "vue";
 
 // Plugins
 import { registerPlugins } from "@/plugins";
-import vuetify from "./plugins/vuetify";
 
 const app = createApp(App);
 
 registerPlugins();
 
-app.use(vuetify).mount("#app");
+app.mount("#app");

tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.vue"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

vite.config.ts

@@ -1,6 +1,5 @@
 // Plugins
 import vue from "@vitejs/plugin-vue";
-import vuetify from "vite-plugin-vuetify";
 
 // Utilities
 import { defineConfig } from "vite";
@@ -11,9 +10,6 @@ export default defineConfig({
   plugins: [
     vue(),
     // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
-    vuetify({
-      autoImport: true,
-    }),
   ],
   define: { "process.env": {} },
   resolve: {