digital-theory/index.html

553 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html id="no-js" lang="fr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Sesame">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- <link rel="stylesheet" href="css/normalize.css">-->
<!-- <link rel="stylesheet" href="/css/bulma.css" type="text/css">-->
<!-- <link rel="stylesheet" href="/css/main.css" type="text/css">-->
<link rel="stylesheet" href="/css/sprint_4.css" type="text/css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<main class="has-text-centered">
<section id="cover" class="has-text-centerd">
<div id="cover-handle"></div>
<div id="hand"></div>
<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 src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
</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>
<h2 class="text">
<img src="/img/unlock.png" alt="Open Sesame">
<img src="/img/unlock_white.png" alt="Open Sesame" id="unlock_white">
</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>
<div class="columns">
<div class="column" id="for_all_your">
<h2 class="container-text-md">
For all your
<span class="color-emphasis">
digital
</span>
uses.
</h2>
</div>
<div class="column" id="for_all_your_2">
<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>
<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>
<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>
<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>
<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>
<div class="bottom">
</div>
</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>
<div class="bottom">
</div>
</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>
<span class="line"></span>
<span class="line"></span>
</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>
<div class="gradient-bg"></div>
<div class="computer-block"></div>
<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>
<div class="bubbles secondary-color fat-text">
<div class="small-bubble"></div>
<div class="small-bubble"></div>
<div class="small-bubble"></div>
<div class="small-bubble"></div>
<div class="small-bubble"></div>
<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>
<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>
<div class="picture"></div>
<div class="bottom"></div>
</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 brands 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 Chinas e-commerce,
capitalizing on the markets 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>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js" type="application/ecmascript"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js" type="application/ecmascript"></script>
<script src="/js/animations_custom.js" type="application/ecmascript"></script>
</body>
</html>