fix

src/assets/css/style.css

@@ -6,6 +6,7 @@ li,
 h1,
 h2,
 h3,
+h4,
 p {
   margin: 0;
   padding: 0;
@@ -13,6 +14,19 @@ p {
 * {
   box-sizing: border-box;
 }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.products-title {
+  font-family: Poppins, sans-serif;
+  font-weight: 600;
+  letter-spacing: 2px;
+  color: #222222;
+  text-transform: capitalize;
+}
 html,
 body,
 #app {

src/assets/css/style.less

@@ -6,6 +6,7 @@ li,
 h1,
 h2,
 h3,
+h4,
 p {
 	margin: 0;
 	padding: 0;
@@ -14,7 +15,13 @@ p {
 * {
 	box-sizing: border-box;
 }
-
+h1, h2, h3, h4, h5, h6, .products-title{
+	font-family: Poppins, sans-serif;
+    font-weight: 600;
+    letter-spacing: 2px;
+    color: #222222;
+    text-transform: capitalize;
+}
 html,
 body,
 #app {

src/main.ts

@@ -1,7 +1,8 @@
 import { ViteSSG } from 'vite-ssg'
 import App from './App.vue'
 import { routes } from './routes'
-import './style.css'
+// import './style.css'
+import '@/assets/css/style.less'
 import directives from './directives/index'
 
 export const createApp = ViteSSG(App, {

src/pages/about-us/ecosystem.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { gsap, TweenMax, TweenLite } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<section class="ecosystem">
+		<div class="content">
+			<img src="https://code-create.com.hk/wp-content/uploads/2022/11/home_ai_logo.png" alt="">
+			<h2>REVITALISE THE FASHION ECOSYSTEM</h2>
+			<h4>through Artificial Intelligence (AI)</h4>
+		</div>
+	</section>
+	<section class="ecosystem-video">
+		<div class="content">
+		</div>
+	</section>
+</template>
+<style lang="less" scoped>
+	.ecosystem{
+		width: 100%;
+		background-color: #fff;
+		> .content{
+			margin: 0 auto;
+			max-width: 1200px;
+			padding: 100px 0px 100px 0px;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			> img{
+				width: 300px;
+				height: 300px;
+				margin-bottom: 20px;
+			}
+			> h2{
+				margin-bottom: 20px;
+				font-size: 24px;
+			}
+			> h4{
+				color: #333333;
+				font-size: 18px;
+			}
+
+		}
+	}
+	.ecosystem-video{
+		width: 100%;
+		background-color: #463a37;
+		> .content{
+			max-width: 1200px;
+		}
+	}
+</style>

src/pages/about-us/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import Video from './video.vue'
-import Product from './product.vue'
+import Ecosystem from './ecosystem.vue'
+import Title from './title.vue'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -16,15 +16,27 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<div class="home">
-		<Video />
-		<Product />
+	<div class="about-us">
+		<div class="bg">
+			<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
+		</div>
+		<Title />
+		<Ecosystem />
 	</div>
 </template>
 <style lang="less" scoped>
-	.home{
+	.about-us{
 		width: 100%;
 		height: 100%;
 		position: relative;
+		> .bg{
+			width: 100%;
+			position: fixed;
+			z-index: -1;
+			top: 0;
+			> img{
+				width: 100%;
+			}
+		}
 	}
 </style>

src/pages/about-us/title.vue

@@ -16,15 +16,30 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<section class="product">
-		<br v-for="item in 50" />
-		<div class="aa" >1231312</div>
-		<div class="aa" v-tween-animation>1231312</div>
-		<br v-for="item in 10" />
+	<section class="title-section">
+		<div class="content">
+			<div class="text">
+				<h1>ABOUT US</h1>
+			</div>
+		</div>
 	</section>
 </template>
 <style lang="less" scoped>
-	.product{
+	.title-section{
 		width: 100%;
+		> .content{
+			max-width: 1400;
+			> .text{
+				padding: 200px 300px;
+				> h1{
+					text-align: center;
+					font-size: 64px;
+					font-weight: 600;
+					line-height: 64px;
+					letter-spacing: 2px;
+					color: #FFFFFF;
+				}
+			}
+		}
 	}
 </style>

src/pages/about-us/video.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-//const props = defineProps({
-//})
-//const emit = defineEmits([
-//])
-let data = reactive({
-})
-onMounted(()=>{
-})
-onUnmounted(()=>{
-})
-defineExpose({})
-const {} = toRefs(data);
-</script>
-<template>
-	<section class="video">
-		<div class="title">
-		</div>
-	</section>
-</template>
-<style lang="less" scoped>
-	.video{
-	}
-</style>

src/routes.ts

@@ -1,7 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router'
-import AboutView from './pages/AboutView.vue'
+import AboutView from './pages/about-us/index.vue'
 import ContactView from './pages/ContactView.vue'
-import HomeView from './pages/home/index.vue'
+import HomeView from './pages/HomeView.vue'
 import ProductsView from './pages/ProductsView.vue'
 
 export const routes: RouteRecordRaw[] = [