diff --git a/.env.production.encrypted b/.env.production.encrypted
index 4c2c9fea..c78a408a 100644
--- a/.env.production.encrypted
+++ b/.env.production.encrypted
@@ -1 +1 @@
-eyJpdiI6IkQ1cVNROFBHNHk1WnBodjYrZDJJN3c9PSIsInZhbHVlIjoiTFhrUTRKWGZUc1hjdDFDb3FDWDhqYklHOHg0UXFiUHhteE9IRy9rZWJuT1lWTFlaMXlWUmVmbW41SFVDQW9zSkEwMTNSbmdKMHFtWTViWEdhM1hsejNVUnZ5UDRDSVo0SGM3aXBPdGNPNTR5WG1nMHFTZ2xyYU56RW1hY0JUZFJZTFg0TUQ2QjhlZEVaZjVzNzdsdE5RZ1lkblNiVlhYajJTOVpqMVVOaUFjV1Z1VmlsM09oZHRLSHY2TGdCQTVaOCs2dDh3ZkZLQXRuc3dRLzg4UzVGcEFPV2x3b3VxTkpVZ3lTL3BxNHhyTGJXUWRYeHkycVd2djczeUxDNE13VERBQXllUWpwK2NyRkxFSVd5OXg5aGhTeHFrcFRZVVFqMllxVFgySG9HNUdpNExMYXNIUVRrVjBGMW0rQ0RWTXc3NGgzY2tSdFlpOWFBVnpSUHI4NDB5eXc4TFFtS3NRYXRpTmQ0TFJHUVdQdjJBYkxaNE52dzlJQng2NFJaTDZqcHV1SHBlNnJMbmNvdGJRYk5DU2FDbEgvMGRncGZJQzJvRHVoRmhtUGlyVjZhWkxxR0J4U0Z5T2Nvb2xVaEN4Q2VzeGpReTFnUVBhYXlZQkNDd2dML1E2Zlh4akN5WnovVmcxbVZxeU5jWGoyMVFyVS9WRm9YQkNnVGVUdkxOSXliODN5MmdhWTNleCs3NjN3Mk81UzkvbDJ1QitWNXFqckhtT1VhSWpQM05hZzh3c09mSmJxd1B0Q3hnOVA0OUF2S1AyL3lFY3FtdWpzVTZoWHlxSWxwaUJnS055bFpVaWxmTjZZSmRFWnlGUlpCWDM2RWh5bjJwbk9iZ2VGMklOaFNHZnZnT0UycDdjWjZUdDBDQk13cGF6V0xpQWd6MFlialdCUk1IZkVyM3k2enhDODdHOWFkOW1TMlpId1ZJOWhaeCtEL0JmTk82THo3dFprclh6a0NaRnlKS1VqaVZaMXduZ3pEcFZ4SzNqYUE0eVhPZ0VSOGpPNzJFc0FZMXNkV2RQWUpQaWtPNlBLMGxKblNuK2NPKy9tY2tFZVJ6N09wWUVIUGRkZ2pNdm1Tb1V5M2tjTjNrSE1yVXozSlRkRXFuWTZobnR6bjJtNElXeGZTcVE0YitrS1ZnYmdCZFBvWnBsN1Fra3R6TG9Wakl3QVBHa25jMjlIUlB5ZWs5UmVHOU9VRS94azY1VHZtTnFtOVEwYjFJSUdvclhSZVBlRjl6N1FEQWk1UllMU0RSRWMwZDZ6SzRNN0lNVFprUXdIeXBNeG0zbUpvZ1JwbmJGalA2K1ZMSUR1Q3BEL1B4WE5uRE5VL2JrQjZPTGMzdnZOQVl5TzVOYStHVXc0ZTNwT05OcmE4ZDFwUFRTUDNBYTBIbEtjM1laeGswWHhFSzFJUVY3Yzhpc3BjNG1qei9GOG9hdTBobldiUG1QV0ZNK3psODZPbytqYmZCb1hFMWNlQVZDa0ZYcmJ6TkFDTllJRklFSGlRbnFqMnl5ZGNXNVQzR0J5ekF2bkQ5N3pZR0RXSGRiYXc0TzZtenQxaGs5YkozTjRabEI5MW8xRjFrRHkrWlByYlhqMStJNlpXdEN0Mk53K0J2SnR4VEZ2bDJZcmEzNWxoZzRwZXJqKzg1c3dKcDJucTJIYTA5anhON0picjdYSVZOZmVpWHdwZHNGWitjK0FjS282RmtGQ0lzS0toNVNHTWdZS2N4Nit6d2VDWklacVhBN0pxNzJlbjFNV2JJSU9VU3BVT0x3RVlzRkR6UFM3dGlKTmY2YzhoMVA4TDI0MVljVG8zdjd1ZEZOWXpQUzZLbkRTTVptWGhpcXd0aHpFRWpGV2tuK010c2g5cWh2eGlZVjZoa3RCOWkvNnZ5VUdPYTdZMjJ0VWZveUZaWFdCVGJSeEdwdFZuZnZuckNXMUxYNlQvUUIrTDB1KzNvT05Yazk3c2xBRXVhYjZCTUhoWkVCemErTEREMXZHdk50dkZCTHJsTFJGa2t3RFFzYTgxZ3I1QmJNYmRPSUVISUphMyttV01UMERlSi9ZbTNnK1ZTbjlvRktQcUlUTDI1ZnZPZzlXVGwrRG4yTk9VaU9YOEZoc2J1aDYwM1ZjZTByRG8zbjRveCtHcU0xS3dFM2E3OU1SR1NhbVVyOFJIVG8ycE1PcWY3YTdjbk9razE0NEYwTDFmY2FjYXRYTlVVa0hVTHVEK3E4dFl0M1ZPeW5tTnY5dFQ2NGZkZzhlWkYyd0N3PT0iLCJtYWMiOiJhYzBiMGY4YTZjNmU1NWFjMjIwOGQ5ODI4NmI1MzBiZDM3ZWM5MjdlZjZlMjIwYmE4MmY1Njg2M2U1ZWRlYzA4IiwidGFnIjoiIn0=
\ No newline at end of file
+eyJpdiI6IllyZGJESm9EcVlxWW5HZnArVXp2K1E9PSIsInZhbHVlIjoiRFlUVHhtRGYxSTlSK1pLUUxQblg0T1VXOFBTTVEzMEQ5S3I5NnBUdHFwbFNmY0JCQ1FGRFlsSTNnTURncnVxZitqWGlxcDEyUDZBKzFVc2NUSVV4S21iU21mN2dNcGk1NjRONlllTUVHVG5Nd00zR3duVXlDanROaFAxRnJvenlzT0NJRGZlM200YitmWCtZKzh0SEdORmdzU1ZnTmMySDFmbmVVTjlIUnl4ZXdEVGZTYmYxem5aSTBXWjJHZU9DeEg5NTZtTlNWVXhCelpCUU04Mi9EN3FnR3habjdqdGtLWjRoU24zcXI4cThMZ3pkeVJRaENFZzJaUzlhOGhtMXk0RFZPTEJRdEVzM3JraHhvdXdycllPWkZsL0pCb0JSVys3VDgyTjRqNmhESzlJTGRvVUNNeVVyV1V4dE9JbUJ2bzdaNUZTbWFNdXhGT0hZODRyeXBvZXdwck5FQzlkdGRTdHhxZmNGd2lzdCszZk9IWGdZUXk3RWxMVjFBRktpR3k1WUJ6NGtUbjh1dFdobXVERUhaODAzbWw3KytaczkyTFVOU3g0amt6WmM2dk1hSVFheWdrMzRpcnpPWHJqbnJQL2s3UG8rdTVBbjZyMWt3RUNrTFNFWG1CaTBwUTJ2U2hmVlNzRlhBS1llZ0JyL1ErK2lZMDY1TU1YRDVSUmt3dVRSMEdiV0VHUDdReEhCbDJoN2RlOGYxbFB3bFVRQ2JzSzEva3p3R1BxcW5md3pZc0xNb0RqZHRKekZkalo4TWtXL29sZFNNYlVSWlpHdEgvbFY4dmsrQ1IyZGJQTThYeWoxek1QL1Jwb3IzWnA2dDd2eW1qSG5yalB2bzZ3NFJIZFUybnpWVWI2VEdQbCtGNjhzdFJQZ0RnYlNkaUEzL2JId3puY2poZThGbVlOUXFSOVp3VzVza1hhMG90K0tlNWdBQXV5UjJqWnJXM1R0VzhqMjFaSWI3TnY0QlBMQkMwNDVZVCt1V1Nmb09IMUR0QXA0Wk9RcVFzV1huU0s0d3MzNVV5S2JHSnp3V2Nxa3ZMeFNDSG1MYjFPdm1hK0lSTC9XT1kxeGFJc0xrTnl0eUVxYUxHdk95SjE5R1FUNjNPSzBFTjNPUnVOWHlmcHlEbEE3ZmJGOWY2aE84ZlUvWmtkYXBjUnQvd0ZxTmpQYjRzVHlLa3ZxanBBMXdkQUV3MGpBNlp1NlI1N3dlSkRjRGtobTNrUEtCbVR4WHM3SkgyTlBvVDFhK2M4b1hJL3N1aUNMSUl0L3N4ZDduTzJsU2JHeUd5VG14d3V0TGtWc3J4U2tUL1pOQ0orbE9RVjR6Q3UwcWJIbG41VmM1VVByK1JVcVBmcHlrWjFyRFBibytMbkJ5Y0xFNGppaFlVOFh3bGJrT29mclhPQzkzdFhHNVpiNHB6dCtQTFJGWXpRQTdCZFRhcXU5WVlNei92L21BejVlNHAxYytPYUZjVVYwdkQ0ZVJCNUgyeWs3Z1paVXZaWGdrQ2ZvOFlFMEg3ZUxCZ2lXeTY2TEdiSHVQUW5teEIyRkQ0bjJkajdsNGNVcWNKRWVDamVvUHR2SEphNWRaZjFXR2RQZzRTTEREL1lOQWovU3M1LzNXYWpNamhEMU5wZHBhT1NNeGpPL3lYakQ4UVRMZG9qcUpWTjhwOHNIZ0hFN3MrYWI4QVJUWk82ajd4MFpEVDREOEJQVXVsMEo0K2ZGSzY1WDRkdkNLNUVublJzbTNQRkx5VkxkajdaNG5lNGlYbGxPS1Azc3loOVk3YWxxQmFqbkJidzkzV2tVa1laMjl3eU1DRld3NG9DSjdmdW9PT2p2N1NCRllsWmxWamJjR3IwZ1Fpb01hVkNjSTZYMlFEb1VjRjIySGVtZ0NBNlNFREg5SEIrYzdBZ0NRVWNmLzJZTCtta2JETjlRWWt4bWJ3d0Noek80UkwwRmkwaTZza2h0cklDRUZVM1RMbVgwU0szb0QvMldFOUY0Z1hIbE11UjZmZ2VyVkQvUThMdUF2czBrTG8rVlpGSTQrLzNCOGJvaGRHYThlQnp1bnZWU2luWm1adWJwLzdZdkFlUVhKWXJLNkRmTU1JU0xSakUwdURhSFgreDdPenlmUkdwT2xrd1BUa2dqYVRPTXNEanZFb0twTmNhcDV2cU1WakRZRHpDRlpmL0h1b0V3SlJUd0VQTHhWaWl1bHdsOS9GTmFiSHNPZExaajdJc2dVUElaOVpvdFo2TzdsSm44NHhQVm5ISS8wdHEybStMS3p2R3ZxcjZPWEswUUNHS1RpRG9XaHVxNXJuak9uRUtxOVd2QXpUYkdnM3k5bTRQMFJwamlURklzKy80NzdPcXdiK0hVMWJtK2pMK2VsVWtLQVl0MVpLMnVCejZ5eDZjbmE1VVVNR0JiWFo3WC9QVEhVWklYcGFOQUdVU1c4U1pjNVZCNUEzOVZXTVB0NGtvS3BCMHNsWWU5WXJHY3RvMVFmQWw3MXpBV2UwRUlHNTZ2WUU4Ynp6N3owV2o4OGQ5dkk0WU8wK3pDQzgyaDlEcGRwOVRBaDJGWGZ3eHZoem0xTk1DaE94YnJuZVU4d1lEcng5RVgrV1JvNXRyaktia3lLaWxTaEtqMk1QWlhiN3hwNGdPNHN2aVpZU0tRSy9VMGgvVmIxaVFKSW9mQTJhdFBYQkdNRWdlMUZNbktkTm5pWXpHSE12UFVyeEVNdzZHVGUzMDdMbWMxM05xNHAzeWhWRzN2eTlSRHNZcU9ud0lpTS93WDNZbGcwQTl3bVdGK0VKZXhRdUhTdDQ0VEJvUUhadmJaMXA4SXNSWG40bmN4QXdmUE85QmY1ek5oc3Z3ak5zQkhTY1p2Y0xLMlBiVmh6YlRQMS9iY25wenRWeTd5UjMvWE9DMTFjY2FXSnRBRXFDYXJnNWVtWWZyQnErSXZKQlljT2c9PSIsIm1hYyI6ImM5MzJjM2Q3ZWY2MWZiYTRjZTEwOTNjNmJmYzZkM2EwMmEwYWI5NDRmM2VhODJlMjQ5YTYyZjJkZTg2MmNlNTQiLCJ0YWciOiIifQ==
\ No newline at end of file
diff --git a/README.md b/README.md
index 6ac6b6fb..ccf51c1a 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,8 @@ And just thinking how to make some of those flows work in a Laravel environment
 [![LaraChain Full Demo](https://img.youtube.com/vi/cz7d6d3pk4o/0.jpg)](https://www.youtube.com/watch?v=cz7d6d3pk4o)
 
 
+
 ## Make sure to setup Reverb 
 
-Per the Laravel docs https://laravel.com/docs/11.x/reverb
\ No newline at end of file
+Per the Laravel docs https://laravel.com/docs/11.x/reverb
+
diff --git a/package-lock.json b/package-lock.json
index f616eb7a..ab73771a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "larachain",
+    "name": "ai-hub",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index ca2cd5c3..a21c7cfb 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -1,5 +1,9 @@
 <script setup>
 import { Head, Link } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+import { ArrowPathIcon, CloudArrowUpIcon, LightBulbIcon, FingerPrintIcon, LockClosedIcon, BoltIcon } from '@heroicons/vue/24/outline'
+
 
 defineProps({
     canLogin: {
@@ -18,161 +22,492 @@ defineProps({
     },
 });
 
+const cases = [
+
+
+    {
+        name: 'Harmonize Your Data',
+        description:
+            'Seamless integration and organization of various data sources into a unified, coherent system.',
+        icon: CloudArrowUpIcon,
+    },
+    {
+        name: 'Empower',
+        description:
+            'Our Platform enables secure, efficient teamwork and sharing of insights within and across teams.',
+        icon: BoltIcon,
+    },
+    {
+        name: 'Illuminate',
+        description:
+            'Actionable intelligence, thereby enlightening decision-making processes.',
+        icon: LightBulbIcon,
+    },
+]
+
 function handleImageError() {
     document.getElementById('screenshot-container')?.classList.add('!hidden');
     document.getElementById('docs-card')?.classList.add('!row-span-1');
     document.getElementById('docs-card-content')?.classList.add('!flex-row');
     document.getElementById('background')?.classList.add('!hidden');
 }
+
+const activeTab = ref('hormonize');
+
+const setActiveTab = (tab) => {
+    activeTab.value = tab;
+};
+
 </script>
 
 <template>
-    <Head title="Welcome" />
-    <div class="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
-        <img id="background" class="absolute -left-20 top-0 max-w-[877px]" src="https://laravel.com/assets/img/welcome/background.svg" />
-        <div class="relative min-h-screen flex flex-col items-center justify-center selection:bg-[#FF2D20] selection:text-white">
-            <div class="relative w-full max-w-2xl px-6 lg:max-w-7xl">
-                <header class="grid grid-cols-2 items-center gap-2 py-10 lg:grid-cols-3">
-                    <div class="flex lg:justify-center lg:col-start-2">
-                        <svg class="h-12 w-auto text-white lg:h-16 lg:text-[#FF2D20]" viewBox="0 0 62 65" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" fill="currentColor"/></svg>
+    <Head>
+        <title>Welcome</title>
+    </Head>
+    <div class="bg-gray-900">
+        <main>
+            <!-- Hero section -->
+            <div class="relative isolate overflow-hidden">
+                <svg class="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
+                    aria-hidden="true">
+                    <defs>
+                        <pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1"
+                            patternUnits="userSpaceOnUse">
+                            <path d="M.5 200V.5H200" fill="none" />
+                        </pattern>
+                    </defs>
+                    <svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
+                        <path
+                            d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+                            stroke-width="0" />
+                    </svg>
+                    <rect width="100%" height="100%" stroke-width="0"
+                        fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" />
+                </svg>
+                <div class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
+                    aria-hidden="true">
+                    <div class="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
+                        style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)">
                     </div>
-                    <nav v-if="canLogin" class="-mx-3 flex flex-1 justify-end">
-                        <Link
-                            v-if="$page.props.auth.user"
-                            :href="route('dashboard')"
-                            class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
-                        >
-                            Dashboard
-                        </Link>
-
-                        <template v-else>
-                            <Link
-                                :href="route('login')"
-                                class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
-                            >
-                                Log in
-                            </Link>
-
-                            <Link
-                                v-if="canRegister"
-                                :href="route('register')"
-                                class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
-                            >
-                                Register
-                            </Link>
-                        </template>
-                    </nav>
-                </header>
-
-                <main class="mt-6">
-                    <div class="grid gap-6 lg:grid-cols-2 lg:gap-8">
-                        <a
-                            href="https://laravel.com/docs"
-                            id="docs-card"
-                            class="flex flex-col items-start gap-6 overflow-hidden rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] md:row-span-3 lg:p-10 lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
-                        >
-                            <div id="screenshot-container" class="relative flex w-full flex-1 items-stretch">
-                                <img
-                                    src="https://laravel.com/assets/img/welcome/docs-light.svg"
-                                    alt="Laravel documentation screenshot"
-                                    class="aspect-video h-full w-full flex-1 rounded-[10px] object-top object-cover drop-shadow-[0px_4px_34px_rgba(0,0,0,0.06)] dark:hidden"
-                                    @error="handleImageError"
-                                />
-                                <img
-                                    src="https://laravel.com/assets/img/welcome/docs-dark.svg"
-                                    alt="Laravel documentation screenshot"
-                                    class="hidden aspect-video h-full w-full flex-1 rounded-[10px] object-top object-cover drop-shadow-[0px_4px_34px_rgba(0,0,0,0.25)] dark:block"
-                                />
-                                <div
-                                    class="absolute -bottom-16 -left-16 h-40 w-[calc(100%+8rem)] bg-gradient-to-b from-transparent via-white to-white dark:via-zinc-900 dark:to-zinc-900"
-                                ></div>
-                            </div>
-
-                            <div class="relative flex items-center gap-6 lg:items-end">
-                                <div id="docs-card-content" class="flex items-start gap-6 lg:flex-col">
-                                    <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
-                                        <svg class="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#FF2D20" d="M23 4a1 1 0 0 0-1.447-.894L12.224 7.77a.5.5 0 0 1-.448 0L2.447 3.106A1 1 0 0 0 1 4v13.382a1.99 1.99 0 0 0 1.105 1.79l9.448 4.728c.14.065.293.1.447.1.154-.005.306-.04.447-.105l9.453-4.724a1.99 1.99 0 0 0 1.1-1.789V4ZM3 6.023a.25.25 0 0 1 .362-.223l7.5 3.75a.251.251 0 0 1 .138.223v11.2a.25.25 0 0 1-.362.224l-7.5-3.75a.25.25 0 0 1-.138-.22V6.023Zm18 11.2a.25.25 0 0 1-.138.224l-7.5 3.75a.249.249 0 0 1-.329-.099.249.249 0 0 1-.033-.12V9.772a.251.251 0 0 1 .138-.224l7.5-3.75a.25.25 0 0 1 .362.224v11.2Z"/><path fill="#FF2D20" d="m3.55 1.893 8 4.048a1.008 1.008 0 0 0 .9 0l8-4.048a1 1 0 0 0-.9-1.785l-7.322 3.706a.506.506 0 0 1-.452 0L4.454.108a1 1 0 0 0-.9 1.785H3.55Z"/></svg>
-                                    </div>
+                </div>
+                <div class="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-40 lg:flex lg:px-8 lg:pt-40">
+                    <div class="mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8">
+                        <img class="h-11" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
+                            alt="Your Company">
+                        <div class="mt-24 sm:mt-32 lg:mt-16">
+                            <a href="#" class="inline-flex space-x-6">
+                                <span
+                                    class="rounded-full bg-indigo-500/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-400 ring-1 ring-inset ring-indigo-500/20">Latest
+                                    updates</span>
+                                <span
+                                    class="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-gray-300">
+                                    <span>Just shipped v1.0</span>
+                                    <svg class="h-5 w-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor"
+                                        aria-hidden="true">
+                                        <path fill-rule="evenodd"
+                                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                </span>
+                            </a>
+                        </div>
+                        <h1 class="mt-10 text-4xl font-bold tracking-tight text-white sm:text-6xl">Transform Your Data
+                            into Insights</h1>
+                        <p class="mt-6 text-lg leading-8 text-gray-300">
+                            Simplify complex data processes with an intuitive platform designed to empower your
+                            decisions.
+                        </p>
+                        <div class="mt-10 flex items-center gap-x-6">
 
-                                    <div class="pt-3 sm:pt-5 lg:pt-0">
-                                        <h2 class="text-xl font-semibold text-black dark:text-white">Documentation</h2>
+                        </div>
+                    </div>
+                    <div
+                        class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
+                        <div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
+                            <img src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+                                alt="App screenshot" width="2432" height="1442"
+                                class="w-[76rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10">
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-                                        <p class="mt-4 text-sm/relaxed">
-                                            Laravel has wonderful documentation covering every aspect of the framework. Whether you are a newcomer or have prior experience with Laravel, we recommend reading our documentation from beginning to end.
-                                        </p>
+            <!-- Cases Simplified -->
+            <div class="py-24 sm:py-32">
+                <div class="mx-auto max-w-7xl px-6 lg:px-8">
+                    <div class="mx-auto max-w-2xl lg:text-center">
+                        <h2 class="text-base font-semibold leading-7 text-indigo-600">Your Data</h2>
+                        <p class="mt-2 text-3xl font-bold tracking-tight text-gray-300 sm:text-4xl">
+                            Your Data, Your Rules, Our Tooling to make it happen
+                        </p>
+                        <p class="mt-6 text-lg leading-8 text-gray-400">
+                            A comprehensive suite of tools tailored to optimize your data journey from ingestion to
+                            insights.
+                        </p>
+                    </div>
+                    <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
+                        <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
+                            <div v-for="caseItem in cases" :key="caseItem.name" class="relative pl-16">
+                                <dt class="text-base font-semibold leading-7 text-gray-200">
+                                    <div
+                                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
+                                        <component :is="caseItem.icon" class="h-6 w-6 text-white" aria-hidden="true" />
                                     </div>
-                                </div>
-
-                                <svg class="size-6 shrink-0 stroke-[#FF2D20]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"/></svg>
+                                    {{ caseItem.name }}
+                                </dt>
+                                <dd class="mt-2 text-base leading-7 text-gray-300">{{ caseItem.description }}</dd>
                             </div>
-                        </a>
+                        </dl>
+                    </div>
+                </div>
+            </div>
 
-                        <div
-                            class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
-                        >
-                            <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
-                                <svg class="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="#FF2D20"><path d="M24 8.25a.5.5 0 0 0-.5-.5H.5a.5.5 0 0 0-.5.5v12a2.5 2.5 0 0 0 2.5 2.5h19a2.5 2.5 0 0 0 2.5-2.5v-12Zm-7.765 5.868a1.221 1.221 0 0 1 0 2.264l-6.626 2.776A1.153 1.153 0 0 1 8 18.123v-5.746a1.151 1.151 0 0 1 1.609-1.035l6.626 2.776ZM19.564 1.677a.25.25 0 0 0-.177-.427H15.6a.106.106 0 0 0-.072.03l-4.54 4.543a.25.25 0 0 0 .177.427h3.783c.027 0 .054-.01.073-.03l4.543-4.543ZM22.071 1.318a.047.047 0 0 0-.045.013l-4.492 4.492a.249.249 0 0 0 .038.385.25.25 0 0 0 .14.042h5.784a.5.5 0 0 0 .5-.5v-2a2.5 2.5 0 0 0-1.925-2.432ZM13.014 1.677a.25.25 0 0 0-.178-.427H9.101a.106.106 0 0 0-.073.03l-4.54 4.543a.25.25 0 0 0 .177.427H8.4a.106.106 0 0 0 .073-.03l4.54-4.543ZM6.513 1.677a.25.25 0 0 0-.177-.427H2.5A2.5 2.5 0 0 0 0 3.75v2a.5.5 0 0 0 .5.5h1.4a.106.106 0 0 0 .073-.03l4.54-4.543Z"/></g></svg>
-                            </div>
+            <div class="text-2xl text-gray-500 flex mx-auto text-center justify-center font-semibold mt-10"
+                v-auto-animate>
+
+                <div v-if="activeTab == 'harmonize'">
+                    Seamless integration and organization of various data sources into a unified, coherent system
+                </div>
+                <div v-if="activeTab == 'empower'">
+                    Our Platform enables secure, efficient teamwork and sharing of insights within and across teams.
+                </div>
+
+                <div v-if="activeTab == 'illuminate'">
+                    Actionable intelligence, thereby enlightening decision-making processes.
+                </div>
+            </div>
 
-                            <div class="pt-3 sm:pt-5">
-                                <h2 class="text-xl font-semibold text-black dark:text-white">Example Charts</h2>
 
-                                <p class="mt-4 text-sm/relaxed">
-                                    Using the ApexCharts library <a href="https://apexcharts.com/vue-chart-demos/" target="_blank">here</a> we get a set of modern and responsive charts that can be easily integrated into your application.
+            <!-- Feature section -->
+            <div class="mx-auto mt-32 max-w-7xl px-6 sm:mt-24 lg:px-8">
+                <div class="mx-auto max-w-2xl text-center">
+                    <h2 class="text-base font-semibold leading-7 text-indigo-400">Data Unleashed</h2>
+                    <p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">Everything You Need to
+                        Unleash Data's Potential</p>
+                    <p class="mt-6 text-lg leading-8 text-gray-300">
+                        A comprehensive suite of tools tailored to optimize your data journey from ingestion to
+                        insights.
+                    </p>
+                </div>
+                <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
+                    <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+                        <div class="flex flex-col">
+                            <dt class="text-base font-semibold leading-7 text-white">
+                                <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-500">
+                                    <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                        stroke="currentColor" aria-hidden="true">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                                    </svg>
+                                </div>
+                                Seamless Data Integration
+                            </dt>
+                            <dd class="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-300">
+                                <p class="flex-auto">Connect effortlessly with various data sources to streamline your
+                                    workflow. Experience the ease of bringing all your data together.</p>
+                                <p class="mt-6">
+                                    <a href="#" class="text-sm font-semibold leading-6 text-indigo-400">Learn more <span
+                                            aria-hidden="true">→</span></a>
                                 </p>
-                            </div>
+                            </dd>
+                        </div>
+                        <div class="flex flex-col">
+                            <dt class="text-base font-semibold leading-7 text-white">
+                                <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-500">
+                                    <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                        stroke="currentColor" aria-hidden="true">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+                                    </svg>
+                                </div>
+                                Advanced Data Processing
+                            </dt>
+                            <dd class="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-300">
+                                <p class="flex-auto">
+                                    Harness powerful analytics to transform raw data into actionable insights. Dive
+                                    deeper with less effort.
+                                </p>
+                                <p class="mt-6">
+                                    <a href="#" class="text-sm font-semibold leading-6 text-indigo-400">Learn more <span
+                                            aria-hidden="true">→</span></a>
+                                </p>
+                            </dd>
+                        </div>
+                        <div class="flex flex-col">
+                            <dt class="text-base font-semibold leading-7 text-white">
+                                <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-500">
+                                    <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                        stroke="currentColor" aria-hidden="true">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
+                                    </svg>
+                                </div>
+                                Collaborative Data Environment
+                            </dt>
+                            <dd class="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-300">
+                               <p>
+                                    Through 'Collaborate with Clarity' and 'Share Insights Seamlessly,' we make teamwork more efficient and communication crystal clear, empowering your projects with shared understanding and actionable insights.
+                                </p>
+                                <p class="mt-6">
+                                    <a href="#" class="text-sm font-semibold leading-6 text-indigo-400">Learn more <span
+                                            aria-hidden="true">→</span></a>
+                                </p>
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
 
-                            <Link :href="route('example.charts')" class="self-center">
-                                <svg class="size-6 shrink-0 self-center stroke-[#FF2D20]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"/></svg>
-                            </Link>
+            <!-- Feature section -->
+            <div class="mt-32 sm:mt-56">
+                <div class="mx-auto max-w-7xl px-6 lg:px-8">
+                    <div class="mx-auto max-w-2xl sm:text-center">
+                        <h2 class="text-base font-semibold leading-7 text-indigo-400">Everything you need</h2>
+                        <p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">No server? No problem.
+                        </p>
+                        <p class="mt-6 text-lg leading-8 text-gray-300">Our cloud-based solution scales with your needs,
+                            ensuring you have the power to handle data without the overhead</p>
+                    </div>
+                </div>
+                <div class="relative overflow-hidden pt-16">
+                    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+                        <img src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+                            alt="App screenshot" class="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-white/10"
+                            width="2432" height="1442">
+                        <div class="relative" aria-hidden="true">
+                            <div class="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-gray-900 pt-[7%]"></div>
                         </div>
-                        <div
-                            class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
-                        >
-                            <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
-                                <svg class="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="#FF2D20"><path d="M24 8.25a.5.5 0 0 0-.5-.5H.5a.5.5 0 0 0-.5.5v12a2.5 2.5 0 0 0 2.5 2.5h19a2.5 2.5 0 0 0 2.5-2.5v-12Zm-7.765 5.868a1.221 1.221 0 0 1 0 2.264l-6.626 2.776A1.153 1.153 0 0 1 8 18.123v-5.746a1.151 1.151 0 0 1 1.609-1.035l6.626 2.776ZM19.564 1.677a.25.25 0 0 0-.177-.427H15.6a.106.106 0 0 0-.072.03l-4.54 4.543a.25.25 0 0 0 .177.427h3.783c.027 0 .054-.01.073-.03l4.543-4.543ZM22.071 1.318a.047.047 0 0 0-.045.013l-4.492 4.492a.249.249 0 0 0 .038.385.25.25 0 0 0 .14.042h5.784a.5.5 0 0 0 .5-.5v-2a2.5 2.5 0 0 0-1.925-2.432ZM13.014 1.677a.25.25 0 0 0-.178-.427H9.101a.106.106 0 0 0-.073.03l-4.54 4.543a.25.25 0 0 0 .177.427H8.4a.106.106 0 0 0 .073-.03l4.54-4.543ZM6.513 1.677a.25.25 0 0 0-.177-.427H2.5A2.5 2.5 0 0 0 0 3.75v2a.5.5 0 0 0 .5.5h1.4a.106.106 0 0 0 .073-.03l4.54-4.543Z"/></g></svg>
-                            </div>
+                    </div>
+                </div>
+                <div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
+                    <dl
+                        class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
+                        <div class="relative pl-9">
+                            <dt class="inline font-semibold text-white">
+                                <svg class="absolute left-1 top-1 h-5 w-5 text-indigo-500" viewBox="0 0 20 20"
+                                    fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd"
+                                        d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                Easy upload or import
+                            </dt>
+                            <dd class="inline">Easy to upload documents and integrate data.</dd>
+                        </div>
+                        <div class="relative pl-9">
+                            <dt class="inline font-semibold text-white">
+                                <svg class="absolute left-1 top-1 h-5 w-5 text-indigo-500" viewBox="0 0 20 20"
+                                    fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd"
+                                        d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                Organize and Secure
+                            </dt>
+                            <dd class="inline">Group documents around projects or teams for organized workflows.</dd>
+                        </div>
+                        <div class="relative pl-9">
+                            <dt class="inline font-semibold text-white">
+                                <svg class="absolute left-1 top-1 h-5 w-5 text-indigo-500" viewBox="0 0 20 20"
+                                    fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd"
+                                        d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                Search Smartly
+                            </dt>
+                            <dd class="inline">Query your data efficiently with fast, intuitive tools.</dd>
+                        </div>
+                        <div class="relative pl-9">
+                            <dt class="inline font-semibold text-white">
+                                <svg class="absolute left-1 top-1 h-5 w-5 text-indigo-500" viewBox="0 0 20 20"
+                                    fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd"
+                                        d="M10 2.5c-1.31 0-2.526.386-3.546 1.051a.75.75 0 01-.82-1.256A8 8 0 0118 9a22.47 22.47 0 01-1.228 7.351.75.75 0 11-1.417-.49A20.97 20.97 0 0016.5 9 6.5 6.5 0 0010 2.5zM4.333 4.416a.75.75 0 01.218 1.038A6.466 6.466 0 003.5 9a7.966 7.966 0 01-1.293 4.362.75.75 0 01-1.257-.819A6.466 6.466 0 002 9c0-1.61.476-3.11 1.295-4.365a.75.75 0 011.038-.219zM10 6.12a3 3 0 00-3.001 3.041 11.455 11.455 0 01-2.697 7.24.75.75 0 01-1.148-.965A9.957 9.957 0 005.5 9c0-.028.002-.055.004-.082a4.5 4.5 0 018.996.084V9.15l-.005.297a.75.75 0 11-1.5-.034c.003-.11.004-.219.005-.328a3 3 0 00-3-2.965zm0 2.13a.75.75 0 01.75.75c0 3.51-1.187 6.745-3.181 9.323a.75.75 0 11-1.186-.918A13.687 13.687 0 009.25 9a.75.75 0 01.75-.75zm3.529 3.698a.75.75 0 01.584.885 18.883 18.883 0 01-2.257 5.84.75.75 0 11-1.29-.764 17.386 17.386 0 002.078-5.377.75.75 0 01.885-.584z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                Easy Secure Access
+                            </dt>
+                            <dd class="inline">Access your insights through a user-friendly UI or direct API calls.</dd>
+                        </div>
+                        <div class="relative pl-9">
+                            <dt class="inline font-semibold text-white">
+                                <svg class="absolute left-1 top-1 h-5 w-5 text-indigo-500" viewBox="0 0 20 20"
+                                    fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd"
+                                        d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                Deploy anywhere
+                            </dt>
+                            <dd class="inline">Deploy flexibly with options for hosted or self-hosted solutions,
+                                tailored to your security needs.</dd>
+                        </div>
+                        <div class="relative pl-9">
+                            <dt class="inline font-semibold text-white">
+                                <svg class="absolute left-1 top-1 h-5 w-5 text-indigo-500" viewBox="0 0 20 20"
+                                    fill="currentColor" aria-hidden="true">
+                                    <path
+                                        d="M4.632 3.533A2 2 0 016.577 2h6.846a2 2 0 011.945 1.533l1.976 8.234A3.489 3.489 0 0016 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234z" />
+                                    <path fill-rule="evenodd"
+                                        d="M4 13a2 2 0 100 4h12a2 2 0 100-4H4zm11.24 2a.75.75 0 01.75-.75H16a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75V15zm-2.25-.75a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 00.75-.75V15a.75.75 0 00-.75-.75h-.01z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                For Anyone
+                            </dt>
+                            <dd class="inline">Easy enough for the non-technical. Deep enough for the technical</dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
 
-                            <div class="pt-3 sm:pt-5">
-                                <h2 class="text-xl font-semibold text-black dark:text-white">Example Chat Bot (Login First)</h2>
+            <!-- Stats -->
+            <div class="mx-auto mt-32 max-w-7xl px-6 sm:mt-56 lg:px-8">
+                <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
+                    <h2 class="text-base font-semibold leading-8 text-indigo-400">Our track record</h2>
+                    <p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">Trusted by thousands of
+                        developers&nbsp;worldwide</p>
+                    <p class="mt-6 text-lg leading-8 text-gray-300">Lorem ipsum, dolor sit amet consectetur adipisicing
+                        elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
+                </div>
+                <dl
+                    class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 text-white sm:mt-20 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4">
+                    <div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
+                        <dt class="text-sm leading-6">Developers on the platform</dt>
+                        <dd class="order-first text-3xl font-semibold tracking-tight">8,000+</dd>
+                    </div>
+                    <div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
+                        <dt class="text-sm leading-6">Daily requests</dt>
+                        <dd class="order-first text-3xl font-semibold tracking-tight">900m+</dd>
+                    </div>
+                    <div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
+                        <dt class="text-sm leading-6">Uptime guarantee</dt>
+                        <dd class="order-first text-3xl font-semibold tracking-tight">99.9%</dd>
+                    </div>
+                    <div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
+                        <dt class="text-sm leading-6">Projects deployed</dt>
+                        <dd class="order-first text-3xl font-semibold tracking-tight">12m</dd>
+                    </div>
+                </dl>
+            </div>
 
-                                <p class="mt-4 text-sm/relaxed">
-                                    We will show what a chatbot can look like in a report.
-                                </p>
-                            </div>
+            <!-- CTA section -->
+            <div class="relative isolate mt-32 px-6 py-32 sm:mt-56 sm:py-40 lg:px-8">
+                <svg class="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
+                    aria-hidden="true">
+                    <defs>
+                        <pattern id="1d4240dd-898f-445f-932d-e2872fd12de3" width="200" height="200" x="50%" y="0"
+                            patternUnits="userSpaceOnUse">
+                            <path d="M.5 200V.5H200" fill="none" />
+                        </pattern>
+                    </defs>
+                    <svg x="50%" y="0" class="overflow-visible fill-gray-800/20">
+                        <path
+                            d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+                            stroke-width="0" />
+                    </svg>
+                    <rect width="100%" height="100%" stroke-width="0"
+                        fill="url(#1d4240dd-898f-445f-932d-e2872fd12de3)" />
+                </svg>
+                <div class="absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
+                    aria-hidden="true">
+                    <div class="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
+                        style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)">
+                    </div>
+                </div>
+                <div class="mx-auto max-w-2xl text-center">
+                    <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Boost Your
+                        Productivity<br>Simplify your data, amplify your insights.</h2>
+                    <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-300">Start harnessing the full potential
+                        of your data with our platform today.</p>
+                    <div class="mt-10 flex items-center justify-center gap-x-6">
+                        <a href="#"
+                            class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get
+                            started</a>
+                        <a href="#" class="text-sm font-semibold leading-6 text-white">Learn more <span
+                                aria-hidden="true">→</span></a>
+                    </div>
+                </div>
+            </div>
 
-                            <Link :href="route('example.chatbot.show')" class="self-center">
-                                <svg class="size-6 shrink-0 self-center stroke-[#FF2D20]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"/></svg>
-                            </Link>
-                        </div>                        
+            <!-- Logo cloud -->
+            <div class="mx-auto mt-8 max-w-7xl px-6 sm:mt-16 lg:px-8">
+                <h2 class="text-center text-lg font-semibold leading-8 text-white">The world’s most innovative companies
+                    use our app</h2>
+                <div
+                    class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+                    <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+                        src="https://tailwindui.com/img/logos/158x48/transistor-logo-white.svg" alt="Transistor"
+                        width="158" height="48">
+                    <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+                        src="https://tailwindui.com/img/logos/158x48/reform-logo-white.svg" alt="Reform" width="158"
+                        height="48">
+                    <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+                        src="https://tailwindui.com/img/logos/158x48/tuple-logo-white.svg" alt="Tuple" width="158"
+                        height="48">
+                    <img class="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
+                        src="https://tailwindui.com/img/logos/158x48/savvycal-logo-white.svg" alt="SavvyCal" width="158"
+                        height="48">
+                    <img class="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
+                        src="https://tailwindui.com/img/logos/158x48/statamic-logo-white.svg" alt="Statamic" width="158"
+                        height="48">
+                </div>
+            </div>
 
+        </main>
 
-                        <div class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800">
-                            <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
-                                <svg class="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                    <g fill="#FF2D20">
-                                        <path
-                                            d="M16.597 12.635a.247.247 0 0 0-.08-.237 2.234 2.234 0 0 1-.769-1.68c.001-.195.03-.39.084-.578a.25.25 0 0 0-.09-.267 8.8 8.8 0 0 0-4.826-1.66.25.25 0 0 0-.268.181 2.5 2.5 0 0 1-2.4 1.824.045.045 0 0 0-.045.037 12.255 12.255 0 0 0-.093 3.86.251.251 0 0 0 .208.214c2.22.366 4.367 1.08 6.362 2.118a.252.252 0 0 0 .32-.079 10.09 10.09 0 0 0 1.597-3.733ZM13.616 17.968a.25.25 0 0 0-.063-.407A19.697 19.697 0 0 0 8.91 15.98a.25.25 0 0 0-.287.325c.151.455.334.898.548 1.328.437.827.981 1.594 1.619 2.28a.249.249 0 0 0 .32.044 29.13 29.13 0 0 0 2.506-1.99ZM6.303 14.105a.25.25 0 0 0 .265-.274 13.048 13.048 0 0 1 .205-4.045.062.062 0 0 0-.022-.07 2.5 2.5 0 0 1-.777-.982.25.25 0 0 0-.271-.149 11 11 0 0 0-5.6 2.815.255.255 0 0 0-.075.163c-.008.135-.02.27-.02.406.002.8.084 1.598.246 2.381a.25.25 0 0 0 .303.193 19.924 19.924 0 0 1 5.746-.438ZM9.228 20.914a.25.25 0 0 0 .1-.393 11.53 11.53 0 0 1-1.5-2.22 12.238 12.238 0 0 1-.91-2.465.248.248 0 0 0-.22-.187 18.876 18.876 0 0 0-5.69.33.249.249 0 0 0-.179.336c.838 2.142 2.272 4 4.132 5.353a.254.254 0 0 0 .15.048c1.41-.01 2.807-.282 4.117-.802ZM18.93 12.957l-.005-.008a.25.25 0 0 0-.268-.082 2.21 2.21 0 0 1-.41.081.25.25 0 0 0-.217.2c-.582 2.66-2.127 5.35-5.75 7.843a.248.248 0 0 0-.09.299.25.25 0 0 0 .065.091 28.703 28.703 0 0 0 2.662 2.12.246.246 0 0 0 .209.037c2.579-.701 4.85-2.242 6.456-4.378a.25.25 0 0 0 .048-.189 13.51 13.51 0 0 0-2.7-6.014ZM5.702 7.058a.254.254 0 0 0 .2-.165A2.488 2.488 0 0 1 7.98 5.245a.093.093 0 0 0 .078-.062 19.734 19.734 0 0 1 3.055-4.74.25.25 0 0 0-.21-.41 12.009 12.009 0 0 0-10.4 8.558.25.25 0 0 0 .373.281 12.912 12.912 0 0 1 4.826-1.814ZM10.773 22.052a.25.25 0 0 0-.28-.046c-.758.356-1.55.635-2.365.833a.25.25 0 0 0-.022.48c1.252.43 2.568.65 3.893.65.1 0 .2 0 .3-.008a.25.25 0 0 0 .147-.444c-.526-.424-1.1-.917-1.673-1.465ZM18.744 8.436a.249.249 0 0 0 .15.228 2.246 2.246 0 0 1 1.352 2.054c0 .337-.08.67-.23.972a.25.25 0 0 0 .042.28l.007.009a15.016 15.016 0 0 1 2.52 4.6.25.25 0 0 0 .37.132.25.25 0 0 0 .096-.114c.623-1.464.944-3.039.945-4.63a12.005 12.005 0 0 0-5.78-10.258.25.25 0 0 0-.373.274c.547 2.109.85 4.274.901 6.453ZM9.61 5.38a.25.25 0 0 0 .08.31c.34.24.616.561.8.935a.25.25 0 0 0 .3.127.631.631 0 0 1 .206-.034c2.054.078 4.036.772 5.69 1.991a.251.251 0 0 0 .267.024c.046-.024.093-.047.141-.067a.25.25 0 0 0 .151-.23A29.98 29.98 0 0 0 15.957.764a.25.25 0 0 0-.16-.164 11.924 11.924 0 0 0-2.21-.518.252.252 0 0 0-.215.076A22.456 22.456 0 0 0 9.61 5.38Z"
-                                        />
-                                    </g>
-                                </svg>
-                            </div>
 
-                            <div class="pt-3 sm:pt-5">
-                                <h2 class="text-xl font-semibold text-black dark:text-white">Vibrant Ecosystem</h2>
 
-                                <p class="mt-4 text-sm/relaxed">
-                                    Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white dark:focus-visible:ring-[#FF2D20]">Forge</a>, <a href="https://vapor.laravel.com" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Vapor</a>, <a href="https://nova.laravel.com" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Nova</a>, and <a href="https://envoyer.io" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Echo</a>, <a href="https://laravel.com/docs/horizon" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Horizon</a>, <a href="https://laravel.com/docs/sanctum" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Sanctum</a>, <a href="https://laravel.com/docs/telescope" class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white">Telescope</a>, and more.
-                                </p>
-                            </div>
-                        </div>
+        <!-- Footer -->
+        <footer aria-labelledby="footer-heading" class="relative">
+            <h2 id="footer-heading" class="sr-only">Footer</h2>
+            <div class="mx-auto max-w-7xl px-6 pb-8 pt-4 lg:px-8">
+                <div class="border-t border-white/10 pt-8 md:flex md:items-center md:justify-between">
+                    <div class="flex space-x-6 md:order-2">
+                        <a href="#" class="text-gray-500 hover:text-gray-400">
+                            <span class="sr-only">Facebook</span>
+                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                        <a href="#" class="text-gray-500 hover:text-gray-400">
+                            <span class="sr-only">Instagram</span>
+                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                        <a href="#" class="text-gray-500 hover:text-gray-400">
+                            <span class="sr-only">Twitter</span>
+                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path
+                                    d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+                            </svg>
+                        </a>
+                        <a href="#" class="text-gray-500 hover:text-gray-400">
+                            <span class="sr-only">GitHub</span>
+                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                        <a href="#" class="text-gray-500 hover:text-gray-400">
+                            <span class="sr-only">YouTube</span>
+                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </a>
                     </div>
-                </main>
-
-                <footer class="py-16 text-center text-sm text-black dark:text-white/70">
-                    
-                </footer>
+                    <p class="mt-8 text-xs leading-5 text-gray-400 md:order-1 md:mt-0">&copy; 2020 Your Company, Inc.
+                        All rights reserved.</p>
+                </div>
             </div>
-        </div>
+        </footer>
     </div>
 </template>