349 lines
10 KiB
Vue
349 lines
10 KiB
Vue
<script setup lang="ts">
|
||
import CounterBlock from "./CounterBlock.vue";
|
||
</script>
|
||
|
||
<template>
|
||
<main class="has-text-centered">
|
||
<!-- sprint 4 content-->
|
||
|
||
<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" />
|
||
<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>
|
||
|
||
<div id="sprint_4">
|
||
<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="pillars show-on-medium">
|
||
<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>
|
||
</div>
|
||
<div class="cols hide-on-medium">
|
||
<div class="small-cols 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>
|
||
</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 circle-left">
|
||
<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.</h2>
|
||
<div class="sub-category dark-color">
|
||
<p class="sub-title">of experts and directors.</p>
|
||
<div class="columns">
|
||
<div class="person column">
|
||
<img :src="'/img/Rectangle 6.jpg'" alt="people" />
|
||
<p class="name">Name Surname</p>
|
||
</div>
|
||
<div class="person column">
|
||
<img :src="'/img/Rectangle 6-1.jpg'" alt="people" />
|
||
|
||
<p class="name">Name Surname</p>
|
||
</div>
|
||
<div class="person column">
|
||
<img :src="'/img/people 2.png'" alt="people" />
|
||
|
||
<p class="name">Name Surname</p>
|
||
</div>
|
||
<div class="person column">
|
||
<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">
|
||
<img :src="'/img/Rectangle 6-4.jpg'" alt="people" />
|
||
<p class="name">Name Surname</p>
|
||
</div>
|
||
<div class="person column">
|
||
<img :src="'/img/Rectangle 6-5.jpg'" alt="people" />
|
||
<p class="name">Name Surname</p>
|
||
</div>
|
||
<div class="person column">
|
||
<img :src="'/img/Rectangle 6-6.jpg'" alt="people" />
|
||
<p class="name">Name Surname</p>
|
||
</div>
|
||
<div class="person column">
|
||
<img :src="'/img/Rectangle 6-7.jpg'" alt="people" />
|
||
<p class="name">Name Surname</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="china_achievements">
|
||
<div class="columns">
|
||
<div class="column">
|
||
<h2 class="title primary-color">Our China achievements</h2>
|
||
</div>
|
||
<div class="column">
|
||
<p class="dark-color">
|
||
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="columns">
|
||
<div class="column">
|
||
<CounterBlock
|
||
number-value="400+"
|
||
free-text="Store launches incl. Dr. Martens, G-star etc."
|
||
img-src="/img/people 2.jpg"
|
||
/>
|
||
</div>
|
||
<div class="column">
|
||
<CounterBlock
|
||
number-value="100+"
|
||
free-text="Luxury Store launches on incl. Christofle, De Beers etc."
|
||
img-src="/img/people 2-1.jpg"
|
||
/>
|
||
</div>
|
||
<div class="column">
|
||
<CounterBlock
|
||
number-value="40+"
|
||
free-text="Luxury Brands supported with E2E services."
|
||
img-src="/img/people 2-2.jpg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="columns offset-left-columns">
|
||
<div class="column">
|
||
<CounterBlock
|
||
number-value="50+"
|
||
free-text="Brands assisted in social project commerces."
|
||
img-src="/img/people 2-3.jpg"
|
||
/>
|
||
</div>
|
||
<div class="column">
|
||
<CounterBlock
|
||
number-value="30+"
|
||
free-text="PROJECTS converted into Ecom Ops management."
|
||
img-src="/img/people 2-4.jpg"
|
||
/>
|
||
</div>
|
||
<div class="column">
|
||
<CounterBlock
|
||
number-value="30-60%"
|
||
free-text="Of our brands’ partner China GMV done online."
|
||
img-src="/img/people 2-5.jpg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="baozun_group" class="has-rounded-corners">
|
||
<h2 class="title">
|
||
Baozun Group
|
||
<br />
|
||
and Company.
|
||
</h2>
|
||
</section>
|
||
|
||
<!-- responsive managed until here -->
|
||
</div>
|
||
</main>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
CounterBlock {
|
||
margin-right: 4rem;
|
||
}
|
||
</style>
|