enable animation back
This commit is contained in:
parent
aaa04e1198
commit
fd4170ea2f
@ -11947,6 +11947,7 @@ main nav {
|
|||||||
margin-bottom: 400px;
|
margin-bottom: 400px;
|
||||||
}
|
}
|
||||||
#open img {
|
#open img {
|
||||||
|
height:80vh;
|
||||||
max-width: 90vw;
|
max-width: 90vw;
|
||||||
}
|
}
|
||||||
#open-handle {
|
#open-handle {
|
||||||
@ -11954,8 +11955,10 @@ main nav {
|
|||||||
height: 20vh;
|
height: 20vh;
|
||||||
}
|
}
|
||||||
#content {
|
#content {
|
||||||
height: 60vh;
|
height: 100vh;
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
|
top: 50vh;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
#content h2 {
|
#content h2 {
|
||||||
margin-top: 33vh;
|
margin-top: 33vh;
|
||||||
@ -13392,3 +13395,26 @@ main .credits {
|
|||||||
margin-top: 650vw;
|
margin-top: 650vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.counter-block .big-number {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 140px;
|
||||||
|
line-height: 90%;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
color: #020225;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-block .text-description {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 150%;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #020225;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-block img {
|
||||||
|
margin-left: 80px;
|
||||||
|
border-radius: 80px;
|
||||||
|
}
|
||||||
|
|||||||
@ -180,11 +180,11 @@ console.log('start animations')
|
|||||||
// le background coloré grandit légèrement
|
// le background coloré grandit légèrement
|
||||||
gsap.fromTo('#content_all_img',
|
gsap.fromTo('#content_all_img',
|
||||||
{
|
{
|
||||||
scale: 0.8,
|
scale: 1,
|
||||||
left: -50
|
left: -100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
scale: 1,
|
scale: 1.1,
|
||||||
left: 0,
|
left: 0,
|
||||||
ease: 'linear',
|
ease: 'linear',
|
||||||
scrollTrigger: {
|
scrollTrigger: {
|
||||||
@ -235,4 +235,3 @@ console.log('start animations')
|
|||||||
animateCard(5, 'left')
|
animateCard(5, 'left')
|
||||||
}
|
}
|
||||||
|
|
||||||
export default enable_animations;
|
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
> 1%
|
|
||||||
last 2 versions
|
|
||||||
not dead
|
|
||||||
not ie 11
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
env: {
|
|
||||||
node: true,
|
|
||||||
},
|
|
||||||
extends: [
|
|
||||||
"plugin:vue/vue3-essential",
|
|
||||||
"eslint:recommended",
|
|
||||||
"@vue/typescript/recommended",
|
|
||||||
"plugin:prettier/recommended",
|
|
||||||
],
|
|
||||||
parserOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
|
||||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
23
sesame-vitejs/vue3/.gitignore
vendored
23
sesame-vitejs/vue3/.gitignore
vendored
@ -1,23 +0,0 @@
|
|||||||
.DS_Store
|
|
||||||
node_modules
|
|
||||||
/dist
|
|
||||||
|
|
||||||
|
|
||||||
# local env files
|
|
||||||
.env.local
|
|
||||||
.env.*.local
|
|
||||||
|
|
||||||
# Log files
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.idea
|
|
||||||
.vscode
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
# vue3
|
|
||||||
|
|
||||||
## Project setup
|
|
||||||
```
|
|
||||||
yarn install
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
|
||||||
```
|
|
||||||
yarn serve
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compiles and minifies for production
|
|
||||||
```
|
|
||||||
yarn build
|
|
||||||
```
|
|
||||||
|
|
||||||
### Lints and fixes files
|
|
||||||
```
|
|
||||||
yarn lint
|
|
||||||
```
|
|
||||||
|
|
||||||
### Customize configuration
|
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
presets: ["@vue/cli-plugin-babel/preset"],
|
|
||||||
};
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "vue3",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"serve": "vue-cli-service serve",
|
|
||||||
"build": "vue-cli-service build",
|
|
||||||
"lint": "vue-cli-service lint",
|
|
||||||
"format": "prettier . --write"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"core-js": "^3.8.3",
|
|
||||||
"vue": "^3.2.13"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@typescript-eslint/eslint-plugin": "^5.4.0",
|
|
||||||
"@typescript-eslint/parser": "^5.4.0",
|
|
||||||
"@vue/cli-plugin-babel": "~5.0.0",
|
|
||||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
|
||||||
"@vue/cli-plugin-typescript": "~5.0.0",
|
|
||||||
"@vue/cli-service": "~5.0.0",
|
|
||||||
"@vue/eslint-config-typescript": "^9.1.0",
|
|
||||||
"eslint": "^7.32.0",
|
|
||||||
"eslint-config-prettier": "^8.3.0",
|
|
||||||
"eslint-plugin-prettier": "^4.0.0",
|
|
||||||
"eslint-plugin-vue": "^8.0.3",
|
|
||||||
"prettier": "^2.4.1",
|
|
||||||
"sass": "^1.32.7",
|
|
||||||
"sass-loader": "^12.0.0",
|
|
||||||
"typescript": "~4.5.5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,17 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
<template>
|
|
||||||
<CoverSection />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from "vue";
|
|
||||||
import CoverSection from "./components/CoverSection.vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "App",
|
|
||||||
components: {
|
|
||||||
CoverSection,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
#app {
|
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-align: center;
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-top: 60px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,7 +0,0 @@
|
|||||||
<script setup lang="ts"></script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<section id="base_section" class="has-text-centerd"></section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss"></style>
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
numberValue: {type: String, required: true},
|
|
||||||
freeText: {type: String, required: true},
|
|
||||||
imgSrc: {type: String, required: true},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="counter-block">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column">
|
|
||||||
<div class="big-number">
|
|
||||||
{{ numberValue }}
|
|
||||||
</div>
|
|
||||||
<br/>
|
|
||||||
<div class="text-description">
|
|
||||||
{{ freeText }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<img :src="imgSrc" class="picture has-rounded-corners"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.counter-block {
|
|
||||||
.big-number {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 140px;
|
|
||||||
line-height: 90%;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
color: #020225;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-description {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 150%;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: #020225;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-left: 80px;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,348 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>rien</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts"></script>
|
|
||||||
@ -1,271 +0,0 @@
|
|||||||
<script setup lang="ts"></script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div id="sprint_1">
|
|
||||||
<main class="has-text-centered">
|
|
||||||
<section id="cover" class="has-text-centerd">
|
|
||||||
<div id="hand" />
|
|
||||||
|
|
||||||
<div id="main_title_container" class="margin-auto has-text-centered">
|
|
||||||
<div id="main_title" class="margin-auto">
|
|
||||||
<h1 class="is-hidden">Sesame</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="title-container">
|
|
||||||
<h2 class="container-text margin-auto">
|
|
||||||
We focus on online conversion to help brands sell better and more.
|
|
||||||
</h2>
|
|
||||||
<a href="#open" class="button margin-auto">Scroll</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="welcome">
|
|
||||||
<div class="phones-land">
|
|
||||||
<img
|
|
||||||
id="phone-watches-1"
|
|
||||||
src="/img/phone_watches.png"
|
|
||||||
alt="phone watches"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
id="phone-watches-2"
|
|
||||||
src="/img/phone_watches.png"
|
|
||||||
alt="phone watches"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
id="phone-watches-3"
|
|
||||||
src="/img/phone_watches.png"
|
|
||||||
alt="phone watches"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
id="phone-watches-4"
|
|
||||||
src="/img/phone_watches.png"
|
|
||||||
alt="phone watches"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 class="margin-auto container-text-lg">
|
|
||||||
We come from
|
|
||||||
<span class="color-emphasis">
|
|
||||||
the most immersive e-commerce market
|
|
||||||
</span>
|
|
||||||
in the world.
|
|
||||||
</h2>
|
|
||||||
</section>
|
|
||||||
<section id="open">
|
|
||||||
<div id="open-handle" />
|
|
||||||
<h2 class="text">
|
|
||||||
<img src="/img/unlock.png" alt="Open Sesame" />
|
|
||||||
</h2>
|
|
||||||
</section>
|
|
||||||
<section id="content">
|
|
||||||
<h2>
|
|
||||||
<p id="content_first" class="first color-emphasis">Transactional</p>
|
|
||||||
<p id="content_second" class="second">
|
|
||||||
<img src="/img/content.png" alt="content" />
|
|
||||||
</p>
|
|
||||||
</h2>
|
|
||||||
</section>
|
|
||||||
<section id="content_all">
|
|
||||||
<div id="content_all_img" />
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column">
|
|
||||||
<h2 class="container-text-md">
|
|
||||||
For all your
|
|
||||||
<span class="color-emphasis"> digital </span>
|
|
||||||
uses.
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<p class="container-text-md text">
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- flipping zones-->
|
|
||||||
<div id="flipping_zone">
|
|
||||||
<section id="content-2" class="flip-container flip-from-right">
|
|
||||||
<div id="content-2-handle" class="flip-handle" />
|
|
||||||
<div class="container-text">
|
|
||||||
<h2 class="text-title">Motion & 3D design</h2>
|
|
||||||
<p class="text-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
|
|
||||||
tortor egestas, rutrum elit at, fringilla felis. Mauris nec erat
|
|
||||||
rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
|
|
||||||
</p>
|
|
||||||
<button class="call-to-action">
|
|
||||||
More infos
|
|
||||||
<span class="arrow-icon">→</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="phone-container">
|
|
||||||
<img src="/img/phone_shoes_blue.png" alt="phone" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="content-3" class="flip-container flip-from-left">
|
|
||||||
<div id="content-3-handle" class="flip-handle" />
|
|
||||||
<div class="container-text">
|
|
||||||
<h2 class="text-title">
|
|
||||||
Videos
|
|
||||||
<br />
|
|
||||||
Production
|
|
||||||
</h2>
|
|
||||||
<p class="text-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
|
|
||||||
tortor egestas, rutrum elit at, fringilla felis. Mauris nec erat
|
|
||||||
rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
|
|
||||||
</p>
|
|
||||||
<button class="call-to-action">
|
|
||||||
More infos
|
|
||||||
<span class="arrow-icon">→</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="phone-container">
|
|
||||||
<img src="/img/phone_glasses.png" alt="phone" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="content-4" class="flip-container flip-from-right">
|
|
||||||
<div id="content-4-handle" class="flip-handle" />
|
|
||||||
<div class="container-text">
|
|
||||||
<h2 class="text-title">
|
|
||||||
Photos
|
|
||||||
<br />
|
|
||||||
Production
|
|
||||||
</h2>
|
|
||||||
<p class="text-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
|
|
||||||
tortor egestas, rutrum elit at, fringilla felis. Mauris nec erat
|
|
||||||
rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
|
|
||||||
</p>
|
|
||||||
<button class="call-to-action">
|
|
||||||
More infos
|
|
||||||
<span class="arrow-icon">→</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="phone-container">
|
|
||||||
<img src="/img/phone_face.png" alt="phone" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="content-5" class="flip-container flip-from-left">
|
|
||||||
<div id="content-5-handle" class="flip-handle" />
|
|
||||||
<div class="container-text">
|
|
||||||
<h2 class="text-title">
|
|
||||||
Videos
|
|
||||||
<br />
|
|
||||||
Production
|
|
||||||
</h2>
|
|
||||||
<p class="text-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
|
|
||||||
tortor egestas, rutrum elit at, fringilla felis. Mauris nec erat
|
|
||||||
rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
|
|
||||||
</p>
|
|
||||||
<button class="call-to-action">
|
|
||||||
More infos
|
|
||||||
<span class="arrow-icon">→</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="phone-container">
|
|
||||||
<img src="/img/phone_clothes.png" alt="phone" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<section id="coming_soon">
|
|
||||||
<h2>coming soon</h2>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- other section-->
|
|
||||||
<section id="popover" class="slider-screen">
|
|
||||||
<div class="close-button">
|
|
||||||
<img src="/img/cross_blue.png" alt="fermer" />
|
|
||||||
</div>
|
|
||||||
<div class="arrow-left">
|
|
||||||
<img src="/img/arrow.svg" alt="précédent" />
|
|
||||||
</div>
|
|
||||||
<div class="arrow-right">
|
|
||||||
<img src="/img/arrow.svg" alt="suivant" />
|
|
||||||
</div>
|
|
||||||
<div class="phone-container">
|
|
||||||
<div class="top" />
|
|
||||||
<div class="bottom" />
|
|
||||||
</div>
|
|
||||||
<div class="bullets">
|
|
||||||
<img src="/img/rond_gris.png" alt="rond" />
|
|
||||||
<img src="/img/rond_blanc.png" alt="rond" />
|
|
||||||
<img src="/img/rond_blanc.png" alt="rond" />
|
|
||||||
<img src="/img/rond_blanc.png" alt="rond" />
|
|
||||||
</div>
|
|
||||||
<div class="text">
|
|
||||||
<h2 class="text-title">
|
|
||||||
<span class="color-emphasis"> Premium </span>
|
|
||||||
<span class="dark-emphasis"> & Campaign </span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-grey">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
|
|
||||||
tortor egestas, rutrum elit at, fringilla felis. Mauris nec erat
|
|
||||||
rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!--grey bg-->
|
|
||||||
<section id="portfolio" class="slider-screen">
|
|
||||||
<div class="close-button">
|
|
||||||
<img src="/img/cross_blue.png" alt="fermer" />
|
|
||||||
</div>
|
|
||||||
<div class="arrow-left">
|
|
||||||
<img src="/img/arrow.svg" alt="précédent" />
|
|
||||||
</div>
|
|
||||||
<div class="arrow-right">
|
|
||||||
<img src="/img/arrow.svg" alt="suivant" />
|
|
||||||
</div>
|
|
||||||
<div class="phone-container">
|
|
||||||
<div class="top" />
|
|
||||||
<div class="bottom" />
|
|
||||||
</div>
|
|
||||||
<div class="bullets">
|
|
||||||
<img src="/img/rond_gris.png" alt="rond" />
|
|
||||||
<img src="/img/rond_blanc.png" alt="rond" />
|
|
||||||
<img src="/img/rond_blanc.png" alt="rond" />
|
|
||||||
<img src="/img/rond_blanc.png" alt="rond" />
|
|
||||||
</div>
|
|
||||||
<div class="text">
|
|
||||||
<h2 class="text-title">
|
|
||||||
<span class="color-emphasis"> Premium </span>
|
|
||||||
<span> & Campaign </span>
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
|
|
||||||
tortor egestas, rutrum elit at, fringilla felis. Mauris nec erat
|
|
||||||
rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- <div class="credits">-->
|
|
||||||
<!-- B. Lemoine - cipherbliss.com-->
|
|
||||||
<!-- <br>-->
|
|
||||||
<!-- Digital Theory-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<nav class="fixed-nav is-fixed-top">
|
|
||||||
<div class="burger-menu is-2">
|
|
||||||
<div class="icon-burger">
|
|
||||||
<span class="line" />
|
|
||||||
<span class="line" />
|
|
||||||
<span class="line" />
|
|
||||||
</div>
|
|
||||||
<span>Menu</span>
|
|
||||||
</div>
|
|
||||||
<div class="nav-main is-10 has-text-centered">Open Sesame</div>
|
|
||||||
</nav>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss"></style>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import { createApp } from "vue";
|
|
||||||
import App from "./App.vue";
|
|
||||||
|
|
||||||
createApp(App).mount("#app");
|
|
||||||
6
sesame-vitejs/vue3/src/shims-vue.d.ts
vendored
6
sesame-vitejs/vue3/src/shims-vue.d.ts
vendored
@ -1,6 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
declare module '*.vue' {
|
|
||||||
import type { DefineComponent } from 'vue'
|
|
||||||
const component: DefineComponent<{}, {}, any>
|
|
||||||
export default component
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "esnext",
|
|
||||||
"module": "esnext",
|
|
||||||
"strict": true,
|
|
||||||
"jsx": "preserve",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"sourceMap": true,
|
|
||||||
"baseUrl": ".",
|
|
||||||
"types": [
|
|
||||||
"webpack-env"
|
|
||||||
],
|
|
||||||
"paths": {
|
|
||||||
"@/*": [
|
|
||||||
"src/*"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"lib": [
|
|
||||||
"esnext",
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"scripthost"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"src/**/*.ts",
|
|
||||||
"src/**/*.tsx",
|
|
||||||
"src/**/*.vue",
|
|
||||||
"tests/**/*.ts",
|
|
||||||
"tests/**/*.tsx",
|
|
||||||
"node_modules/@types/node/ts4.8/globals.d.ts"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"node_modules"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
const { defineConfig } = require("@vue/cli-service");
|
|
||||||
module.exports = defineConfig({
|
|
||||||
transpileDependencies: true,
|
|
||||||
globals: [
|
|
||||||
"defineProps"
|
|
||||||
]
|
|
||||||
});
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user