Merge branch 'main' of github.com:Libertai/libertai-website into bari…

…teaupetertom/lib-21-landing-chat-previsualisation-section

src/components/LButton.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { twMerge } from "tailwind-merge";
+
+export type LButtonProps = {
+	text: string;
+	variant?: "primary" | "secondary";
+	light?: boolean;
+	small?: boolean;
+};
+const { text, variant, light, small } = withDefaults(defineProps<LButtonProps>(), {
+	variant: "primary",
+	light: false,
+	small: false,
+});
+let style = twMerge("rounded-full font-bold", small ? "body-tiny px-6 py-3" : "body-default px-8 py-4");
+
+if (variant === "primary")
+	style = twMerge(style, light ? "bg-neutral-100 text-primary" : "bg-primary text-neutral-100");
+else
+	style = twMerge(
+		style,
+		"border bg-transparent",
+		light ? "text-neutral-100 border-neutral-100" : "text-neutral-800 border-neutral-400",
+	);
+</script>
+
+<template>
+	<button :class="style">
+		{{ text }}
+	</button>
+</template>

src/components/Navbar.vue

@@ -5,13 +5,13 @@
 				<img alt="Site Logo" height="21" src="/logo.svg" width="120" />
 			</RouterLink>
 			<nav class="flex space-x-8 body-small text-neutral-800">
-				<RouterLink to="/company"> Company </RouterLink>
+				<RouterLink to="/company"> Company</RouterLink>
 				<a href="#"> Earn </a>
 				<a href="#"> APIs </a>
 				<div @mouseenter="showApps = true" @mouseleave="showApps = false">
 					<div class="flex">
 						<span class="mr-1.5 cursor-pointer">Apps</span>
-						<img alt="Chevron down" src="../assets/chevron-down.svg" />
+						<img alt="Chevron down" src="../assets/chevron_down.svg" />
 					</div>
 
 					<div class="absolute pt-2">

src/pages/Home/FooterSection.vue

@@ -27,11 +27,9 @@
 			<p class="text-center text-neutral-300 text-tiny mt-2 body-default font-bold">
 				Copyright © LibertAI.io | Powered by
 			</p>
-			<a href="https://aleph.im/">
+			<a href="https://aleph.im/" target="_blank">
 				<p class="text-center text-primary text-tiny mt-2 body-default font-bold">aleph.im</p>
 			</a>
 		</div>
 	</footer>
 </template>
-<script setup lang="ts"></script>
-<script setup lang="ts"></script>

src/pages/Home/HeroSection.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import LButton from "../../components/LButton.vue";
+</script>
+
+<template>
+	<div class="flex py-60 pl-16 image-background">
+		<div class="flex flex-col gap-6 py-9 px-6 max-w-4xl text-neutral-100">
+			<h1>Discover the Freedom of Decentralized AI</h1>
+			<p class="body-small">
+				Experience the privacy of LibertAI's decentralized AI platform - chat freely, without data logging. Explore
+				various Chat-GPT like open-source models, like Llama 3 70b, for free. Create personalized AI assistants for
+				enhanced productivity.<br />
+				<br />
+				Your AI journey, your privacy!
+			</p>
+			<a href="https://chat.libertai.io">
+				<l-button class="w-fit" light text="TRY FOR FREE" />
+			</a>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+div.image-background {
+	background-image: url("../../assets/hero.png");
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+}
+</style>

src/pages/Home/index.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import Hero from "./HeroSection.vue";
 import PartnersSection from "./PartnersSection.vue";
 import FooterSection from "./FooterSection.vue";
 import ChatPreviewSection from "./ChatPreviewSection.vue";
 </script>
 
 <template>
+	<Hero />
 	<PartnersSection />
 	<ChatPreviewSection />
 	<FooterSection />

src/router.ts

@@ -1,13 +1,22 @@
 import { createRouter, createWebHistory } from "vue-router";
 
-import HomePage from "./pages/Home/index.vue";
-import CompanyPage from "./pages/CompanyPage.vue";
-import DesignPage from "./pages/DesignPage.vue";
+import Home from "./pages/Home/index.vue";
+import Company from "./pages/Company/index.vue";
+import Design from "./pages/Design/index.vue";
 
 const routes = [
-	{ path: "/", component: HomePage },
-	{ path: "/company", component: CompanyPage },
-	{ path: "/design", component: DesignPage },
+	{
+		path: "/",
+		component: Home,
+	},
+	{
+		path: "/company",
+		component: Company,
+	},
+	{
+		path: "/design",
+		component: Design,
+	},
 ];
 
 export const router = createRouter({