From b98d564e747da696f667ccbde89f3064e59c60fa Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 31 May 2023 16:16:39 +0200
Subject: [PATCH] grid of team people

---
 .../src/assets/styles/_16-our_team.scss       |  33 +-
 .../sesame/src/components/CoverSection.vue    | 306 +++---------------
 .../sesame/src/components/DisabledSection.vue | 241 ++++++++++++++
 3 files changed, 306 insertions(+), 274 deletions(-)

diff --git a/sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss b/sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss
index d58895e..e64e611 100644
--- a/sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss
@@ -1,16 +1,18 @@
 #our_team {
 
+	background: white;
 	padding-top: 5rem;
 	padding-left: 2rem;
-	background: white;
 	text-align: left;
+	min-height: 150vh;
+
 	.title {
-		font-weight: 600;
+		font-weight: 500;
 		font-size: 270px;
-		line-height: 80px;
+		line-height: 9rem;
 		letter-spacing: -0.06em;
 		text-align: left;
-		margin-bottom: 4rem;
+		margin-bottom: 6rem;
 	}
 
 	.sub-title{
@@ -19,13 +21,34 @@
 		line-height: 110%;
 		letter-spacing: -0.04em;
 		color: #020225;
+		margin-top: 2rem;
+		margin-bottom: 2rem;
 	}
 	img{
 		margin-bottom: 1rem;
 		width: 100%;
 		max-width: 100%;
 	}
-	.description {
+	.name{
+		margin-top: 1rem;
+		margin-bottom: 2rem;
+	}
+	.sub-category {
+		padding: 0 2em;
 
+		background: white;
 	}
 }
+
+@media screen and (max-width: 1023px) {
+	#our_team{
+		img{
+			max-width: 100%;
+			margin: 0 auto;
+		}
+		.columns, .colmumn{
+			display: block;
+		}
+	}
+
+}
diff --git a/sesame-vitejs/sesame/src/components/CoverSection.vue b/sesame-vitejs/sesame/src/components/CoverSection.vue
index 8fcd9d7..9b62751 100644
--- a/sesame-vitejs/sesame/src/components/CoverSection.vue
+++ b/sesame-vitejs/sesame/src/components/CoverSection.vue
@@ -4,247 +4,6 @@
   <main class="has-text-centered">
     <!--		sprint 4 content-->
     <div id="sprint_4">
-      <section
-        id="transactionnal_webdesign"
-        class="has-text-centerd"
-      >
-        <h2 class="title">
-          Transactional
-        </h2>
-        <div class="description has-text-centered">
-          Webdesign
-        </div>
-        <div class="columns">
-          <div class="column first">
-            <h3 class="sub-title">
-              For all your
-              <br>
-              <span class="color-emphasis"> digital</span> uses.
-            </h3>
-          </div>
-          <div class="column second">
-            Our creative competitive edge <br>
-            <br>
-            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>
-        </div>
-      </section>
-
-      <section id="carry">
-        <h2 class="title color-emphasis">
-          We carry out web design and development
-        </h2>
-        <p class="description">
-          in headless
-          <br>
-          commerce.
-        </p>
-        <div class="gradient-bg-yellow" />
-        <div class="gradient-bg" />
-        <div class="computer-block-item" />
-        <div class="bubbles secondary-color">
-          <p>Evolutive maintenance</p>
-          <p>Front end (ux/ui) development</p>
-          <p>Web App (pwa) development</p>
-          <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>
-
-
-      <section id="china">
-        <h2 class="title primary-color">
-          Our China-inspired ui in 4 pillars
-        </h2>
-        <p class="description secondary-color">
-          a quick and smooth consumer journey and never
-          <br>
-          ending shopping experience at the same time
-        </p>
-        <div class="line" />
-        <div class="block-items columns">
-          <div class="block-item column">
-            <div class="top block-item-1">
-              <p>
-                Content driven
-              </p>
-            </div>
-            <div class="bottom block-item-2">
-              - Rebound rate
-            </div>
-          </div>
-          <div class="block-item column">
-            <div class="top block-item-3">
-              <p>
-                Experimental
-              </p>
-            </div>
-            <div class="bottom block-item-4">
-              - Return rate
-            </div>
-          </div>
-          <div class="block-item column">
-            <div class="top block-item-5">
-              <p>
-                Interactive
-              </p>
-            </div>
-            <div class="bottom block-item-6">
-              +Conversion rate
-            </div>
-          </div>
-          <div class="block-item column">
-            <div class="top block-item-7">
-              <p>
-                Agile
-              </p>
-            </div>
-            <div class="bottom block-item-8">
-              + Retention rate
-            </div>
-          </div>
-        </div>
-      </section>
-
-
-
-      <section id="we_develop">
-        <h2 class="title secondary-color">
-          We develop custom-made innovative e-commerce features based on your
-          brand stakes.
-        </h2>
-        <div class="phone-container-2">
-          <div class="top" />
-          <div class="picture" />
-          <div class="bottom" />
-        </div>
-        <div class="container-arrows">
-          <div class="circle">
-            <img
-              class="rotated"
-              src="img/arrow.svg"
-              alt=""
-            >
-          </div>
-          <div class="circle circle-right">
-            <img
-
-              src="img/arrow.svg"
-              alt=""
-            >
-          </div>
-        </div>
-
-        <div class="columns light-text">
-          <div class="column data">
-            Data
-          </div>
-          <div class="column ar">
-            AR
-          </div>
-        </div>
-        <div class="quick secondary-color">
-          Quick wins
-        </div>
-        <div class="long_term secondary-color">
-          Long-Term
-          <br>
-          Project
-        </div>
-      </section>
-
-      <section id="full_creative">
-        <h2 class="title secondary-color">
-          A full creative & production Studio in Paris
-        </h2>
-        <div class="container">
-          <div class="tiles columns dark-color">
-            <div class="aside column">
-              <h3 class="sub-title">
-                Sesame Studio Spaces
-              </h3>
-              <p>
-                2 Large Sets for Photos, Videos and Live Shopping Shooting
-                Adaptable lighting racks
-                Walls and decor for in-apartment style shooting
-                LED Screen Background
-                <br>
-                1 Small Set for Stills Life Shooting
-                <br>
-                1 Space for 720° with turntable and 720° robot
-                <br>Editing Room equipped for voice recording
-                <br>Styling Room
-                <br>Glam Room
-                <br>Separated Storrage Room safe for brand’s products
-              </p>
-              <h3 class="sub-title">
-                Full Service & Adaptative Team
-              </h3>
-              <p>
-                Studio Manager, Lighting Technician.
-                <br>Digital Creative Director, Motion Design, UX Designer, 3D Design.
-                <br>Large network of freelances specialized in all categories, premium and luxury included.
-              </p>
-            </div>
-            <div class="picture column">
-              <img
-                src="img/pictures_rooms.png"
-                alt="rooms"
-              >
-            </div>
-          </div>
-        </div>
-      </section>
-
       <section id="our_team">
         <h2 class="title primary-color">
           Our team.
