309 lines
8.3 KiB
Vue
309 lines
8.3 KiB
Vue
<script setup lang="ts">
|
||
|
||
import CounterBlock from './CounterBlock.vue';
|
||
</script>
|
||
|
||
<template>
|
||
<main class="has-text-centered">
|
||
<!-- sprint 4 content-->
|
||
<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%206-1.jpg"
|
||
alt="people"
|
||
>
|
||
|
||
<p class="name">
|
||
Name Surname
|
||
</p>
|
||
</div>
|
||
<div class="person column">
|
||
<img
|
||
src="img/people%202.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%206-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%206-7.jpg"
|
||
alt="people"
|
||
>
|
||
<p class="name">
|
||
Name Surname
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- responsive managed until here -->
|
||
</div>
|
||
</main>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
CounterBlock{
|
||
margin-right: 4rem;
|
||
}
|
||
</style>
|