Skip to content

Commit

Permalink
feat: subscribe section (#38)
Browse files Browse the repository at this point in the history 
* feat: subscribe section wip

* feat: all placements with cards & mobile responsive

* refactor: quick style fixes
  • Loading branch information
@TavaresDylan
TavaresDylan committed May 10, 2023
1 parent c8d9a0f commit 1ca4a3c
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 68 deletions.
177 changes: 118 additions & 59 deletions app/src/components/SubscriptionPricing.vue
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,135 @@
<template>
<v-container>
<h2>Abonnements</h2>
<v-card variant="outlined" border="2">
<v-row class="ma-0 pa-0">
<v-col class="pa-0 ma-0">
<v-expansion-panels
tile
v-model="expansionPanelState"
variant="accordion"
>
<v-expansion-panel
rounded="0"
value="little-kick"
class="bg-secondary"
<!-- TODO: Enchor to function to scroll on this section -->
<v-container fluid class="sub-container mt-8 mb-16 rounded-t-xl">
<v-container>
<h2 class="text-sm-h4 text-md-h3 font-weight-bold text-uppercase mb-4">
Abonnements
</h2>
<v-card variant="outlined" class="rounded-lg card mt-8">
<v-row class="ma-0 pa-0">
<v-col class="pa-0 ma-0">
<v-expansion-panels
tile
v-model="expansionPanelState"
variant="accordion"
class="exp-panels"
>
<v-expansion-panel-title> Little Kick </v-expansion-panel-title>
<v-expansion-panel-text>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Accusantium fuga voluptatibus, mollitia autem laudantium
odio nihil odit consectetur nobis earum architecto commodi
voluptatem libero necessitatibus vel dicta dolorum maxime
quae.
</p>
<v-btn>Les abonnements</v-btn>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel
rounded="0"
value="little-kick"
class="bg-primary"
>
<v-expansion-panel-title> Little Kick </v-expansion-panel-title>
<v-expansion-panel-text class="mt-2">
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Accusantium fuga voluptatibus, mollitia autem laudantium
odio nihil odit consectetur nobis earum architecto commodi
voluptatem libero necessitatibus vel dicta dolorum maxime
quae.
</p>
<v-btn
color="darkBtn"
class="rounded-xl mt-4 font-weight-bold"
>Découvrir</v-btn
>
</div>
</v-expansion-panel-text>
</v-expansion-panel>

<v-expansion-panel
rounded="0"
value="high-kick"
class="bg-primary"
<v-expansion-panel
rounded="0"
value="high-kick"
class="bg-secondary"
>
<v-expansion-panel-title> High Kick </v-expansion-panel-title>
<v-expansion-panel-text class="mt-2">
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Accusantium fuga voluptatibus, mollitia autem laudantium
odio nihil odit consectetur nobis earum architecto commodi
voluptatem libero necessitatibus vel dicta dolorum maxime
quae.
</p>
<v-btn
color="darkBtn"
class="rounded-xl mt-4 font-weight-bold"
>Découvrir</v-btn
>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
<v-col id="right-container" class="pa-0 ma-0 d-none d-sm-flex">
<v-sheet
class="w-100 d-flex align-center justify-center"
color="secondary"
>
<v-expansion-panel-title> High Kick </v-expansion-panel-title>
<v-expansion-panel-text>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Accusantium fuga voluptatibus, mollitia autem laudantium
odio nihil odit consectetur nobis earum architecto commodi
voluptatem libero necessitatibus vel dicta dolorum maxime
quae.
</p>
<v-btn>Les abonnements</v-btn>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
<TermCard class="w-75 my-4">
<v-img cover src="https://picsum.photos/1920/1080"></v-img>
</TermCard>
</v-sheet>
</v-col>
</v-row>
</v-card>
</v-container>

<v-container class="mt-16">
<v-row>
<v-col cols="12" sm="4">
<TermCard>
<v-img cover src="https://picsum.photos/1920/1080"></v-img>
</TermCard>
</v-col>
<v-col id="right-container" class="pa-0 ma-0 d-flex justify-center align-center">
<v-card height="300" width="300" class="ma-6">
<v-card-title> coucou ma couille </v-card-title>
<v-img
cover
src="https://picsum.photos/seed/picsum/200/300"
></v-img>
</v-card>
<v-spacer></v-spacer>
<v-col cols="12" sm="6" class="d-flex flex-column">
<h2 class="text-h3 text-uppercase font-weight-thin">
<span class="font-weight-bold mr-2">Relax</span>Box
</h2>
<p class="my-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Exercitationem animi debitis, libero corporis labore nisi excepturi
officiis reprehenderit laudantium ipsa quas delectus porro neque
aspernatur eius eligendi et amet vitae.
</p>
<v-btn
color="primary"
class="rounded-xl font-weight-bold mt-4 justify-self-center"
variant="outlined"
>Je découvre <v-icon class="ml-2" icon="mdi-arrow-right"
/></v-btn>
</v-col>
</v-row>
</v-card>
</v-container>
</v-container>
</template>

<script setup>
<script lang="ts" setup>
import { ref } from "vue";
const expansionPanelState = ref("little-kick");
import TermCard from "../components/TermCard.vue";
const expansionPanelState = ref<string>("little-kick");
const littleKickExpPanelState = ref<boolean>(true);
const highKickExpPanelState = ref<boolean>(false);
// TODO: Add a function to change the expansion panel state and to avoid both panel being closed at the same time
</script>

<style scoped>
<style lang="css" scoped>
#right-container {
border-left: 1px solid black;
}
.sub-container {
min-height: 100vh;
background-color: white;
border: 2px solid black;
}
.exp-panels {
min-height: 100% !important;
}
.card {
border: 2px solid black;
}
</style>
3 changes: 3 additions & 0 deletions app/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,12 @@ const myCustomLightTheme = {
info: "#2196F3",
success: "#4CAF50",
warning: "#FB8C00",
darkBtn: "#000000",
},
};

// TODO: Add the dark theme

const vuetify = createVuetify({
components,
directives,
Expand Down
6 changes: 2 additions & 4 deletions app/src/shared/layout/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
prepend-icon="mdi-currency-eur"
title="Abonnements"
value="abonnements"
to="/abonnements"
to="#abonnements"
></v-list-item>
<v-list-item
prepend-icon="mdi-wallet-giftcard"
Expand Down Expand Up @@ -55,9 +55,7 @@
<div
class="nav-links-container hidden-sm-and-down align-center mx-8 pa-2 rounded rounded-xl justify-space-around"
>
<router-link class="router-links mx-4" to="/abonnements"
>Abonnements</router-link
>
<a class="router-links mx-4" href="/#abonnements">Abonnements</a>
<router-link class="router-links mx-4" to="/cartes-cadeaux"
>Cartes cadeaux</router-link
>
Expand Down
7 changes: 2 additions & 5 deletions app/src/views/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,9 @@
/>
<div class="banner-container"></div>
</v-container>

<hr class="my-4" />
<SubscriptionPricing></SubscriptionPricing>
<hr class="my-4" />
<Introducing reversed="false"> </Introducing>
</v-container>
<SubscriptionPricing id="abonnements"></SubscriptionPricing>
<Introducing reversed="false"> </Introducing>
<Faq></Faq>
</template>

Expand Down

0 comments on commit 1ca4a3c

Please sign in to comment.