digital-theory/repl/repl/src/app/app.component.html

909 lines
26 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.

<style>
</style>
<!-- Toolbar -->
<div class="content" role="main">
<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
id="phone-watches-1"
src="/assets/img/phone_watches.png"
alt="phone watches"
>
<img
id="phone-watches-2"
src="/assets/img/phone_watches.png"
alt="phone watches"
>
<img
id="phone-watches-3"
src="/assets/img/phone_watches.png"
alt="phone watches"
>
<img
id="phone-watches-4"
src="/assets/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>
<div class="text">
<!-- <img-->
<!-- id="unlock"-->
<!-- src="/assets/img/unlock.png"-->
<!-- alt="Open Sesame"-->
<!-- >-->
<img
id="unlock_white"
src="/assets/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="/assets/img/content.png"
alt="content"
>
</p>
</h2>
</section>
<section id="content_all">
<div id="content_all_img"></div>
<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>
<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="/assets/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="/assets/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="/assets/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="/assets/img/phone_clothes.png"
alt="phone"
>
</div>
</section>
</div>
<!-- other section-->
<section
id="popover"
class="slider-screen"
>
<div class="close-button">
<img
src="/assets/img/cross_blue.png"
alt="fermer"
>
</div>
<div class="arrow-left">
<img
src="/assets/img/arrow.svg"
alt="précédent"
>
</div>
<div class="arrow-right">
<img
src="/assets/img/arrow.svg"
alt="suivant"
>
</div>
<div class="phone-container">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bullets">
<img
src="/assets/img/rond_gris.png"
alt="rond"
>
<img
src="/assets/img/rond_blanc.png"
alt="rond"
>
<img
src="/assets/img/rond_blanc.png"
alt="rond"
>
<img
src="/assets/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="/assets/img/cross_blue.png"
alt="fermer"
>
</div>
<div class="arrow-left">
<img
src="/assets/img/arrow.svg"
alt="précédent"
>
</div>
<div class="arrow-right">
<img
src="/assets/img/arrow.svg"
alt="suivant"
>
</div>
<div class="phone-container">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bullets">
<img
src="/assets/img/rond_gris.png"
alt="rond"
>
<img
src="/assets/img/rond_blanc.png"
alt="rond"
>
<img
src="/assets/img/rond_blanc.png"
alt="rond"
>
<img
src="/assets/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">
<span class="burger-menu is-2">
<span class="icon-burger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</span>
<span>Menu</span>
</span>
<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="/assets/img/arrow.svg"
alt=""
>
</div>
<div class="circle circle-right">
<img
src="/assets/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">
<div class="container">
<h2 class="title secondary-color">
A full creative &amp; production Studio in
Paris
</h2>
<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="/assets/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="/assets/img/Rectangle 6.jpg"
alt="people"
>
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<img
src="/assets/img/Rectangle 6-1.jpg"
alt="people"
>
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<img
src="/assets/img/people 2.png"
alt="people"
>
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<img
src="/assets/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="/assets/img/Rectangle 6-4.jpg"
alt="people"
>
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<img
src="/assets/img/Rectangle 6-5.jpg"
alt="people"
>
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<img
src="/assets/img/Rectangle 6-6.jpg"
alt="people"
>
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<img
src="/assets/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="/assets/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="/assets/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="/assets/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="/assets/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="/assets/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="/assets/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
<router-outlet></router-outlet>
<br>
Digital Theory
</div>
</div>
</main>
</div>