Skip to content

Commit c5e23ee

Browse files
Seluj78Seluj78
authored
Merge pull request #461 from Seluj78/288-landing-page
2 parents ed63fbc + 111dc75 commit c5e23ee

File tree

6 files changed

+120
-49
lines changed

6 files changed

+120
-49
lines changed

‎frontend/src/assets/home/chat.png‎

84.3 KB
Loading

‎frontend/src/assets/home/likeSomeone.png‎

1.18 MB
Loading

‎frontend/src/assets/home/match.png‎

1.2 MB
Loading

‎frontend/src/components/home/cardImg.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<section class="md:flex md:items-center">
4+
<div id="card" class="md:w-1/2 md:order-1 my-10 md:my-0 text-center md:text-left">
5+
<div class="mx-auto md:mx-0 md:ml-auto w-10/12 md:w-8/12">
6+
<h1 class="text-4xl md:text-6xl font-bold pb-2 leading-none howItWorksHeader">{{cardSrc.cardTitle}}</h1>
7+
<h2 v-for="description in cardSrc.cardDescription"
8+
v-bind:key="description" class="text-2xl text-gray-matcha">{{description}}</h2>
9+
</div>
10+
</div>
11+
<div id="img" class="md:w-1/2 md:order-2">
12+
<img v-bind:src="cardSrc.imgSrc" class="w-8/12 mx-auto">
13+
</div>
14+
</section>
15+
</template>
16+
17+
<script>
18+
/* eslint-disable indent */
19+
/* eslint-disable quotes */
20+
21+
export default {
22+
name: 'cardImg',
23+
props: ['cardSrc'],
24+
};
25+
</script>
26+
27+
<style scoped>
28+
.howItWorksHeader {
29+
background: linear-gradient(315deg, #6e72fc 30%, #ad1deb 74%);
30+
-webkit-background-clip: text;
31+
-webkit-text-fill-color: transparent;
32+
}
33+
</style>

‎frontend/src/components/home/imgCard.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<section class="md:flex md:items-center">
4+
<div id="card" class="md:w-1/2 md:order-2 my-10 md:my-0 text-center md:text-left">
5+
<div class="w-10/12 md:w-8/12 mx-auto">
6+
<h1 class="text-4xl md:text-6xl font-bold pb-2 leading-none howItWorksHeader">{{cardSrc.cardTitle}}</h1>
7+
<h2 v-for="description in cardSrc.cardDescription"
8+
v-bind:key="description" class="text-2xl text-gray-matcha">{{description}}</h2>
9+
</div>
10+
</div>
11+
<div id="img" class="md:w-1/2 md:order-1">
12+
<img v-bind:src="cardSrc.imgSrc" class="w-8/12 mx-auto">
13+
</div>
14+
</section>
15+
</template>
16+
17+
<script>
18+
/* eslint-disable indent */
19+
/* eslint-disable quotes */
20+
21+
export default {
22+
name: 'imgCard',
23+
props: ['cardSrc'],
24+
};
25+
</script>
26+
27+
<style scoped>
28+
.howItWorksHeader {
29+
background: linear-gradient(315deg, #6e72fc 30%, #ad1deb 74%);
30+
-webkit-background-clip: text;
31+
-webkit-text-fill-color: transparent;
32+
}
33+
</style>

‎frontend/src/views/Home.vue‎

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,91 @@
11
<template>
22
<!-- eslint-disable max-len -->
3-
<!-- eslint-disable no-trailing-spaces -->
43
<div class="home mx-4">
5-
6-
<section class="shadow-lg mb-8 h-full flex rounded-lg">
7-
<div class="intro bg-white-matcha rounded-lg w-full md:w-2/3
8-
flex flex-col justify-center md:rounded-tr-none md:rounded-br-none">
9-
<div class="mx-auto text-center md:text-left">
10-
<h1 class="text-5xl sm:text-6xl font-bold text-gray-matcha">Someone<br>
11-
is waiting<br>
12-
for you</h1>
13-
<h1 class="text-2xl text-gray-matcha pb-10 pt-6">Matcha is a free dating<br>
14-
app to find you a lover</h1>
15-
<router-link class="button-purple z-10" to="/accounts/signup">Get started</router-link>
4+
<section class="shadow-lg mb-8 h-full flex rounded-lg">
5+
<div class="intro bg-white-matcha rounded-lg w-full md:w-2/3
6+
flex flex-col justify-center md:rounded-tr-none md:rounded-br-none">
7+
<div class="mx-auto text-center md:text-left">
8+
<h1 class="text-5xl sm:text-6xl font-bold text-gray-matcha">Someone<br>
9+
is waiting<br>
10+
for you</h1>
11+
<h1 class="text-2xl text-gray-matcha pb-10 pt-6">Matcha is a free dating<br>
12+
app to find you a lover</h1>
13+
<router-link class="button-purple z-10" to="/accounts/signup">Get started</router-link>
14+
</div>
1615
</div>
17-
</div>
18-
19-
<div class="image hidden md:inline-block overflow-hidden md:w-1/3">
20-
<img src="../assets/home/couple.jpeg" class="w-full h-full object-cover rounded-tr-lg rounded-br-lg">
21-
</div>
22-
</section>
23-
16+
<div class="image hidden md:inline-block overflow-hidden md:w-1/3">
17+
<img src="../assets/home/couple.jpeg" class="w-full h-full object-cover rounded-tr-lg rounded-br-lg">
18+
</div>
19+
</section>
2420
<div class="pitch shadow-lg rounded-lg py-16 px-8 mb-8 w-full flex flex-col justify-center lg:px-16">
2521
<h1 class="text-4xl md:text-6xl text-white-matcha text-center font-bold leading-none">Set up dates effortlessly</h1>
2622
<h1 class="text-2xl pt-8 text-white-matcha text-center">No more awkward approaches</h1>
2723
<h1 class="text-2xl pt-4 text-white-matcha text-center">No more lonely Friday nights</h1>
2824
</div>
29-
25+
<div class="bg-white-matcha py-16 mb-8">
26+
<h1 class="text-4xl md:text-6xl text-center font-bold leading-none text-gray-matcha mb-16">How it works</h1>
27+
<cardImg v-bind:cardSrc="likeSomeoneCard"></cardImg>
28+
<imgCard class="mt-24" v-bind:cardSrc="getMatchedCard"></imgCard>
29+
<cardImg class="mt-24" v-bind:cardSrc="chatCard"></cardImg>
30+
</div>
3031
<div class="w-full mb-8 rounded-lg shadow-lg">
3132
<div class="relative rounded-lg" style="padding-bottom: 70%">
3233
<img src="../assets/home/couple2.jpg" class="absolute object-cover h-full w-full rounded-lg">
3334
<h1 class="text-gray-matcha text-center text-2xl sm:text-5xl lg:text-6xl font-bold absolute bottom-0 w-full p-8"><span class="bg-white-matcha">"I met Travis via Matcha, and he
3435
is the coolest dude fo sure" - Kylie</span></h1>
3536
</div>
3637
</div>
37-
38-
<div class="guide shadow-lg rounded-lg py-16 px-8 mb-8 w-full flex flex-col justify-center lg:px-16">
39-
<h1 class="text-4xl md:text-6xl text-white-matcha text-center font-bold leading-none">How it works</h1>
40-
<div class="tex-left mx-auto">
41-
<h1 class="text-2xl pt-8 text-white-matcha"><span class="font-bold">1.</span> Like people</h1>
42-
<h1 class="text-2xl pt-4 text-white-matcha"><span class="font-bold">2.</span> Be matched with people who like you too</h1>
43-
<h1 class="text-2xl pt-4 text-white-matcha"><span class="font-bold">3.</span> Chat with your matches and set up dates</h1>
44-
</div>
45-
</div>
46-
4738
<div class="bg-white-matcha overflow-hidden relative shadow-lg rounded-lg py-32 px-8 w-full flex flex-col justify-center lg:px-16">
4839
<h1 class="text-4xl md:text-6xl text-gray-matcha text-center font-bold leading-none z-10">It is your turn</h1>
4940
<h1 class="text-2xl text-gray-matcha text-center my-8 z-10">More than 4 million people matched</h1>
5041
<router-link class="button-purple z-10" to="/accounts/signup">Get started</router-link>
5142
</div>
52-
5343
<Footer></Footer>
5444
</div>
5545
</template>
5646

5747
<script>
5848
5949
import Footer from '@/components/shared/Footer.vue';
50+
import imgCard from '@/components/home/imgCard.vue';
51+
import cardImg from '@/components/home/cardImg.vue';
52+
import likeSomeone from '@/assets/home/likeSomeone.png';
53+
import match from '@/assets/home/match.png';
54+
import chat from '@/assets/home/chat.png';
6055
6156
export default {
6257
name: 'Home',
6358
components: {
6459
Footer,
60+
imgCard,
61+
cardImg,
6562
},
63+
data: () => ({
64+
likeSomeoneCard: {
65+
imgSrc: likeSomeone,
66+
cardTitle: 'Like',
67+
cardDescription: [
68+
'Based on age, location,',
69+
'popularity and interests.',
70+
],
71+
},
72+
getMatchedCard: {
73+
imgSrc: match,
74+
cardTitle: 'Match',
75+
cardDescription: [
76+
'If person you liked likes you,',
77+
'you have a match.',
78+
],
79+
},
80+
chatCard: {
81+
imgSrc: chat,
82+
cardTitle: 'Meet',
83+
cardDescription: [
84+
'Chat with matches',
85+
'and set up dates.',
86+
],
87+
},
88+
}),
6689
};
6790
</script>
6891

@@ -75,22 +98,4 @@ export default {
7598
background-color: #ad1deb;
7699
background-image: linear-gradient(315deg, #ad1deb 0%, #6e72fc 74%);
77100
}
78-
79-
.guide {
80-
background-color: #6e72fc;
81-
background-image: linear-gradient(315deg, #6e72fc 0%, #ad1deb 74%);
82-
}
83-
84-
@responsive {
85-
@screen md {
86-
.home {
87-
/*background-image: url('../assets/home/couple.jpeg');*/
88-
/*background-repeat: no-repeat;*/
89-
/*background-attachment: fixed;*/
90-
/*background-position: center;*/
91-
/*background-position-x: 200px;*/
92-
/*@apply rounded-lg;*/
93-
}
94-
}
95-
}
96101
</style>

0 commit comments

Comments
 (0)