@@ -255,76 +14,85 @@
           </p>
           <div class="columns">
             <div class="person column">
-              <div class="picture" />
+              <img
+                src="img/Rectangle 6.jpg"
+                alt="people"
+              >
               <p class="name">
                 Name Surname
               </p>
             </div>
             <div class="person column">
-              <div class="picture" />
+              <img
+                src="img/Rectangle%206-1.jpg"
+                alt="people"
+              >
+
               <p class="name">
                 Name Surname
               </p>
             </div>
             <div class="person column">
-              <div class="picture" />
+              <img
+                src="img/people%202.png"
+                alt="people"
+              >
+
               <p class="name">
                 Name Surname
               </p>
             </div>
             <div class="person column">
-              <div class="picture" />
+              <img
+                src="img/Rectangle 6-3.jpg"
+                alt="people"
+              >
+
               <p class="name">
                 Name Surname
               </p>
             </div>
           </div>
         </div>
+
+
         <div class="sub-category">
           <h3 class="sub-title">
             and our senior team
           </h3>
           <div class="columns">
             <div class="person column">
-              <div class="picture">
-                <img
-                  src="img/people_1.jpg"
-                  alt="people"
-                >
-              </div>
+              <img
+                src="img/Rectangle 6-4.jpg"
+                alt="people"
+              >
               <p class="name">
                 Name Surname
               </p>
             </div>
             <div class="person column">
-              <div class="picture">
-                <img
-                  src="img/people_1.jpg"
-                  alt="people"
-                >
-              </div>
+              <img
+                src="img/Rectangle%206-5.jpg"
+                alt="people"
+              >
               <p class="name">
                 Name Surname
               </p>
             </div>
             <div class="person column">
-              <div class="picture">
-                <img
-                  src="img/people 2.png"
-                  alt="people"
-                >
-              </div>
+              <img
+                src="img/Rectangle 6-6.jpg"
+                alt="people"
+              >
               <p class="name">
                 Name Surname
               </p>
             </div>
             <div class="person column">
-              <div class="picture">
-                <img
-                  src="img/people_1.jpg"
-                  alt="people"
-                >
-              </div>
+              <img
+                src="img/Rectangle%206-7.jpg"
+                alt="people"
+              >
               <p class="name">
                 Name Surname
               </p>
diff --git a/sesame-vitejs/sesame/src/components/DisabledSection.vue b/sesame-vitejs/sesame/src/components/DisabledSection.vue
index b603454..4f66f8d 100644
--- a/sesame-vitejs/sesame/src/components/DisabledSection.vue
+++ b/sesame-vitejs/sesame/src/components/DisabledSection.vue
@@ -5,6 +5,247 @@
 
 
 
