add pictures for team people
BIN
sesame-vitejs/sesame/img/Rectangle 6-1.jpg
Normal file
After Width: | Height: | Size: 125 KiB |
BIN
sesame-vitejs/sesame/img/Rectangle 6-3.jpg
Normal file
After Width: | Height: | Size: 74 KiB |
BIN
sesame-vitejs/sesame/img/Rectangle 6-4.jpg
Normal file
After Width: | Height: | Size: 153 KiB |
BIN
sesame-vitejs/sesame/img/Rectangle 6-5.jpg
Normal file
After Width: | Height: | Size: 119 KiB |
BIN
sesame-vitejs/sesame/img/Rectangle 6-6.jpg
Normal file
After Width: | Height: | Size: 177 KiB |
BIN
sesame-vitejs/sesame/img/Rectangle 6-7.jpg
Normal file
After Width: | Height: | Size: 99 KiB |
BIN
sesame-vitejs/sesame/img/Rectangle 6.jpg
Normal file
After Width: | Height: | Size: 118 KiB |
BIN
sesame-vitejs/sesame/img/people 2-1.jpg
Normal file
After Width: | Height: | Size: 34 KiB |
BIN
sesame-vitejs/sesame/img/people 2-2.jpg
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
sesame-vitejs/sesame/img/people 2-3.jpg
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
sesame-vitejs/sesame/img/people 2-4.jpg
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
sesame-vitejs/sesame/img/people 2-5.jpg
Normal file
After Width: | Height: | Size: 45 KiB |
BIN
sesame-vitejs/sesame/img/people 2.jpg
Normal file
After Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 305 KiB After Width: | Height: | Size: 305 KiB |
@ -1,5 +1,7 @@
|
|||||||
#full_creative{
|
#full_creative{
|
||||||
background: white;
|
background: white;
|
||||||
|
min-height: 120vh;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-family: 'GT Walsheim Pro';
|
font-family: 'GT Walsheim Pro';
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
@ -1,9 +1,30 @@
|
|||||||
#our_team{
|
#our_team {
|
||||||
|
|
||||||
|
padding-top: 5rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
background: white;
|
||||||
|
text-align: left;
|
||||||
.title {
|
.title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 270px;
|
||||||
|
line-height: 80px;
|
||||||
|
letter-spacing: -0.06em;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sub-title{
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 60px;
|
||||||
|
line-height: 110%;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
color: #020225;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
.description {
|
.description {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -4,7 +4,159 @@
|
|||||||
<main class="has-text-centered">
|
<main class="has-text-centered">
|
||||||
<!-- sprint 4 content-->
|
<!-- sprint 4 content-->
|
||||||
<div id="sprint_4">
|
<div id="sprint_4">
|
||||||
<h1>hello</h1>
|
<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">
|
<section id="we_develop">
|
||||||
<h2 class="title secondary-color">
|
<h2 class="title secondary-color">
|
||||||
We develop custom-made innovative e-commerce features based on your
|
We develop custom-made innovative e-commerce features based on your
|
||||||
@ -92,6 +244,94 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section id="our_team">
|
||||||
|
<h2 class="title primary-color">
|
||||||
|
Our team.
|
||||||
|
</h2>
|
||||||
|
<div class="sub-category dark-color">
|
||||||
|
<p class="sub-title">
|
||||||
|
of experts and directors.
|
||||||
|
</p>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<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>
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture">
|
||||||
|
<img
|
||||||
|
src="img/people_1.jpg"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture">
|
||||||
|
<img
|
||||||
|
src="img/people 2.png"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture">
|
||||||
|
<img
|
||||||
|
src="img/people_1.jpg"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,225 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<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="our_team">
|
|
||||||
<h2 class="title primary-color">
|
|
||||||
Our team.
|
|
||||||
</h2>
|
|
||||||
<div class="sub-category dark-color">
|
|
||||||
<p>of experts and directors.</p>
|
|
||||||
<div class="columns">
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<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" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="china_achievements">
|
<section id="china_achievements">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
|