add prettier and eslint

This commit is contained in:
Tykayn 2023-05-24 17:33:23 +02:00 committed by tykayn
parent 9d8a8c9b2f
commit eab080d599
29 changed files with 12328 additions and 11102 deletions

4
.idea/watcherTasks.xml Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
</project>

View File

@ -0,0 +1,20 @@
{
"root": true,
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"plugin:vue/vue3-recommended",
"eslint:recommended",
"@vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2021
},
"plugins": [
],
"rules": {
}
}

View File

@ -0,0 +1 @@
{}

File diff suppressed because it is too large Load Diff

View File

@ -7,13 +7,22 @@
"start": "vite", "start": "vite",
"dev": "vite", "dev": "vite",
"build": "vue-tsc && vite build", "build": "vue-tsc && vite build",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"format": "prettier . --write",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"vue": "^3.2.47" "vue": "^3.2.47"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",
"@vitejs/plugin-vue": "^4.1.0", "@vitejs/plugin-vue": "^4.1.0",
"@vue/eslint-config-typescript": "^11.0.3",
"eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-vue": "^9.14.0",
"prettier": "2.8.8",
"rollup-plugin-scss": "^3.0.0", "rollup-plugin-scss": "^3.0.0",
"sass": "^1.62.0", "sass": "^1.62.0",
"typescript": "^5.0.2", "typescript": "^5.0.2",

View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import CoverSection from './components/CoverSection.vue' import CoverSection from "./components/CoverSection.vue";
</script> </script>
<template> <template>
@ -9,9 +9,7 @@ import CoverSection from './components/CoverSection.vue'
</template> </template>
<style lang="scss"> <style lang="scss">
/******** all sections *********/ /******** all sections *********/
/*@import 'styles/main.scss';*/
/*@import 'styles/main.scss';*/
</style> </style>

View File

@ -1,4 +1,3 @@
main nav { main nav {
color: #fffdfc; color: #fffdfc;
font-size: 24px; font-size: 24px;

View File

@ -11,7 +11,6 @@
} }
#main_title { #main_title {
background: url("/img/sesame.png") no-repeat; background: url("/img/sesame.png") no-repeat;
background-size: contain; background-size: contain;
box-sizing: border-box; box-sizing: border-box;
@ -22,7 +21,6 @@
position: relative; position: relative;
top: 4rem; top: 4rem;
width: 95vw; width: 95vw;
} }
#main_title_container h2 { #main_title_container h2 {

View File

@ -1,4 +1,3 @@
#hand { #hand {
background: url("/img/hand 1.png") center; background: url("/img/hand 1.png") center;
background-size: cover; background-size: cover;
@ -7,7 +6,7 @@
position: relative; position: relative;
top: -2px; top: -2px;
width: 100vw; width: 100vw;
z-index: 0 z-index: 0;
} }
#main_title_container { #main_title_container {
@ -22,13 +21,11 @@
background-size: cover; background-size: cover;
} }
#cover #cover .title-container {
.title-container {
text-align: center; text-align: center;
} }
#cover h2 { #cover h2 {
color: #fffdfc; color: #fffdfc;
font-size: 40px; font-size: 40px;
font-style: normal; font-style: normal;
@ -43,9 +40,11 @@
#cover .button { #cover .button {
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
background: linear-gradient(329.49deg, background: linear-gradient(
329.49deg,
rgba(255, 216, 244, 0) 34.06%, rgba(255, 216, 244, 0) 34.06%,
rgba(255, 207, 242, 0.2) 77.26%); rgba(255, 207, 242, 0.2) 77.26%
);
border-radius: 100%; border-radius: 100%;
bottom: 0; bottom: 0;
box-sizing: border-box; box-sizing: border-box;

View File

@ -0,0 +1,38 @@
#transactionnal_webdesign {
padding-top: 363px;
background: url('');
font-family: "GT Walsheim Pro";
color: #00001f;
.title {
width: 1680px;
height: 109px;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 95%;
text-align: center;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #fffdfc;
backdrop-filter: blur(5px);
flex: none;
order: 0;
flex-grow: 0;
}
.description {
color: rgba(231, 112, 100, 0.8);
font-weight: 600;
font-size: 270px;
line-height: 65%;
backdrop-filter: blur(5px);
}
.color-emphasis {
color: #1e33da;
}
}

View File

