merge main

src/components/LButton.vue

@@ -26,6 +26,9 @@ else
 
 <template>
 	<button :class="style">
-		{{ text }}
+		<div class="flex space-x-1">
+			<span>{{ text }}</span>
+			<slot></slot>
+		</div>
 	</button>
 </template>

src/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<header class="w-full px-28 py-4 flex justify-between items-center">
+	<header class="w-full px-28 py-4 flex justify-between items-center bg-neutral-100 fixed z-30">
 		<div class="flex items-center">
 			<RouterLink class="mr-8" to="/">
 				<img alt="Site Logo" height="21" src="/logo.svg" width="120" />
@@ -29,14 +29,17 @@
 				</div>
 			</nav>
 		</div>
-		<button class="bg-primary text-white body-default font-bold py-2 px-4 rounded-full">
-			<a href="https://chat.libertai.io">Chat APP</a>
-		</button>
+		<a href="https://chat.libertai.io">
+			<l-button class="w-fit" small text="Chat APP">
+				<img alt="Message" src="../assets/message.svg" />
+			</l-button>
+		</a>
 	</header>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
+import LButton from "./LButton.vue";
 
 const showApps = ref(false);
 </script>

src/pages/Home/ChatPreviewSection.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts"></script>
+
+<template>
+	<div class="relative w-full flex flex-col items-center text-center justify-center space-y-16 pt-32 pb-40">
+		<div class="absolute top-0 w-full h-3/5 flex flex-col items-center text-center justify-center" />
+		<div
+			class="absolute bottom-0 w-full h-2/5 flex items-center text-center justify-center"
+			style="background-color: #16122c"
+		/>
+		<div class="flex flex-col space-y-4">
+			<h2>Private AI Secured by Blockchain,</h2>
+			<h2
+				class="bg-gradient-to-tr from-gradientFrom to-gradientTo inline-block text-primary text-opacity-0 bg-clip-text"
+			>
+				Powerful Results
+			</h2>
+			<p class="body-small">
+				By integrating blockchain with AI, LibertAI offers you a private, secure, and unbiased AI experience, putting
+				you in control of your data and interactions.
+			</p>
+		</div>
+		<img src="../../assets/chat.png" alt="arrow down" class="w-1/2 max-lg:w-4/5 z-0" />
+	</div>
+</template>
+
+<style scoped lang="postcss"></style>

src/pages/Home/DataSecuritySection.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="flex py-48 bg-white">
+		<div class="flex mx-20 gap-x-6">
+			<div class="m-6 w-1/2">
+				<h2 class="text-center mb-6">No Harvesting: You are in Control of Your Data</h2>
+				<p class="body-small">
+					Enjoy the peace of mind that comes with Libertai's robust security measures. Advanced encryption protocols,
+					distributed data storage, and rigorous access controls ensure that your data remains safeguarded against
+					unauthorized access, surveillance, or exploitation.
+				</p>
+			</div>
+			<div class="flex space w-1/2 gap-x-6 justify-evenly">
+				<img alt="No harvesting 1" height="408" src="../../assets/data1.svg" width="193" />
+				<img alt="No harvesting 2" height="408" src="../../assets/data2.svg" width="193" />
+				<img alt="No harvesting 3" height="408" src="../../assets/data3.svg" width="193" />
+			</div>
+		</div>
+	</div>
+</template>

src/pages/Home/FooterSection.vue

@@ -15,12 +15,11 @@
 						<img alt="Aleph.im" src="../../assets/icons/aleph.svg" style="width: 36px; height: 36px" />
 					</a>
 				</div>
-				<p class="text-center text-neutral-300 text-tiny mt-2 body-large max-sm:body-tiny max-lg:body-default">
-					Be part of a pioneering community valuing individual privacy and autonomy<br />
-					Join a vibrant community of AI enthusiasts,developers, and innovators who<br />
-					share a common commitment to privacy and decentralization. Collaborate,<br />
-					share insights, and contribute to the continuous evolution of Libertai's AI<br />
-					ecosystem, shaping the future of decentralized intelligence.
+				<p class="text-center text-neutral-300 text-tiny mt-2 body-small max-sm:body-tiny">
+					Be part of a pioneering community valuing individual privacy and autonomy Join a vibrant<br />
+					community of AI enthusiasts,developers, and innovators who share a common commitment to<br />
+					privacy and decentralization. Collaborate, share insights, and contribute to the continuous evolution<br />
+					of Libertai's AI ecosystem, shaping the future of decentralized intelligence.
 				</p>
 			</div>
 		</div>

src/pages/Home/index.vue

@@ -3,11 +3,15 @@ import Hero from "./HeroSection.vue";
 import PartnersSection from "./PartnersSection.vue";
 import FooterSection from "./FooterSection.vue";
 import AICustomizationSection from "./AICustomizationSection.vue";
+import ChatPreviewSection from "./ChatPreviewSection.vue";
+import DataSecuritySection from "./DataSecuritySection.vue";
 </script>
 
 <template>
 	<Hero />
 	<PartnersSection />
+	<ChatPreviewSection />
 	<AICustomizationSection />
+	<DataSecuritySection />
 	<FooterSection />
 </template>

tailwind.config.js

@@ -25,6 +25,8 @@ export default {
 			primary: "#644DF9",
 			secondary: "#D2DCFF",
 			white: "#F6F8FF",
+			gradientFrom: "#9475FB",
+			gradientTo: "#CAA1FD",
 			neutral: {
 				100: "#FFFFFF",
 				200: "#F9F9F9",