From 158636fba94e7fa8fbda8e7980126a8476f010da Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 18 May 2023 12:08:17 +0200
Subject: [PATCH] add html sections for sprint 4 design in vue template first

---
 .../sesame/src/components/CoverSection.vue    | 324 ++++++++++++++----
 1 file changed, 255 insertions(+), 69 deletions(-)

diff --git a/sesame-vitejs/sesame/src/components/CoverSection.vue b/sesame-vitejs/sesame/src/components/CoverSection.vue
index b4cc68c..8096506 100644
--- a/sesame-vitejs/sesame/src/components/CoverSection.vue
+++ b/sesame-vitejs/sesame/src/components/CoverSection.vue
@@ -1,98 +1,284 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+	import {ref} from 'vue'
 
-defineProps<{ msg: string }>()
+	defineProps<{ msg: string }>()
 
-const count = ref(0)
+	const count = ref(0)
 </script>
 
 <template>
-  <main class="has-text-centered">
+	<main class="has-text-centered">
 
-    <section id="cover" class="has-text-centerd">
-      <div id="hand"></div>
+		<!--		sprint 4 content-->
+		<section id="cover" class="has-text-centerd">
 
-      <div id="main_title_container" class="margin-auto has-text-centered">
-        <div id="main_title" class="margin-auto">
-          <h1 class="is-hidden">Sesame</h1>
-        </div>
+			<h2>Transactional</h2>
+			<p>
+				Webcontent
+			</p>
+			<div class="aside">
+				Our creative competitive edge
 
-        <div class="title-container">
+				We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our
+				technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale
+				for all touchpoints to reduce costs.
+			</div>
+		</section>
+		<section id="carry">
+			<p>We carry out web design and development</p>
+			<p>in headless</p>
+			<p>commerce.</p>
 
-          <h2 class="container-text margin-auto">
-            We focus on online conversion to help brands sell better and more.
-          </h2>
-          <a href="#open" class="button margin-auto">Scroll</a>
-        </div>
+			<div class="bubbles">
+				<p>Evolutive maintenance</p>
+				<p>Front end (ux/ui) development</p>
+				<p>Web App (pwa)
+					development</p>
+				<p>Consulting</p>
+			</div>
+			<p>We craft e-commerce Ux template based on qualitative and quantitative studies</p>
 
-      </div>
-    </section>
-  </main>
+		</section>
+		<section id="kyc">
+			<h2>We help you to know your customer needs</h2>
+			<p>With our method</p>
+			<a href="#kyc" class="button">
+				Show Sesame method
+			</a>
+
+			<div class="bubbles">
+				<p>to Prioritize
+					development
+					effort</p>
+				<p>
+					to improve customer satisfaction
+				</p>
+				<p>to increase conversion rate</p>
+
+			</div>
+		</section>
+		<section id="china">
+			<h2>Our China-inspired ui in 4 pillars</h2>
+			<p>
+				a quick and smoth consumer journey and never ending shopping experience at the same time
+			</p>
+			<div class="blocks">
+				<div class="block">
+					<div class="top">Content driven</div>
+					<div class="bottom">-Rebound rate</div>
+				</div>
+				<div class="block">
+					<div class="top">Experimental</div>
+					<div class="bottom">-Return rate</div>
+				</div>
+				<div class="block">
+					<div class="top">Interactive</div>
+					<div class="bottom">+Conversion rate</div>
+				</div>
+				<div class="block">
+					<div class="top">Agile</div>
+					<div class="bottom">+Retention rate</div>
+				</div>
+			</div>
+		</section>
+		<section id="we_develop">
+			<h2>
+				We develop custom-made innovative e-commerce features based on your brand stakes.
+			</h2>
+			<div class="phone-container">
+				<div class="top">
+
+				</div>
+				<div class="picture"></div>
+				<div class="bottom"></div>
+			</div>
+			<div class="arrow-left"></div>
+			<div class="arrow-right"></div>
+			<div class="data">Data</div>
+			<div class="data">AR</div>
+			<div class="quick">
+				Quick wins
+			</div>
+			<div class="long_term">
+				Long-Term Project
+			</div>
+		</section>
+		<section id="full_creative">
+			<h2>A full creative & production Studio in Paris</h2>
+			<div class="tiles columns">
+				<div class="aside column"></div>
+				<div class="picture column"></div>
+				<div class="picture column"></div>
+			</div>
+		</section>
+		<section id="our_team">
+			<h2>Our team.</h2>
+			<div class="sub-category">
+
+				<p>
+					of experts and directors.
+				</p>
+				<div class="columns">
+					<div class="person column">
+						<div class="picture"></div>
+						<p class="name">Name Surname</p>
+					</div>
+					<div class="person column">
+						<div class="picture"></div>
+						<p class="name">Name Surname</p>
+					</div>
+					<div class="person column">
+						<div class="picture"></div>
+						<p class="name">Name Surname</p>
+					</div>
+					<div class="person column">
+						<div class="picture"></div>
+						<p class="name">Name Surname</p>
+					</div>
+				</div>
+			</div>
+			<div class="sub-category">
+
+				<p>
+					and our senior team
+				</p>
+				<div class="columns">
+					<div class="person column">
+						<div class="picture"></div>
+						<p class="name">Name Surname</p>
+					</div>
+					<div class="person column">
+						<div class="picture"></div>
+						<p class="name">Name Surname</p>
+					</div>
+					<div class="person column">
+						<div class="picture"></div>
+						<p class="name">Name Surname</p>
+					</div>
+					<div class="person column">
+						<div class="picture"></div>
+						<p class="name">Name Surname</p>
+					</div>
+				</div>
+			</div>
+
+		</section>
+		<section id="china_achievements">
+			<div class="columns">
+				<div class="column">
+
+					<h2>Our China achievements</h2>
+				</div>
+				<div class="column">
+					<p>
+						Backed by the Baozun Group (the leading e-commerce technology Group in China listed in NASDAQ and Hong Kong,
+						reaching $10Mn GMV in 2021), we embrace China’s e-commerce, capitalizing on the market’s unique technology
+						and digital sales mechanisms.
+					</p>
+				</div>
+			</div>
+
+			<div class="tiles-box">
+				<div class="tile-item">
+					<div class="column">
+						<h3>
+							<span class="number">400+</span>
+							<span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
+						</h3>
+					</div>
+					<div class="column">
+						<div class="picture has-rounded-corners"></div>
+					</div>
+				</div>
+
+				<p>
+
+				100+
+				Luxury Store launches on incl. Christofle, De Beers etc.
+
+				40+
+				Luxury Brands supported with E2E services
+
+				50+
+				Brands assisted in social project commerces.
+
+				30+
+				PROJECTS converted into Ecom Ops management.
+
+				30-60%
+				Of our brands’ partner China GMV done online.
+				</p>
+
+			</div>
+		</section>
+		<section id="baozun_group" class="has-rounded-corners">
+			<h2>Baozun Group and Company.</h2>
+		</section>
+	</main>
 </template>
 
 <style lang="scss">
 
 
