add pricing

src/components/AnimatedArrow.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="container">
+    <svg width="2" :height="height" :style="svgStyle">
+      <line
+        x1="1"
+        y1="0"
+        x2="1"
+        :y2="height"
+        stroke="#333"
+        stroke-width="2"
+        stroke-dasharray="50"
+        stroke-dashoffset="50"
+      >
+        <animate
+          attributeName="stroke-dashoffset"
+          :from="height"
+          to="0"
+          dur="0.3s"
+          fill="freeze"
+          ref="$animateLine"
+          begin="indefinite"
+        />
+      </line>
+      <path
+        :d="`M -5 ${height - 5} L 1 ${height} L 7 ${height - 5}`"
+        fill="none"
+        stroke="#333"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        opacity="0"
+      >
+        <animate
+          attributeName="opacity"
+          from="0"
+          to="1"
+          dur="0.3s"
+          fill="freeze"
+          ref="$animateHead"
+          begin="indefinite"
+        />
+      </path>
+    </svg>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const $animateLine = ref<SVGAnimateElement>()
+const $animateHead = ref<SVGAnimateElement>()
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: "#333",
+  },
+  height: {
+    type: Number,
+    default: 30,
+  },
+});
+
+const svgStyle = ref({
+  overflow: "visible",
+});
+
+const animateHead = () => {
+  if ($animateHead.value) {
+    $animateHead.value.beginElement();
+  }
+};
+
+const animateLine = () => {
+  if ($animateLine.value) {
+    $animateLine.value.beginElement();
+  }
+};
+
+defineExpose({
+  animateHead,
+  animateLine,
+});
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>

src/components/CircleConfirm.vue

@@ -7,7 +7,7 @@
   >
     <g
       fill="none"
-      stroke="currentColor"
+      :stroke="color"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
@@ -30,6 +30,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+const props = defineProps({
+  color: {
+    type: String,
+    default: "#333",
+  },
+});
+
 const $animate = ref<SVGAnimateElement>()
 
 const start = () => {

src/router/index.ts

@@ -1,23 +1,40 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/index.vue'
+import IndexView from '../views/index.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView
+      name: 'Index',
+      component: IndexView,
+      children: [
+        {
+          path: '',
+          name: 'Home',
+          component: () => import('../views/home.vue')
+        },
+        {
+          path: '/download',
+          name: 'Download',
+          component: () => import('../views/download.vue')
+        },
+        {
+          path: '/contact',
+          name: 'Contact',
+          component: () => import('../views/download.vue')
+        }
+      ]
     },
-    // {
-    //   path: '/about',
-    //   name: 'about',
-    //   // route level code-splitting
-    //   // this generates a separate chunk (About.[hash].js) for this route
-    //   // which is lazy-loaded when the route is visited.
-    //   component: () => import('../views/AboutView.vue')
-    // }
-  ]
+  ],
+  scrollBehavior(to, from, savedPosition) {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        
+      }
+    }
+  },
 })
 
 export default router

src/views/download.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="flex flex-col items-center p-8 bg-gray-100 min-h-screen">
+    <img
+      alt="Dataflare Logo"
+      class="w-16 h-16 mb-4"
+    />
+    <h1 class="text-2xl font-bold mb-2">Download Dataflare</h1>
+    <p class="text-gray-600 mb-8">
+      Choose the version that suits your operating system (OS) and CPU
+      architecture
+    </p>
+
+    <div class="flex flex-wrap justify-center gap-8">
+      <DownloadCard
+        os="macOS"
+        :options="macOptions"
+        brewCommand="brew install dataflare"
+      />
+      <DownloadCard
+        os="Windows"
+        :options="windowsOptions"
+        wingetCommand="winget install Dataflare.Dataflare"
+      />
+      <DownloadCard os="Linux" :options="linuxOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, ref } from "vue";
+
+const macOptions = ref([
+  { label: ".dmg (Apple Silicon)", value: "apple-silicon" },
+  { label: ".dmg (Intel)", value: "intel" },
+]);
+
+const windowsOptions = ref([{ label: ".exe (x86_64)", value: "x86_64" }]);
+
+const linuxOptions = ref([
+  { label: ".AppImage (x86_64)", value: "x86_64" },
+  { label: ".AppImage (AArch64)", value: "aarch64" },
+]);
+
+const DownloadCard = defineComponent({
+  props: {
+    os: String,
+    options: Array,
+    brewCommand: String,
+    wingetCommand: String,
+  },
+  setup(props) {
+    const getOsIcon = (os: string) => {
+      switch (os) {
+        case "macOS":
+          return "🍎";
+        case "Windows":
+          return "🪟";
+        case "Linux":
+          return "🐧";
+        default:
+          return "";
+      }
+    };
+
+    return { getOsIcon };
+  },
+  template: `
+    <div class="bg-white rounded-lg shadow-md p-6 w-80">
+      <div class="flex items-center mb-4">
+        <span class="text-2xl mr-2">{{ getOsIcon(os) }}</span>
+        <h2 class="text-xl font-semibold">{{ os }}</h2>
+        <span v-if="os === 'Windows'" class="ml-2 px-2 py-1 bg-yellow-200 text-yellow-800 text-xs rounded">Unsigned</span>
+      </div>
+      <div v-if="brewCommand || wingetCommand" class="bg-gray-100 p-2 rounded mb-4 font-mono text-sm">
+        {{ brewCommand || wingetCommand }}
+      </div>
+      <div v-for="option in options" :key="option.value" class="flex justify-between items-center mb-2">
+        <span>{{ option.label }}</span>
+        <button class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition">↓</button>
+      </div>
+    </div>
+  `,
+});
+</script>
+
+<style lang="scss" scoped></style>