section carry and kyc

sesame-vitejs/sesame/src/assets/styles/0-general.scss

@@ -10,7 +10,7 @@ main {
 	section {
 		font-family: "GT Walsheim Pro", Arial;
 		height: 100vh;
-		min-height: 1300px;
+		min-height: 100vh;
 		width: 100vw;
 
 		h2 {

sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss

@@ -1,17 +1,21 @@
 #transactionnal_webdesign {
 	padding-top: 363px;
 
-	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
+	background: url('img/header_webdesign.png'), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
-	background-size: cover ;
+	background-size: cover;
 	font-family: "GT Walsheim Pro";
 	color: #00001f;
+	padding-top: 380px;
+
+	.columns {
+		max-width: 60vw;
+	}
 
 	.title {
-		width: 1680px;
 		height: 109px;
 		font-style: normal;
-		font-weight: 600;
+		font-weight: 400;
-		font-size: 40px;
+		font-size: 3rem;
 		line-height: 95%;
 		text-align: center;
 		letter-spacing: 0.2em;
@@ -25,34 +29,33 @@
 
 	.description {
 		color: rgba(231, 112, 100, 0.8);
-		font-weight: 600;
+		font-weight: 500;
-		font-size: 270px;
+		font-size: 16rem;
 		line-height: 65%;
 		backdrop-filter: blur(5px);
-		margin-bottom:140px;
+		margin-bottom: 140px;
 	}
 
 	.color-emphasis {
 		color: #1e33da;
 	}
 
-	.sub-title{
+	.sub-title {
 		font-weight: 600;
-		font-size: 100px;
+		font-size: 7rem;
 		line-height: 90px;
 		letter-spacing: -0.04em;
 	}
 
 	.columns {
-		text-align:left;
+		text-align: left;
 		margin: 0 auto;
 		width: 80%;
 	}
-	.second{
-
 
+	.second {
 		font-weight: 400;
-		font-size: 24px;
+		font-size: 1.5rem;
 		line-height: 130%;
 	}
 }

sesame-vitejs/sesame/src/assets/styles/_11-carry.scss

@@ -3,6 +3,8 @@
 #carry {
 	position: relative;
 	background:white;
+	padding-top: 20vh;
+
 	.title {
 		margin-bottom: 46px;
 
@@ -44,10 +46,8 @@
 			display: flex;
 			align-items: center;
 			text-align: center;
-
-			color: #E77064;
 			&:nth-of-type(0){
-				position: absolute;
+				position: relative;
 				width: 315px;
 				height: 285px;
 				left: 92px;
@@ -90,10 +90,10 @@
 	}
 	.computer-block {
 		background: url('img/Macbook_color 1.png') no-repeat;
-		position: absolute;
+		position: relative;
-		width: 1920px;
+		width: 100%;
 		height: 1080px;
-		left: -61px;
+		left: 23%;
-		top: 329px;
+		top: -4rem;
 	}
 }

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

@@ -1,13 +1,70 @@
 #kyc{
 	background: white;
+	padding-top: 25vh;
 
+	.left-column{
+		width: 25vw;
+	}
 	.title{
 margin-top: 250px;
+		font-weight: 600;
+		font-size: 100px;
+		line-height: 90px;
+
+		/* or 90% */
+		letter-spacing: -0.04em;
 	}
 	.description{
+		font-weight: 600;
+		font-size: 60px;
+		line-height: 110%;
 
+		/* identical to box height, or 66px */
+		letter-spacing: -0.04em;
+	}
+	.button{
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 26px;
+		backdrop-filter: blur(3px);
+		background: linear-gradient(329.49deg,
+			rgba(255, 216, 244, 0) 34.06%,
+			rgba(255, 207, 242, 0.2) 77.26%);
+		border-radius: 100%;
+		bottom: 0;
+		box-sizing: border-box;
+		color: white;
+		font-style: normal;
+		padding: 1rem;
+		position: relative;
+		right: 0;
+		top: 16vh;
+		width: 150px;
+		color: #020225;
 	}
 	.color-emphasis {
 		color: #1E33DA;
 	}
+
+	.fat-text{
+		font-style: normal;
+		font-weight: 600;
+		font-size: 30px;
+		line-height: 35px;
+		text-transform: uppercase;
+		color: #FFFDFC;
+	}
+	.bubbles{
+		.bubble{
+			position: relative;
+			&:nth-of-type(0){
+				left: 694px;
+				top: 1240px;
+			}
+			&:nth-of-type(1){
+			}
+			&:nth-of-type(2){
+			}
+		}
+	}
 }

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

@@ -42,7 +42,7 @@
 
         <div class="gradient-bg" />
         <div class="computer-block" />
-        <div class="bubbles">
+        <div class="bubbles secondary-color">
           <p>Evolutive maintenance</p>
           <p>Front end (ux/ui) development</p>
           <p>Web App (pwa) development</p>
@@ -55,21 +55,28 @@
       </section>
 
       <section id="kyc">
-        <h2 class="title primary-color">
+        <div class="left-column">
-          We help you to know your customer needs
+          <h2 class="title primary-color">
-        </h2>
+            We help you to know your customer needs
-        <p class="description secondary-color">
+          </h2>
-          With our method
+          <p class="description secondary-color">
-        </p>
+            With our method
-        <a
+          </p>
-          href="#kyc"
+          <a
-          class="button"
+            href="#kyc"
-        > Show Sesame method </a>
+            class="button"
-
+          > Show Sesame method </a>
-        <div class="bubbles">
+        </div>
-          <p>to Prioritize development effort</p>
+        <div class="bubbles secondary-color fat-text">
-          <p>to improve customer satisfaction</p>
+          <p class="bubble">
-          <p>to increase conversion rate</p>
+            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">