@ -1,4 +1,4 @@
#coming_soon{ #coming_soon {
background: #2b74b1; background: #2b74b1;
z-index: 10; z-index: 10;
color: white; color: white;

View File

@ -1,9 +1,7 @@
#welcome { #welcome {
background: #000; background: #000;
position: absolute; position: absolute;
text-shadow: 0 0 1rem #333; text-shadow: 0 0 1rem #333;
} }
#welcome img { #welcome img {
@ -71,4 +69,3 @@
top: 523px; top: 523px;
width: 275px; width: 275px;
} }

View File

@ -1,4 +1,3 @@
#open { #open {
box-sizing: border-box; box-sizing: border-box;
color: rgba(248, 243, 241, 0.1); color: rgba(248, 243, 241, 0.1);

View File

@ -1,4 +1,3 @@
#content { #content {
height: 60vh; height: 60vh;
min-height: 200px; min-height: 200px;
@ -65,7 +64,6 @@
} }
#content_first { #content_first {
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
color: #e77064; color: #e77064;
flex: none; flex: none;

View File

@ -82,9 +82,14 @@
top: 56px; top: 56px;
} }
.arrow-left, .arrow-right { .arrow-left,
.arrow-right {
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
background: linear-gradient(310.41deg, rgba(255, 255, 255, 0.3) 10.9%, rgba(255, 255, 255, 0) 81.35%); background: linear-gradient(
310.41deg,
rgba(255, 255, 255, 0.3) 10.9%,
rgba(255, 255, 255, 0) 81.35%
);
border: solid 2px #1e33da; border: solid 2px #1e33da;
border-radius: 70px; border-radius: 70px;

View File

@ -1,4 +1,3 @@
#portfolio { #portfolio {
background: url("/img/bg_grey.jpg") no-repeat; background: url("/img/bg_grey.jpg") no-repeat;
background-position: center; background-position: center;

View File

@ -7,7 +7,6 @@
top: 15rem; top: 15rem;
} }
#cover .button { #cover .button {
top: 7vh; top: 7vh;
} }
@ -19,12 +18,12 @@
text-align: left; text-align: left;
} }
#content_all .columns{ #content_all .columns {
top: -145vh; top: -145vh;
width: 55vw; width: 55vw;
} }
.columns{ .columns {
display:block !important; display: block !important;
} }
.column { .column {
width: 100% !important; width: 100% !important;
@ -40,52 +39,49 @@
margin-top: -120vh; margin-top: -120vh;
position: static; position: static;
} }
.flip-container{ .flip-container {
position: relative; position: relative;
} }
.flip-container + .flip-container {
.flip-container + .flip-container{
margin-top: -5vh; margin-top: -5vh;
} }
.flip-container .container-text{ .flip-container .container-text {
z-index: 1; z-index: 1;
left:33vw; left: 33vw;
} }
.flip-container .text-title{ .flip-container .text-title {
margin-top:0; margin-top: 0;
} }
.flip-container .phone-container{ .flip-container .phone-container {
left: 42vw; left: 42vw;
top: 5vh; top: 5vh;
} }
.flip-container.flip-from-left .container-text{ .flip-container.flip-from-left .container-text {
left: 33vw; left: 33vw;
top: 5vh; top: 5vh;
} }
.flip-container.flip-from-left .phone-container{ .flip-container.flip-from-left .phone-container {
left: 25vw; left: 25vw;
top: 10vh; top: 10vh;
} }
#content-4{ #content-4 {
margin-top: 25vh; margin-top: 25vh;
} }
#content-5 #content-5 {
{
margin-top: 15vh; margin-top: 15vh;
} }
#popover{ #popover {
margin-top: 100vh; margin-top: 100vh;
} }
/** /**
exemples sliders exemples sliders
*/ */
.slider-screen .text-title{ .slider-screen .text-title {
margin-top:1em; margin-top: 1em;
} }
.slider-screen .text, .slider-screen .text,
.slider-screen .phone-container { .slider-screen .phone-container {
@ -94,57 +90,55 @@
left: 25vw; left: 25vw;
top: 5vh; top: 5vh;
} }
.bullets{ .bullets {
top: 28em; top: 28em;
} }
.arrow-left, .arrow-left,
.arrow-right{ .arrow-right {
top: 60vh; top: 60vh;
} }
.slider-screen{ .slider-screen {
min-height:100vh; min-height: 100vh;
} }
} }
@media screen and (max-width: 35em) { @media screen and (max-width: 35em) {
#main_title{ #main_title {
margin-top: 5vh; margin-top: 5vh;
} }
#main_title_container h2 { #main_title_container h2 {
margin-top: 15vh; margin-top: 15vh;
} }
#content_all h2, #welcome h2 { #content_all h2,
#welcome h2 {
font-size: 4rem !important; font-size: 4rem !important;
} }
#content_all .text{ #content_all .text {
padding-right:0; padding-right: 0;
} }
.container-text-md{ .container-text-md {
width: auto; width: auto;
} }
#content_all .columns{ #content_all .columns {
width:100%; width: 100%;
margin: 1rem; margin: 1rem;
} }
.flip-container .container-text{ .flip-container .container-text {
width:100%; width: 100%;
left:5vw; left: 5vw;
} }
.flip-container .phone-container { .flip-container .phone-container {
position: static;
position: static; margin: 4rem auto;
margin: 4rem auto; }
} .flip-container.flip-from-left .container-text {
.flip-container.flip-from-left .container-text{
left: 5vw; left: 5vw;
} }
.flip-container .phone-container { .flip-container .phone-container {
margin-top: 7rem; margin-top: 7rem;
} }
.flip-container .text-description{ .flip-container .text-description {
max-width: 90vw; max-width: 90vw;
} }
@ -155,9 +149,9 @@
margin-top: 45vh; margin-top: 45vh;
} }
.slider-screen .text, .slider-screen .phone-container{ .slider-screen .text,
.slider-screen .phone-container {
left: 5vw; left: 5vw;
max-width: 90vw; max-width: 90vw;
} }
} }