-  #hand {
-    background: url('/img/hand 1.png');
-    background-size: cover;
+	#hand {
+		background: url('/img/hand 1.png');
+		background-size: cover;
 
-    position: absolute;
-    width: 100vw;
-    height: 1300px;
-    left: 1px;
-    top: -2px;
+		position: absolute;
+		width: 100vw;
+		height: 1300px;
+		left: 1px;
+		top: -2px;
 
-  }
+	}
 
-  #cover {
-    background: url('/img/BG 1.png') no-repeat;
-    background-size: cover;
-    h2 {
-    position: absolute;
-    top: 10vh;
-    left: 42vw;
+	#cover {
+		background: url('/img/BG 1.png') no-repeat;
+		background-size: cover;
 
-    /* Subtitle/desktop_1 */
-    font-family: 'GT Walsheim Pro', Arial;
-    font-style: normal;
-    font-weight: 600;
-    font-size: 40px;
-    line-height: 120%;
+		h2 {
+			position: absolute;
+			top: 10vh;
+			left: 42vw;
 
-    /* or 48px */
-    text-align: center;
-    letter-spacing: -0.04em;
+			/* Subtitle/desktop_1 */
+			font-family: 'GT Walsheim Pro', Arial;
+			font-style: normal;
+			font-weight: 600;
+			font-size: 40px;
+			line-height: 120%;
 
-    /* Secondary 100 */
-    color: #FFFDFC;
-  }
-    .button {
-      box-sizing: border-box;
+			/* or 48px */
+			text-align: center;
+			letter-spacing: -0.04em;
 
-      position: relative;
-      right: 0;
-      top: calc(1 / 3 * 100vh);
-      bottom: 0;
-      width: 150px;
-      height: 150px;
-      padding: 1rem;
-      color: white;
-      font-family: 'GT Walsheim Pro', Arial;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 18px;
-      line-height: 26px;
-      background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%);
-      backdrop-filter: blur(2.96px);
-
-      border-radius: 100%;
-      left: 3rem;
-    }
-  }
+			/* Secondary 100 */
+			color: #fffdfc;
+		}
 
+		.button {
+			box-sizing: border-box;
 
+			position: relative;
+			right: 0;
+			top: calc(1 / 3 * 100vh);
+			bottom: 0;
+			width: 150px;
+			height: 150px;
+			padding: 1rem;
+			color: white;
+			font-family: 'GT Walsheim Pro', Arial;
+			font-style: normal;
+			font-weight: 400;
+			font-size: 18px;
+			line-height: 26px;
+			background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%);
+			backdrop-filter: blur(2.96px);
 
+			border-radius: 100%;
+			left: 3rem;
+		}
+	}
 
 
 </style>