tykayn
/
digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
digital-theory/repl/repl/src/app/app.component.html

909 lines
26 KiB
HTML
Raw Normal View History

:art: update style
2023-07-06 17:55:35 +02:00
<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 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="/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 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="/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>