position bubble KYC section

sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss

@@ -1,31 +1,43 @@
 #kyc{
+	position: absolute;
+
+	font-family: 'GT Walsheim Pro';
 	background: white;
 	padding-top: 25vh;
-
+	min-height:200vh;
-	.left-column{
-		width: 50vw;
-		margin: 0 auto;
 
 	.text-content{
-			max-width: 25vw;
+		max-width: 37rem;
 		text-align: left;
 	}
+
+	.left-column{
+		padding-left: 5vw;
 	}
 	.title{
 margin-top: 250px;
-		font-weight: 600;
+
+		font-style: normal;
+		font-weight: 500;
 		font-size: 100px;
 		line-height: 90px;
 
 		/* or 90% */
 		letter-spacing: -0.04em;
 	}
+	.description2{
+		font-weight: 500;
+		font-size: 60px;
+		line-height: 110%;
+		text-align: center;
+		letter-spacing: -0.04em;
+		padding: 0 2rem;
+		text-align: center;
+	}
 	.description{
 		font-weight: 600;
 		font-size: 60px;
 		line-height: 110%;
-
-		/* identical to box height, or 66px */
 		letter-spacing: -0.04em;
 	}
 	.button{
@@ -33,20 +45,20 @@ margin-top: 250px;
 		font-size: 18px;
 		line-height: 26px;
 		backdrop-filter: blur(3px);
-		background: linear-gradient(329.49deg,
+		background: white;
-			rgba(255, 216, 244, 0) 34.06%,
+		border-radius: 2rem;
-			rgba(255, 207, 242, 0.2) 77.26%);
-		border-radius: 100%;
 		bottom: 0;
 		box-sizing: border-box;
 		color: white;
 		font-style: normal;
-		padding: 2rem;
+		padding: 1rem .5rem;
 		position: relative;
 		right: 0;
-		top: 16vh;
+		top: 2rem;
-		width: 150px;
+		min-width: 15rem;
+		float:left;
 		color: #020225;
+		border-color: $secondary-color;
 	}
 	.color-emphasis {
 		color: #1E33DA;
@@ -63,12 +75,94 @@ margin-top: 250px;
 	.bubbles{
 		.bubble{
 			position: relative;
+
+			text-align: left;
+			float: left;
+			span{
+				margin-left: 2rem;
+				float:left;
+				width: 20rem;
+			}
 			&:nth-of-type(1){
-				left: 694px;
+				width: 25rem;
-				top: 1240px;
+				height: 23rem;
+				left: 46rem;
+				top: -34rem;
+				background: url('img/bubble_1.png') no-repeat;
+				span{
+				padding: 6rem 2.5rem;
+
+				}
+
 			}
 			&:nth-of-type(2){
+				background: url('img/bubble_2.png') no-repeat;
+				left: 34vw;
+				top: -15rem;
+				width: 35rem;
+				height: 35rem;
+				background-size: contain;
+				span{
+					margin-top: 13rem;
+					margin-left: 5rem;
 				}
 			}
+			&:nth-of-type(3){
+				background: url('img/bubble_3.png') no-repeat;
+				left: -27vw;
+				top: 8rem;
+				width: 27rem;
+				height: 35rem;
+				background-size: contain;
+				span{
+					margin-top: 10rem;
+					margin-left: 5rem;
+					width: 15rem;
+				}
+			}
+		}
+	}
+	.small-bubble{
+		background: url('img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n008.png') no-repeat center ;
+		background-size: contain;
+		position: absolute;
+		//width: 50rem;
+		//height: 50rem;
+		margin-top: 0;
+
+		&:nth-of-type(1){
+			filter: blur(6.5px);
+			width: 137px;
+			height: 176px;
+			left: 316px;
+			top: 400px;
+		}
+		&:nth-of-type(2){
+			filter: blur(2px);
+			width: 203px;
+			height: 253.75px;
+			left: 1343px;
+			top: 422px;
+		}
+		&:nth-of-type(3){
+			filter: blur(5px);
+			width: 141px;
+			height: 176px;
+			left: 865px;
+			top: 918px;
+		}
+		&:nth-of-type(4){
+			filter: blur(1px);
+			width: 77px;
+			height: 96px;
+			left: 490px;
+			top: 1129px;
+		}
+		&:nth-of-type(5){
+			width: 288px;
+			height: 360px;
+			left: 1124px;
+			top: 1382px;
+		}
 	}
 }

sesame-vitejs/sesame/src/assets/styles/_13-china.scss

@@ -1,4 +1,15 @@
 #cina{
+	background: url('img/china-bg.png');
+
+	.line{
+		background: url('img/china-line.png');
+
+		position: absolute;
+		width: 1494.06px;
+		height: 313.16px;
+		left: 93.02px;
+		top: 2342.9px;
+	}
 	.title{
 
 	}

sesame-vitejs/sesame/src/components/CoverSection.vue

@@ -23,6 +23,53 @@
           <p>Consulting</p>
         </div>
       </section>
+
+      <section id="kyc">
+        <p class="description2 primary-color">
+          We craft e-commerce Ux template based on qualitative and quantitative
+          studies
+        </p>
+        <div class="columns">
+          <div class="column left-column">
+            <h2 class="title primary-color text-content">
+              We help you to know your customer needs
+            </h2>
+            <p class="description secondary-color text-content">
+              With our method
+            </p>
+            <a
+              href="#kyc"
+              class="button text-content"
+            > Show Sesame method </a>
+          </div>
+          <div class="column" />
+        </div>
+        <div class="bubbles secondary-color fat-text">
+          <div class="small-bubble" />
+          <div class="small-bubble" />
+          <div class="small-bubble" />
+          <div class="small-bubble" />
+          <div class="small-bubble" />
+          <p class="bubble">
+            <span>
+
+              to Prioritize development effort
+            </span>
+          </p>
+          <p class="bubble">
+            <span>
+
+              to improve customer satisfaction
+            </span>
+          </p>
+          <p class="bubble">
+            <span>
+
+              to increase conversion rate
+            </span>
+          </p>
+        </div>
+      </section>
     </div>
   </main>
 </template>

sesame-vitejs/sesame/src/components/DisabledSection.vue

@@ -33,36 +33,7 @@
 
 
 
-	<section id="kyc">
-		<div class="left-column">
-			<p class="description2 primary-color">
-				We craft e-commerce Ux template based on qualitative and quantitative
-				studies
-			</p>
 
-			<h2 class="title primary-color text-content">
-				We help you to know your customer needs
-			</h2>
-			<p class="description secondary-color text-content">
-				With our method
-			</p>
-			<a
-				href="#kyc"
-				class="button text-content"
-			> Show Sesame method </a>
-		</div>
-		<div class="bubbles secondary-color fat-text">
-			<p class="bubble">
-				to Prioritize development effort
-			</p>
-			<p class="bubble">
-				to improve customer satisfaction
-			</p>
-			<p class="bubble">
-				to increase conversion rate
-			</p>
-		</div>
-	</section>
 	<section id="china">
 		<h2 class="title primary-color">
 			Our China-inspired ui in 4 pillars
@@ -71,6 +42,7 @@
 			a quick and smoth consumer journey and never ending shopping experience
 			at the same time
 		</p>
+		<div class="line"></div>
 		<div class="blocks">
 			<div class="block">
 				<div class="top block-1">