tykayn/digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add html sections for sprint 4 design in vue template first

Browse Source
This commit is contained in:
Tykayn 2023-05-18 12:08:17 +02:00 committed by tykayn
parent 58e5a0aa3e
commit 158636fba9
1 changed files with 255 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
sesame-vitejs/sesame/src/components/CoverSection.vue
View File

@ -9,23 +9,210 @@ const count = ref(0)
<template>
<main class="has-text-centered">
<!-- sprint 4 content-->
<section id="cover" class="has-text-centerd">
<div id="hand"></div>
<div id="main_title_container" class="margin-auto has-text-centered">
<div id="main_title" class="margin-auto">
<h1 class="is-hidden">Sesame</h1>
<h2>Transactional</h2>
<p>
Webcontent
</p>
<div class="aside">
Our creative competitive edge
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>
<div class="title-container">
<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>
<h2 class="container-text margin-auto">
We focus on online conversion to help brands sell better and more.
</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>
<a href="#open" class="button margin-auto">Scroll</a>
</div>
<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>
@ -48,6 +235,7 @@ const count = ref(0)
#cover {
background: url('/img/BG 1.png') no-repeat;
background-size: cover;
h2 {
position: absolute;
top: 10vh;
@ -65,8 +253,9 @@ const count = ref(0)
letter-spacing: -0.04em;
/* Secondary 100 */
color: #FFFDFC;
color: #fffdfc;
}
.button {
box-sizing: border-box;
@ -92,7 +281,4 @@ const count = ref(0)
}
</style>