View File

@ -12,7 +12,6 @@
========================================================================== */ ========================================================================== */
html { html {
background: #020225; background: #020225;
color: #f9f3f1; color: #f9f3f1;
@ -180,9 +179,9 @@ textarea {
} }
@media print, @media print,
(-webkit-min-device-pixel-ratio: 1.25), (-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx), (min-resolution: 1.25dppx),
(min-resolution: 120dpi) { (min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */ /* Style adjustments for high resolution devices */
} }

File diff suppressed because it is too large Load Diff

View File

@ -174,7 +174,8 @@ textarea {
*/ */
button, button,
input { /* 1 */ input {
/* 1 */
overflow: visible; overflow: visible;
} }
@ -184,7 +185,8 @@ input { /* 1 */
*/ */
button, button,
select { /* 1 */ select {
/* 1 */
text-transform: none; text-transform: none;
} }

View File

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

View File

@ -1,101 +1,128 @@
<script setup lang="ts"> <script setup lang="ts"></script>
import {ref} from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<template> <template>
<main class="has-text-centered"> <main class="has-text-centered">
<!-- sprint 4 content--> <!-- sprint 4 content-->
<section id="transactionnal_webdesign" class="has-text-centerd"> <section
id="transactionnal_webdesign"
<h2>Transactional</h2> class="has-text-centerd"
<p> >
Webcontent <h2 class="title">
Transactional
</h2>
<p class="description">
Webdesign
</p> </p>
<div class="aside"> <div class="columns">
Our creative competitive edge <div class="column first">
<h3 class="sub-title">
We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our For all your
technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale <br>
for all touchpoints to reduce costs. <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> </div>
</section> </section>
<section id="carry"> <section id="carry">
<p>We carry out web design and development</p> <h2 class="color-emphasis">
<p>in headless</p> We carry out web design and development
<p>commerce.</p> </h2>
<p class="description">
in headless commerce.
</p>
<div class="bubbles"> <div class="bubbles">
<p>Evolutive maintenance</p> <p>Evolutive maintenance</p>
<p>Front end (ux/ui) development</p> <p>Front end (ux/ui) development</p>
<p>Web App (pwa) <p>Web App (pwa) development</p>
development</p>
<p>Consulting</p> <p>Consulting</p>
</div> </div>
<p>We craft e-commerce Ux template based on qualitative and quantitative studies</p> <p>
We craft e-commerce Ux template based on qualitative and quantitative
studies
</p>
</section> </section>
<section id="kyc"> <section id="kyc">
<h2>We help you to know your customer needs</h2> <h2>We help you to know your customer needs</h2>
<p>With our method</p> <p>With our method</p>
<a href="#kyc" class="button"> <a
Show Sesame method href="#kyc"
</a> class="button"
> Show Sesame method </a>
<div class="bubbles"> <div class="bubbles">
<p>to Prioritize <p>to Prioritize development effort</p>
development <p>to improve customer satisfaction</p>
effort</p>
<p>
to improve customer satisfaction
</p>
<p>to increase conversion rate</p> <p>to increase conversion rate</p>
</div> </div>
</section> </section>
<section id="china"> <section id="china">
<h2>Our China-inspired ui in 4 pillars</h2> <h2>Our China-inspired ui in 4 pillars</h2>
<p> <p>
a quick and smoth consumer journey and never ending shopping experience at the same time a quick and smoth consumer journey and never ending shopping experience
at the same time
</p> </p>
<div class="blocks"> <div class="blocks">
<div class="block"> <div class="block">
<div class="top">Content driven</div> <div class="top">
<div class="bottom">-Rebound rate</div> Content driven
</div>
<div class="bottom">
-Rebound rate
</div>
</div> </div>
<div class="block"> <div class="block">
<div class="top">Experimental</div> <div class="top">
<div class="bottom">-Return rate</div> Experimental
</div>
<div class="bottom">
-Return rate
</div>
</div> </div>
<div class="block"> <div class="block">
<div class="top">Interactive</div> <div class="top">
<div class="bottom">+Conversion rate</div> Interactive
</div>
<div class="bottom">
+Conversion rate
</div>
</div> </div>
<div class="block"> <div class="block">
<div class="top">Agile</div> <div class="top">
<div class="bottom">+Retention rate</div> Agile
</div>
<div class="bottom">
+Retention rate
</div>
</div> </div>
</div> </div>
</section> </section>
<section id="we_develop"> <section id="we_develop">
<h2> <h2>
We develop custom-made innovative e-commerce features based on your brand stakes. We develop custom-made innovative e-commerce features based on your
brand stakes.
</h2> </h2>
<div class="phone-container"> <div class="phone-container">
<div class="top"> <div class="top" />
<div class="picture" />
<div class="bottom" />
</div> </div>
<div class="picture"></div> <div class="arrow-left" />
<div class="bottom"></div> <div class="arrow-right" />
<div class="data">
Data
</div>
<div class="data">
AR
</div> </div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="data">Data</div>
<div class="data">AR</div>
<div class="quick"> <div class="quick">
Quick wins Quick wins
</div> </div>
@ -106,74 +133,83 @@
<section id="full_creative"> <section id="full_creative">
<h2>A full creative & production Studio in Paris</h2> <h2>A full creative & production Studio in Paris</h2>
<div class="tiles columns"> <div class="tiles columns">
<div class="aside column"></div> <div class="aside column" />
<div class="picture column"></div> <div class="picture column" />
<div class="picture column"></div> <div class="picture column" />
</div> </div>
</section> </section>
<section id="our_team"> <section id="our_team">
<h2>Our team.</h2> <h2>Our team.</h2>
<div class="sub-category"> <div class="sub-category">
<p>of experts and directors.</p>
<p>
of experts and directors.
</p>
<div class="columns"> <div class="columns">
<div class="person column"> <div class="person column">
<div class="picture"></div> <div class="picture" />
<p class="name">Name Surname</p> <p class="name">
Name Surname
</p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture"></div> <div class="picture" />
<p class="name">Name Surname</p> <p class="name">
Name Surname
</p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture"></div> <div class="picture" />
<p class="name">Name Surname</p> <p class="name">
Name Surname
</p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture"></div> <div class="picture" />
<p class="name">Name Surname</p> <p class="name">
Name Surname
</p>
</div> </div>
</div> </div>
</div> </div>
<div class="sub-category"> <div class="sub-category">
<p>and our senior team</p>
<p>
and our senior team
</p>
<div class="columns"> <div class="columns">
<div class="person column"> <div class="person column">
<div class="picture"></div> <div class="picture" />
<p class="name">Name Surname</p> <p class="name">
Name Surname
</p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture"></div> <div class="picture" />
<p class="name">Name Surname</p> <p class="name">
Name Surname
</p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture"></div> <div class="picture" />
<p class="name">Name Surname</p> <p class="name">
Name Surname
</p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture"></div> <div class="picture" />
<p class="name">Name Surname</p> <p class="name">
Name Surname
</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section id="china_achievements"> <section id="china_achievements">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<h2>Our China achievements</h2> <h2>Our China achievements</h2>
</div> </div>
<div class="column"> <div class="column">
<p> <p>
Backed by the Baozun Group (the leading e-commerce technology Group in China listed in NASDAQ and Hong Kong, Backed by the Baozun Group (the leading e-commerce technology Group
reaching $10Mn GMV in 2021), we embrace Chinas e-commerce, capitalizing on the markets unique technology in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in
and digital sales mechanisms. 2021), we embrace Chinas e-commerce, capitalizing on the markets
unique technology and digital sales mechanisms.
</p> </p>
</div> </div>
</div> </div>
@ -187,41 +223,30 @@
</h3> </h3>
</div> </div>
<div class="column"> <div class="column">
<div class="picture has-rounded-corners"></div> <div class="picture has-rounded-corners" />
</div> </div>
</div> </div>
<p> <p>
100+ Luxury Store launches on incl. Christofle, De Beers etc. 40+
100+ Luxury Brands supported with E2E services 50+ Brands assisted in
Luxury Store launches on incl. Christofle, De Beers etc. social project commerces. 30+ PROJECTS converted into Ecom Ops
management. 30-60% Of our brands partner China GMV done online.
40+
Luxury Brands supported with E2E services
50+
Brands assisted in social project commerces.
30+
PROJECTS converted into Ecom Ops management.
30-60%
Of our brands partner China GMV done online.
</p> </p>
</div> </div>
</section> </section>
<section id="baozun_group" class="has-rounded-corners"> <section
id="baozun_group"
class="has-rounded-corners"
>
<h2>Baozun Group and Company.</h2> <h2>Baozun Group and Company.</h2>
</section> </section>
</main> </main>
</template> </template>
<style lang="scss"> <style lang="scss">
#hand {
background: url("/img/hand 1.png");
#hand {
background: url('/img/hand 1.png');
background-size: cover; background-size: cover;
position: absolute; position: absolute;
@ -229,11 +254,10 @@
height: 1300px; height: 1300px;
left: 1px; left: 1px;
top: -2px; top: -2px;
}
} #cover {
background: url("/img/BG 1.png") no-repeat;
#cover {
background: url('/img/BG 1.png') no-repeat;
background-size: cover; background-size: cover;
h2 { h2 {
@ -242,7 +266,7 @@
left: 42vw; left: 42vw;
/* Subtitle/desktop_1 */ /* Subtitle/desktop_1 */
font-family: 'GT Walsheim Pro', Arial; font-family: "GT Walsheim Pro", Arial;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 40px; font-size: 40px;
@ -267,18 +291,20 @@
height: 150px; height: 150px;
padding: 1rem; padding: 1rem;
color: white; color: white;
font-family: 'GT Walsheim Pro', Arial; font-family: "GT Walsheim Pro", Arial;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 26px; line-height: 26px;
background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%); background: linear-gradient(
329.49deg,
rgba(255, 216, 244, 0) 34.06%,
rgba(255, 207, 242, 0.2) 77.26%
);
backdrop-filter: blur(2.96px); backdrop-filter: blur(2.96px);
border-radius: 100%; border-radius: 100%;
left: 3rem; left: 3rem;
} }
} }
</style> </style>

