add html sections for sprint 4 design in vue template first
This commit is contained in:
parent
58e5a0aa3e
commit
158636fba9
@ -1,98 +1,284 @@
|
|||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main class="has-text-centered">
|
<main class="has-text-centered">
|
||||||
|
|
||||||
<section id="cover" class="has-text-centerd">
|
<!-- sprint 4 content-->
|
||||||
<div id="hand"></div>
|
<section id="cover" class="has-text-centerd">
|
||||||
|
|
||||||
<div id="main_title_container" class="margin-auto has-text-centered">
|
<h2>Transactional</h2>
|
||||||
<div id="main_title" class="margin-auto">
|
<p>
|
||||||
<h1 class="is-hidden">Sesame</h1>
|
Webcontent
|
||||||
</div>
|
</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">
|
<div class="bubbles">
|
||||||
We focus on online conversion to help brands sell better and more.
|
<p>Evolutive maintenance</p>
|
||||||
</h2>
|
<p>Front end (ux/ui) development</p>
|
||||||
<a href="#open" class="button margin-auto">Scroll</a>
|
<p>Web App (pwa)
|
||||||
</div>
|
development</p>
|
||||||
|
<p>Consulting</p>
|
||||||
|
</div>
|
||||||
|
<p>We craft e-commerce Ux template based on qualitative and quantitative studies</p>
|
||||||
|
|
||||||
</div>
|
</section>
|
||||||
</section>
|
<section id="kyc">
|
||||||
</main>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
|
|
||||||
#hand {
|
#hand {
|
||||||
background: url('/img/hand 1.png');
|
background: url('/img/hand 1.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 1300px;
|
height: 1300px;
|
||||||
left: 1px;
|
left: 1px;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#cover {
|
#cover {
|
||||||
background: url('/img/BG 1.png') no-repeat;
|
background: url('/img/BG 1.png') no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
h2 {
|
|
||||||
position: absolute;
|
|
||||||
top: 10vh;
|
|
||||||
left: 42vw;
|
|
||||||
|
|
||||||
/* Subtitle/desktop_1 */
|
h2 {
|
||||||
font-family: 'GT Walsheim Pro', Arial;
|
position: absolute;
|
||||||
font-style: normal;
|
top: 10vh;
|
||||||
font-weight: 600;
|
left: 42vw;
|
||||||
font-size: 40px;
|
|
||||||
line-height: 120%;
|
|
||||||
|
|
||||||
/* or 48px */
|
/* Subtitle/desktop_1 */
|
||||||
text-align: center;
|
font-family: 'GT Walsheim Pro', Arial;
|
||||||
letter-spacing: -0.04em;
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 120%;
|
||||||
|
|
||||||
/* Secondary 100 */
|
/* or 48px */
|
||||||
color: #FFFDFC;
|
text-align: center;
|
||||||
}
|
letter-spacing: -0.04em;
|
||||||
.button {
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
position: relative;
|
/* Secondary 100 */
|
||||||
right: 0;
|
color: #fffdfc;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user