[WIP] New Website Structure

docs/.vuepress/client.ts

@@ -0,0 +1,22 @@
+import { defineClientConfig } from 'vuepress/client'
+import { setupTransparentNavbar } from "vuepress-theme-hope/presets/transparentNavbar.js";
+import ServiceCard from './components/ServiceCard.vue'
+import ProcessStep from './components/ProcessStep.vue'
+import ContactForm from './components/ContactForm.vue'
+import TeamMember from './components/TeamMember.vue'
+import ProjectCard from './components/ProjectCard.vue'
+import ContentSection from './components/ContentSection.vue'
+
+export default defineClientConfig({
+  enhance({ app }) {
+    app.component('ContactForm', ContactForm)
+    app.component('ContentSection', ContentSection)
+    app.component('ServiceCard', ServiceCard)
+    app.component('ProcessStep', ProcessStep)
+    app.component('ProjectCard', ProjectCard)
+    app.component('TeamMember', TeamMember)
+  },
+  setup() {
+    setupTransparentNavbar({ type: "homepage" });
+  },
+})

docs/.vuepress/components/ContactForm.vue

@@ -0,0 +1,64 @@
+<template>
+  <form class="space-y-4" @submit.prevent="handleSubmit">
+    <div>
+      <input
+          type="text"
+          id="name"
+          v-model="form.name"
+          placeholder="Name"
+          class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+      >
+    </div>
+    <div>
+      <input
+          type="email"
+          id="email"
+          v-model="form.email"
+          placeholder="E-Mail"
+          class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+      >
+    </div>
+    <div>
+      <input
+          type="tel"
+          id="phone"
+          v-model="form.phone"
+          placeholder="Telefon"
+          class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+      >
+    </div>
+    <div>
+      <textarea
+          id="message"
+          v-model="form.message"
+          rows="4"
+          placeholder="Ihre Nachricht"
+          class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+      ></textarea>
+    </div>
+    <div class="flex justify-end">
+      <button
+          type="submit"
+          class="bg-green-700 text-white py-2 px-6 rounded-md hover:bg-green-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
+      >
+        Nachricht senden
+      </button>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const form = reactive({
+  name: '',
+  email: '',
+  phone: '',
+  message: ''
+})
+
+const handleSubmit = () => {
+  console.log('Form submitted:', form)
+  // Add form submission logic here
+}
+</script>

docs/.vuepress/components/ContentSection.vue

@@ -0,0 +1,26 @@
+<template>
+  <section :class="['full-width-section', backgroundColor]">
+    <div class="content-width">
+      <div class="py-16">
+        <h1>{{ title }}</h1>
+        <slot></slot>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'ContentSection',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    backgroundColor: {
+      type: String,
+      default: 'bg-transparent'
+    }
+  }
+}
+</script>

docs/.vuepress/components/ProcessStep.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="grid grid-cols-12 items-start mb-16">
+    <div class="col-span-3 text-right pr-8">
+      <span class="text-6xl font-bold text-green-600">{{ number.padStart(2, '0') }}</span>
+    </div>
+    <div class="col-span-9 pt-4">
+      <h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
+      <p class="text-gray-600">{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  number: string
+  title: string
+  description: string
+}>()
+</script>

docs/.vuepress/components/ProjectCard.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="border rounded-lg p-6">
+    <img :src="image" :alt="title" class="rounded-lg mb-4 w-full h-48 object-cover">
+    <h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
+    <p class="text-gray-600 mb-4">{{ description }}</p>
+    <div class="flex flex-wrap gap-2">
+      <span
+          v-for="tag in tags"
+          :key="tag"
+          class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm"
+      >
+        {{ tag }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description: string
+  image: string
+  tags: string[]
+}>()
+</script>

docs/.vuepress/components/ServiceCard.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="p-6 border rounded-lg">
+    <h3 class="text-xl font-semibold mb-4">{{ title }}</h3>
+    <ul class="space-y-2 text-gray-600">
+      <li v-for="item in items" :key="item">{{ item }}</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  items: string[]
+}>()
+</script>

docs/.vuepress/components/TeamMember.vue

@@ -0,0 +1,34 @@
+<template>
+  <a
+      :href="profileUrl"
+      class="block text-center group transition-transform duration-200 hover:-translate-y-2 active:translate-y-0"
+  >
+    <div class="relative w-48 h-48 mx-auto mb-4">
+      <!-- Image container to control scaling bounds -->
+      <img
+          :src="image"
+          :alt="name"
+          class="rounded-full w-full h-full object-cover grayscale transition-all duration-200 transform
+              group-hover:scale-[1.05]"
+      >
+      <!-- Overlay matching image size and shape -->
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[115%] h-[115%]
+                  rounded-full bg-green-700 opacity-0 group-hover:opacity-5 transition-opacity duration-200">
+      </div>
+    </div>
+
+    <h4 class="font-semibold text-gray-900 transition-colors duration-200 group-hover:text-gray-600">
+      {{ name }}
+    </h4>
+    <p class="text-sm text-gray-600">{{ role }}</p>
+  </a>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  name: string
+  role: string
+  image: string
+  profileUrl: string
+}>()
+</script>

docs/.vuepress/config.js → docs/.vuepress/config.ts

@@ -2,9 +2,16 @@ import { viteBundler } from '@vuepress/bundler-vite'
 import { defineUserConfig } from 'vuepress'
 import meta from './config/meta'
 import theme from './config/theme'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineUserConfig({
   ...meta,
   theme,
-  bundler: viteBundler({}),
+  bundler: viteBundler({
+    viteOptions: {
+      plugins: [
+        tailwindcss(),
+      ]
+    }
+  }),
 })

docs/.vuepress/config/meta.js → docs/.vuepress/config/meta.ts

@@ -1,7 +1,9 @@
+import { HeadConfig } from "vuepress";
+
 export default {
   title: 'IT Team for Change',
   description: 'IT4C.dev introduces the IT Team for Change, applied Philosophy and Projects.',
   head: [
     ['meta', {name: 'viewport', content: 'width=device-width,initial-scale=1'}]
-  ],
+  ] as HeadConfig[],
 }

docs/.vuepress/styles/index.scss

@@ -0,0 +1,21 @@
+h1, h2 {
+  border-bottom: none;
+  padding-bottom: 2rem;
+  font-weight: bold;
+}
+
+
+.full-width-section {
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  width: 100vw;
+
+  .content-width {
+    max-width: var(--content-width);
+    margin: 0 auto;
+    padding: 0 2.5rem;
+  }
+}