View File

@ -1,5 +1,5 @@
import { createApp } from 'vue' import { createApp } from "vue";
import './assets/styles/main.scss' import "./assets/styles/main.scss";
import App from './App.vue' import App from "./App.vue";
createApp(App).mount('#app') createApp(App).mount("#app");

View File

@ -1,19 +1,26 @@
import {defineConfig} from 'vite' import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue' import vue from "@vitejs/plugin-vue";
import scss from 'rollup-plugin-scss' import scss from "rollup-plugin-scss";
import eslint from "vite-plugin-eslint";
import eslint from 'vite-plugin-eslint' import stylelint from "vite-plugin-stylelint";
import { ViteAliases } from "vite-aliases";
import stylelint from 'vite-plugin-stylelint';
import {ViteAliases} from 'vite-aliases'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
/** @type {import('vite').UserConfig} */ /** @type {import('vite').UserConfig} */
export default defineConfig({ export default defineConfig({
plugins: [vue(), scss(), ViteAliases(),stylelint({ plugins: [
fix:true, vue(),
}),eslint()], scss(),
ViteAliases(),
}) // stylelint({
// fix: true,
// configBasedir: '.',
// parserOptions: {
// extraFileExtensions: true
// }
// }),
eslint({
fix: true,
}),
],
});