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

up vitejs

Browse Source
This commit is contained in:
Tykayn 2023-07-06 13:45:01 +02:00 committed by tykayn
parent ffb1ccd702
commit 10dfd80165
12 changed files with 17607 additions and 1085 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
sesame-vitejs/sesame/bundle.css
View File

@ -1,31 +1,5 @@
@charset "UTF-8";
@import url("https://fonts.cdnfonts.com/css/gt-walsheim-pro");
CounterBlock {
margin-right: 4rem;
}
.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;
}
/**
libs
*/

7
sesame-vitejs/sesame/src/App.vue
View File

@ -1,14 +1,13 @@
<script setup lang="ts">
import CoverSection from "./components/CoverSection.vue";
import FirstSprint from "./components/FirstSprint.vue";
import LastSprint from "./components/LastSprint.vue";
</script>
<template>
<main>
<FirstSprint />
<CoverSection />
<LastSprint />
</main>
</template>
<style lang="scss">
/*@import 'assets/styles/main.scss';*/
</style>

162
sesame-vitejs/sesame/src/animations_custom.js
View File

@ -1,37 +1,50 @@
// animation
import { gsap, ScrollTrigger} from "gsap/all";
gsap.registerPlugin(ScrollTrigger);
/**
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations
*/
const development_debug = false
// development_debug = true
let enable_animations = false
enable_animations = true
const rotateYCard = '180deg'
const offsetCard = '-100px'
const rotateYCard = '200deg'
const offsetCard = '10'
let innerWidth = window.innerWidth
if (document.onresize) {
document.onresize(event => {
innerWidth = window.innerWidth
console.log('innerWidth', innerWidth)
})
}
function animateCard (id, side) {
console.log('animateCard', '#content-' + id + ' .flip-handle', side, offsetCard)
const fromObject = {
rotateY: rotateYCard,
side: offsetCard
rotateX: '-10deg',
// side: offsetCard
}
const toObject = {
rotateY: 0,
rotateX: 0,
duration: 0.2,
ease: 'easeInOut',
side,
// side: 1,
scrollTrigger: {
trigger: '#content-' + id + ' .flip-handle',
start: 'top 80%',
scrub: 1,
markers: development_debug,
}
}
fromObject[side] = 1
toObject[side] = offsetCard
gsap.fromTo('#content-' + id, fromObject,
toObject)
@ -40,55 +53,95 @@ function animateCard (id , side) {
if (enable_animations) {
console.log('start animations')
gsap.fromTo('#main_title', {
gsap.fromTo('#for_all_your', {
opacity: 0,
top: 200
}, {
opacity: 1,
top: 100,
scale: 0.8,
duration: 1.5,
ease: 'sine',
scale: 0.5,
},
{
opacity: 1,
top: 0,
scale: 1,
duration: 0.25,
scrollTrigger: {
trigger: '#cover',
scrub: 1,
markers: development_debug,
trigger: '#for_all_your',
start: 'top bottom'
}
})
gsap.fromTo('#for_all_your_2', {
opacity: 0,
scale: 0.5,
},
{
opacity: 1,
duration: 1,
scale: 1,
scrollTrigger: {
trigger: '#for_all_your_2',
delay: 0.4,
start: 'top bottom'
}
})
gsap.to('#hand', {
top: 300,
duration: 1,
gsap.fromTo('#unlock, #unlock_white', {
opacity: 0.1,
// scale: 1,
},
{
opacity: 1,
// scale: 1.25,
scrollTrigger: {
trigger: '#cover',
scrub: 1,
markers: development_debug,
trigger: '#unlock_white',
delay: 1,
scrub: 2,
start: '+50% 80%'
}
})
gsap.to('#main_title', {
top: 150,
duration: 1,
delay: 1,
// xPercent: ()=>nav.offsetHeight,
scrollTrigger: {
trigger: '#main_title',
scrub: 1,
markers: development_debug,
},
top: innerWidth > 1300 ? '15vw' : '30vw',
width: '-40vw',
})
gsap.fromTo('#hand',
{
top: -200,
opacity: 1,
},
{
top: 500,
duration: 1,
opacity: 0,
scrollTrigger: {
trigger: '#cover',
scrub: 1,
markers: development_debug,
}
})
gsap.to('#phone-watches-1',
{
left: 500,
top: (531 - 400),
top: -200,
scale: 0.8,
duration: 1.5,
ease: 'sine',
scrollTrigger: {
trigger: '#welcome',
scrub: 1,
delay: 1,
markers: development_debug,
}
})
gsap.to('#phone-watches-2',
{
left: '50vw',
@ -99,6 +152,7 @@ console.log('start animations')
scrollTrigger: {
trigger: '#welcome',
scrub: 1,
delay: 0.5,
markers: development_debug,
}
})
@ -129,28 +183,14 @@ console.log('start animations')
}
})
gsap.to('#phone-watches-4',
{
left: '50vw',
top: -10,
scale: 0.5,
duration: 3,
ease: 'sine',
scrollTrigger: {
trigger: '#welcome',
scrub: 2,
markers: development_debug,
}
})
gsap.fromTo('#content_first',
{
scale: 0.5,
opacity: 0.5,
opacity: 0.15,
},
{
opacity: 1,
scale: 0.6,
scale: 0.9,
ease: 'easeInOut',
scrollTrigger: {
trigger: '#content',
@ -163,7 +203,7 @@ console.log('start animations')
{
scale: 0.8,
left: -50,
opacity: 0.5,
opacity: 0.15,
top: -20,
},
{
@ -171,7 +211,7 @@ console.log('start animations')
top: -50,
opacity: 1,
duration: 2,
scale: 0.9,
scale: 1.5,
ease: 'spline',
scrollTrigger: {
trigger: '#content',
@ -183,11 +223,11 @@ console.log('start animations')
// le background coloré grandit légèrement
gsap.fromTo('#content_all_img',
{
scale: 0.8,
left: -50
scale: 1,
left: '-100'
},
{
scale: 1,
scale: 1.1,
left: 0,
ease: 'linear',
scrollTrigger: {
@ -197,20 +237,29 @@ console.log('start animations')
}
})
// TODO faire devenir fixe le background une fois que l'on est passé
gsap.fromTo('#open img',
gsap.fromTo('#unlock',
{
opacity: 0.5,
bottom: '-100vh'
marginTop: "0",
},
{
opacity: 1,
bottom: '50vh',
scale: 1.5,
marginTop: "-4px",
ease: 'spline',
scrollTrigger: {
trigger: '#open-handle',
scrub: 2,
markers: development_debug,
}
})
gsap.fromTo('#unlock_white',
{
opacity: 0.5,
},
{
opacity: 1,
ease: 'spline',
scrollTrigger: {
trigger: '#open-handle',
markers: development_debug,
}
})
@ -238,4 +287,3 @@ console.log('start animations')
animateCard(5, 'left')
}
export default enable_animations;

16559
sesame-vitejs/sesame/src/assets/styles/_sprint_4.scss Normal file
View File

File diff suppressed because it is too large Load Diff

50
sesame-vitejs/sesame/src/assets/styles/main.scss
View File

@ -1,32 +1,34 @@
/**
libs
*/
@import "./libs/boilerplate.css";
@import "./libs/normalize.css";
@import url("https://fonts.cdnfonts.com/css/gt-walsheim-pro");
@import "./libs/bulma.css";
//@import "./libs/boilerplate.css";
//@import "./libs/normalize.css";
//@import url("https://fonts.cdnfonts.com/css/gt-walsheim-pro");
//@import "./libs/bulma.css";
/**
custom
*/
@import "./0-variables.scss";
@import "0-general.scss";
@import "./0-1-nav.css";
@import "./1-cover.css";
@import "./1-2-main_title.css";
@import "./2-we-come-from.css";
@import "./3-open-sesame.css";
@import "./4-content.css";
@import "./5-popover.css";
@import "./6-portfolio.css";
@import "10-webdesign.scss";
@import "11-carry.scss";
@import "12-kyc.scss";
@import "13-china.scss";
@import "14-we-develop.scss";
@import "15-full-creative.scss";
@import "16-our_team.scss";
@import "17-china-achievements.scss";
@import "18-baozun-group.scss";
@import "./100-coming_soon.css";
@import "./7-responsive.css";
//@import "0-general.scss";
//@import "./0-1-nav.css";
//@import "./1-cover.css";
//@import "./1-2-main_title.css";
//@import "./2-we-come-from.css";
//@import "./3-open-sesame.css";
//@import "./4-content.css";
//@import "./5-popover.css";
//@import "./6-portfolio.css";
//@import "10-webdesign.scss";
//@import "11-carry.scss";
//@import "12-kyc.scss";
//@import "13-china.scss";
//@import "14-we-develop.scss";
//@import "15-full-creative.scss";
//@import "16-our_team.scss";
//@import "17-china-achievements.scss";
//@import "18-baozun-group.scss";
//@import "./100-coming_soon.css";
//@import "./7-responsive.css";
@import "./sprint_4.scss";

7
sesame-vitejs/sesame/src/components/BaseSection.vue
View File

@ -1,7 +0,0 @@
<script setup lang="ts"></script>
<template>
<section id="base_section" class="has-text-centerd"></section>
</template>
<style lang="scss"></style>

59
sesame-vitejs/sesame/src/components/CounterBlock.vue
View File

@ -1,59 +0,0 @@
<script setup lang="ts">
const props = defineProps({
numberValue: String,
freeText: String,
imgSrc: String,
})
console.log('props', props)
</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>

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

@ -1,479 +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>

16
sesame-vitejs/sesame/src/components/DisabledSection.vue
View File

@ -1,16 +0,0 @@
<template>
<div>
rien
</div>
</template>
<script lang="ts">
</script>

402
sesame-vitejs/sesame/src/components/FirstSprint.vue
View File

@ -1,402 +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>

902
sesame-vitejs/sesame/src/components/LastSprint.vue Normal file
View File

@ -0,0 +1,902 @@
<script setup lang="ts">
</script>
<template>
<div>
<main class="has-text-centered">
<section
id="cover"
class="has-text-centerd"
>
<div id="cover-handle" />
<div id="hand" />
<div
id="main_title_container"
class="has-text-centered"
>
<div id="main_title">
<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" />
<div class="text">
<img
id="unlock"
src="/img/unlock.png"
alt="Open Sesame"
>
<img
id="unlock_white"
src="/img/unlock_white.png"
alt="Open Sesame"
>
</div>
</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
id="for_all_your"
class="column"
>
<h2 class="container-text-md">
For all your
<span class="color-emphasis">
digital
</span>
uses.
</h2>
</div>
<div
id="for_all_your_2"
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>
<!-- 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>
<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">
<p>
Open Sesame
</p>
</div>
</nav>
<div id="sprint_4">
<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>
<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 &amp; 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 &amp; 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">
<div class="counter-block">
<div class="columns">
<div class="column">
<div class="big-number">
400+
</div>
<br>
<div class="text-description">
Store launches incl. Dr. Martens, G-star etc.
</div>
</div>
<div class="column">
<img
src="/img/people 2.jpg"
class="picture has-rounded-corners"
>
</div>
</div>
</div>
</div>
<div class="column">
<div class="counter-block">
<div class="columns">
<div class="column">
<div class="big-number">
100+
</div>
<br>
<div class="text-description">
Luxury Store launches on incl. Christofle, De Beers etc.
</div>
</div>
<div class="column">
<img
src="/img/people 2-1.jpg"
class="picture has-rounded-corners"
>
</div>
</div>
</div>
</div>
<div class="column">
<div class="counter-block">
<div class="columns">
<div class="column">
<div class="big-number">
40+
</div>
<br>
<div class="text-description">
Luxury Brands supported with E2E services.
</div>
</div>
<div class="column">
<img
src="/img/people 2-2.jpg"
class="picture has-rounded-corners"
>
</div>
</div>
</div>
</div>
</div>
<div class="columns offset-left-columns">
<div class="column">
<div class="counter-block">
<div class="columns">
<div class="column">
<div class="big-number">
50+
</div>
<br>
<div class="text-description">
Brands assisted in social project commerces.
</div>
</div>
<div class="column">
<img
src="/img/people 2-3.jpg"
class="picture has-rounded-corners"
>
</div>
</div>
</div>
</div>
<div class="column">
<div class="counter-block">
<div class="columns">
<div class="column">
<div class="big-number">
30+
</div>
<br>
<div class="text-description">
PROJECTS converted into Ecom Ops management.
</div>
</div>
<div class="column">
<img
src="/img/people 2-4.jpg"
class="picture has-rounded-corners"
>
</div>
</div>
</div>
</div>
<div class="column">
<div class="counter-block">
<div class="columns">
<div class="column">
<div class="big-number">
30-60%
</div>
<br>
<div class="text-description">
Of our brands’ partner China GMV done online.
</div>
</div>
<div class="column">
<img
src="/img/people 2-5.jpg"
class="picture has-rounded-corners"
>
</div>
</div>
</div>
</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 -->
<section id="coming_soon">
<h2>
coming soon
</h2>
</section>
<div class="credits">
B. Lemoine - cipherbliss.com
<br>
Digital Theory
</div>
</div>
</main>
</div>
</template>
<style lang="scss">
</style>

1
sesame-vitejs/sesame/vite.config.ts
View File

@ -9,6 +9,7 @@ import {ViteAliases} from "vite-aliases";
export default defineConfig({
build: {
manifest: true,
// cssCodeSplit: false,
rollupOptions:{
output:{
sourcemap:true,