+
+	<section
+		id="transactionnal_webdesign"
+		class="has-text-centerd"
+	>
+		<h2 class="title">
+			Transactional
+		</h2>
+		<div class="description has-text-centered">
+			Webdesign
+		</div>
+		<div class="columns">
+			<div class="column first">
+				<h3 class="sub-title">
+					For all your
+					<br>
+					<span class="color-emphasis"> digital</span> uses.
+				</h3>
+			</div>
+			<div class="column second">
+				Our creative competitive edge <br>
+				<br>
+				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>
+		</div>
+	</section>
+
+	<section id="carry">
+		<h2 class="title color-emphasis">
+			We carry out web design and development
+		</h2>
+		<p class="description">
+			in headless
+			<br>
+			commerce.
+		</p>
+		<div class="gradient-bg-yellow" />
+		<div class="gradient-bg" />
+		<div class="computer-block-item" />
+		<div class="bubbles secondary-color">
+			<p>Evolutive maintenance</p>
+			<p>Front end (ux/ui) development</p>
+			<p>Web App (pwa) development</p>
+			<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>
+
+
+	<section id="china">
+		<h2 class="title primary-color">
+			Our China-inspired ui in 4 pillars
+		</h2>
+		<p class="description secondary-color">
+			a quick and smooth consumer journey and never
+			<br>
+			ending shopping experience at the same time
+		</p>
+		<div class="line" />
+		<div class="block-items columns">
+			<div class="block-item column">
+				<div class="top block-item-1">
+					<p>
+						Content driven
+					</p>
+				</div>
+				<div class="bottom block-item-2">
+					- Rebound rate
+				</div>
+			</div>
+			<div class="block-item column">
+				<div class="top block-item-3">
+					<p>
+						Experimental
+					</p>
+				</div>
+				<div class="bottom block-item-4">
+					- Return rate
+				</div>
+			</div>
+			<div class="block-item column">
+				<div class="top block-item-5">
+					<p>
+						Interactive
+					</p>
+				</div>
+				<div class="bottom block-item-6">
+					+Conversion rate
+				</div>
+			</div>
+			<div class="block-item column">
+				<div class="top block-item-7">
+					<p>
+						Agile
+					</p>
+				</div>
+				<div class="bottom block-item-8">
+					+ Retention rate
+				</div>
+			</div>
+		</div>
+	</section>
+
+
+
+	<section id="we_develop">
+		<h2 class="title secondary-color">
+			We develop custom-made innovative e-commerce features based on your
+			brand stakes.
+		</h2>
+		<div class="phone-container-2">
+			<div class="top" />
+			<div class="picture" />
+			<div class="bottom" />
+		</div>
+		<div class="container-arrows">
+			<div class="circle">
+				<img
+					class="rotated"
+					src="img/arrow.svg"
+					alt=""
+				>
+			</div>
+			<div class="circle circle-right">
+				<img
+
+					src="img/arrow.svg"
+					alt=""
+				>
+			</div>
+		</div>
+
+		<div class="columns light-text">
+			<div class="column data">
+				Data
+			</div>
+			<div class="column ar">
+				AR
+			</div>
+		</div>
+		<div class="quick secondary-color">
+			Quick wins
+		</div>
+		<div class="long_term secondary-color">
+			Long-Term
+			<br>
+			Project
+		</div>
+	</section>
+
+	<section id="full_creative">
+		<h2 class="title secondary-color">
+			A full creative & production Studio in Paris
+		</h2>
+		<div class="container">
+			<div class="tiles columns dark-color">
+				<div class="aside column">
+					<h3 class="sub-title">
+						Sesame Studio Spaces
+					</h3>
+					<p>
+						2 Large Sets for Photos, Videos and Live Shopping Shooting
+						Adaptable lighting racks
+						Walls and decor for in-apartment style shooting
+						LED Screen Background
+						<br>
+						1 Small Set for Stills Life Shooting
+						<br>
+						1 Space for 720° with turntable and 720° robot
+						<br>Editing Room equipped for voice recording
+						<br>Styling Room
+						<br>Glam Room
+						<br>Separated Storrage Room safe for brand’s products
+					</p>
+					<h3 class="sub-title">
+						Full Service & Adaptative Team
+					</h3>
+					<p>
+						Studio Manager, Lighting Technician.
+						<br>Digital Creative Director, Motion Design, UX Designer, 3D Design.
+						<br>Large network of freelances specialized in all categories, premium and luxury included.
+					</p>
+				</div>
+				<div class="picture column">
+					<img
+						src="img/pictures_rooms.png"
+						alt="rooms"
+					>
+				</div>
+			</div>
+		</div>
+	</section>
 	<section id="china_achievements">
 		<div class="columns">
 			<div class="column">