Home revamp there's more section

src/components/Navbar.vue

@@ -30,7 +30,7 @@
 				<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/icons/chevron_down.svg" />
 					</div>
 
 					<div class="absolute pt-2">
@@ -66,7 +66,7 @@
 			>
 				<div class="flex gap-2">
 					<p class="body-small max-lg:body-tiny">Chat APP</p>
-					<img alt="Message" src="../assets/message.svg" />
+					<img alt="Message" src="../assets/icons/message.svg" />
 				</div>
 			</button>
 		</a>
@@ -80,7 +80,7 @@
 				<div class="body-default focus:bg-neutral-200">
 					<button class="flex items-center px-8 py-4" @click="showApps = !showApps">
 						<span class="mr-1.5 cursor-pointer">Apps</span>
-						<img alt="Chevron up" src="../assets/chevron_down.svg" />
+						<img alt="Chevron up" src="../assets/icons/chevron_down.svg" />
 					</button>
 					<div v-show="showApps" class="flex flex-col border-y">
 						<a href="https://chat.libertai.io" target="_blank">

src/pages/Home/AICustomizationSection.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import LButton from "../../components/LButton.vue";
-import AilonMusk from "../../assets/AilonMusk.png";
-import Therapist from "../../assets/Therapist.png";
-import VirtualBoyfriend from "../../assets/VirtualBoyfriend.png";
-import VirtualGirlfriend from "../../assets/VirtualGirlfriend.png";
-import Tromp from "../../assets/Tromp.png";
+import AilonMusk from "../../assets/home/personas/AilonMusk.png";
+import Therapist from "../../assets/home/personas/Therapist.png";
+import VirtualBoyfriend from "../../assets/home/personas/VirtualBoyfriend.png";
+import VirtualGirlfriend from "../../assets/home/personas/VirtualGirlfriend.png";
+import Tromp from "../../assets/home/personas/Tromp.png";
 import { onMounted, ref, watch } from "vue";
 
 const AIs = [

src/pages/Home/RoadmapSection.vue

@@ -1,6 +1,7 @@
 <template>
 	<section class="mx-auto max-w-[1440px] px-20 pb-5 pt-44">
 		<div class="space-y-6 text-center">
+			<LTinyHeading>DeAI solutions for now and the future</LTinyHeading>
 			<h2 class="text-majorelle-500">Roadmap</h2>
 			<p>
 				The LibertAI roadmap focuses on expanding the decentralized LLM's capabilities, enhancing user experience, and
@@ -34,6 +35,7 @@
 <script lang="ts" setup>
 import { RoadmapFeatureStatus } from "../../types/roadmap.ts";
 import RoadmapFeatureCard from "../../components/RoadmapFeatureCard.vue";
+import LTinyHeading from "../../components/LTinyHeading.vue";
 
 type RoadmapFeature = { name: string; status: RoadmapFeatureStatus };
 type RoadmapSection = {

src/pages/Home/TheresMoreSection.vue

@@ -1,175 +1,80 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+<script lang="ts" setup>
+import LTinyHeading from "../../components/LTinyHeading.vue";
 
-import image_1 from "../../assets/image_1.jpg";
-import image_2 from "../../assets/image_2.jpg";
-import image_3 from "../../assets/image_3.jpg";
-import image_4 from "../../assets/image_4.jpg";
-import image_5 from "../../assets/image_5.jpg";
-import image_6 from "../../assets/image_6.jpg";
+import ChatBotImage from "../../assets/home/more_features/chat_bot.png";
+import VoiceTranscriptionImage from "../../assets/home/more_features/voice_transcription.png";
+import ImageGenerationImage from "../../assets/home/more_features/image_generation.png";
+import KnowledgeBasesImage from "../../assets/home/more_features/knowledge_bases.png";
+import MultiModalInference from "../../assets/home/more_features/multi_modal_inference.png";
+import AgentsImage from "../../assets/home/more_features/agents.png";
 
-const cards = ref([
+type FeatureCard = {
+	title: string;
+	image: string;
+	live: boolean;
+};
+
+const cards: FeatureCard[] = [
 	{
-		active: true,
 		title: "Chat Bot",
-		image: image_1,
-		enabled: true,
+		image: ChatBotImage,
+		live: true,
 	},
 	{
-		active: false,
 		title: "Voice Transcription",
-		image: image_2,
-		enabled: false,
+		image: VoiceTranscriptionImage,
+		live: false,
 	},
 	{
-		active: false,
-		title: "Knowledge Databases",
-		image: image_3,
-		enabled: false,
+		title: "Image Generation",
+		image: ImageGenerationImage,
+		live: false,
 	},
 	{
-		active: false,
-		title: "Image",
-		image: image_4,
-		enabled: false,
+		title: "Knowledge Bases",
+		image: KnowledgeBasesImage,
+		live: false,
 	},
 	{
-		active: false,
-		title: "Multi-Modal Inference for LLMs",
-		image: image_5,
-		enabled: false,
+		title: "Multi-modal Inference",
+		image: MultiModalInference,
+		live: false,
 	},
 	{
-		active: false,
-		title: "Agent",
-		image: image_6,
-		enabled: false,
+		title: "Agents",
+		image: AgentsImage,
+		live: false,
 	},
-]);
-
-const activeIndex = ref(0);
-
-const updateCards = () => {
-	cards.value.forEach((card, index) => {
-		card.active = index === activeIndex.value;
-	});
-};
-
-const centerActiveCard = () => {
-	const windowWidth = window.innerWidth;
-	const cardContainer = document.querySelector(".Tcard-container") as HTMLElement;
-	if (!cardContainer) return;
-	const cardQuery = cardContainer.querySelector(".Tcard") as HTMLElement;
-	if (!cardQuery) return;
-	const cardWidth = cardQuery.offsetWidth;
-	const containerWidth = cardContainer.offsetWidth;
-	const offset_mobile = (containerWidth - cardWidth) / 2 - activeIndex.value * cardWidth * 1.07;
-	const offset = -activeIndex.value * cardWidth * 1.07;
-
-	cardContainer.style.transform = `translateX(${windowWidth < 1024 ? offset_mobile : offset}px)`;
-};
-
-watch(activeIndex, () => {
-	updateCards();
-	centerActiveCard();
-});
-
-onMounted(() => {
-	const windowWidth = window.innerWidth;
-	setInterval(() => {
-		if (windowWidth < 1024) {
-			activeIndex.value = (activeIndex.value + 1) % cards.value.length;
-		}
-	}, 3000);
-	centerActiveCard();
-});
+];
 </script>
 
 <template>
-	<section class="relative flex justify-center bg-neutral-white">
-		<div class="flex w-[1440px] flex-col items-center justify-center gap-6 overflow-x-hidden pb-56 pt-24">
-			<div class="flex w-full flex-col justify-start gap-4 px-24 py-8 max-lg:px-12">
-				<div class="flex text-majorelle-800 max-lg:hidden">
-					<h2>But wait, there’s</h2>
-					&nbsp;
-					<h2 class="text-majorelle-500">more</h2>
-				</div>
-				<div class="flex w-full justify-center text-majorelle-800 lg:hidden">
-					<p class="body-bold-large">But wait, there’s</p>
-					&nbsp;
-					<p class="body-bold-large text-majorelle-500">more</p>
-				</div>
-				<p class="body-small max-lg:text-center">
-					We are constantly working on new features and improvements to make your experience better.
-				</p>
-			</div>
-			<div class="flex-row items-center gap-6 lg:flex">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#000000"
-					class="cursor-pointer"
-					:onclick="
-						() => {
-							activeIndex = (activeIndex - 1 + cards.length) % cards.length;
-							centerActiveCard();
-						}
-					"
-				>
-					<path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z" />
-				</svg>
-
-				<div class="relative flex w-full flex-col items-center justify-center overflow-x-hidden">
+	<section class="mx-auto max-w-[1440px] px-20 py-44">
+		<div class="mb-12 space-y-6 text-center">
+			<LTinyHeading>Intelligent pocket rocket</LTinyHeading>
+			<h2 class="text-majorelle-500">But wait, there’s more</h2>
+			<p>
+				Stay tuned for more details on these exciting new additions, set to revolutionize the way you harness the power
+				of artificial intelligence.
+			</p>
+		</div>
+		<div class="mx-auto grid gap-6 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-6">
+			<div v-for="card of cards" :key="card.title" class="mx-auto space-y-6">
+				<div class="flex h-48 w-48 flex-col items-center justify-center space-y-6 rounded-3xl bg-majorelle-800">
 					<div
-						class="Tcard-container flex w-310 transform flex-row gap-6 transition-transform duration-500 ease-in-out max-xl:w-260"
+						v-if="card.live"
+						class="rounded-[64px] border-[1px] border-solid border-majorelle-300 bg-gradient-to-r from-primary to-lavander-300 text-majorelle-100"
 					>
-						<div v-for="card in cards" :key="card.title" :class="{ 'card-active': card.active, card: true }">
-							<div
-								class="Tcard relative flex h-104 w-72 select-none rounded-2xl bg-majorelle-400 px-6 pt-80"
-								:style="`background-image: url(${card.image}); background-size: cover; background-position: center; background-repeat: no-repeat;`"
-							>
-								<div
-									:class="
-										(card.enabled ? 'bg-gradient-to-tr from-majorelle-500 to-[#FCCBFF]' : 'bg-neutral-500') +
-										' absolute right-4 top-4 flex h-12 w-24 select-none items-center justify-center rounded-full py-3 text-center text-tertiary'
-									"
-								>
-									<p v-if="!card.enabled" class="rich-bold-12 px-4">COMING SOON</p>
-									<p v-if="card.enabled" class="rich-bold-12 px-4">LIVE</p>
-								</div>
-								<p class="rich-bold-24 text-left text-neutral-white">{{ card.title }}</p>
-							</div>
-						</div>
+						<p class="body-small px-6">LIVE</p>
 					</div>
+					<div v-else class="rounded-[64px] bg-gradient-to-r from-majorelle-300 to-majorelle-100 text-majorelle-400">
+						<p class="body-small px-6">COMING SOON</p>
+					</div>
+
+					<img :src="card.image" alt="feature" class="h-24 w-24" />
 				</div>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#000000"
-					class="cursor-pointer"
-					:onclick="
-						() => {
-							activeIndex = (activeIndex + 1) % cards.length;
-							centerActiveCard();
-						}
-					"
-				>
-					<path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z" />
-				</svg>
-			</div>
-			<div class="flex flex-row gap-2 lg:hidden">
-				<div v-for="card in cards" :key="card.title">
-					<div
-						:class="`h-2 ${card.active ? 'w-20 bg-majorelle-500' : 'w-2 bg-majorelle-300'} rounded-full transition-all duration-300 ease-out`"
-					/>
-				</div>
+				<p class="body-bold-small text-center">{{ card.title }}</p>
 			</div>
 		</div>
 	</section>
 </template>
-
-<style scoped></style>

src/pages/Tokenomics/TokenomicsHeroSection.vue

@@ -14,14 +14,14 @@
 					participation, innovation, and growth within the LibertAI platform.
 				</p>
 			</div>
-			<img alt="Earn" class="z-10 m-auto max-lg:hidden" src="../../assets/image 32.png" />
+			<img alt="Earn" class="z-10 m-auto max-lg:hidden" src="../../assets/tokenomics/hero.png" />
 		</div>
 	</section>
 </template>
 
 <style scoped>
 div.image-background {
-	background-image: url("../../assets/image 32.png");
+	background-image: url("../../assets/tokenomics/hero.png");
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;