-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFeature.vue
107 lines (106 loc) · 4.66 KB
/
Feature.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
<section class="bg-cPrimary">
<div
class="flex flex-col-reverse items-center justify-center px-4 py-16 mx-auto sm:px-16 lg:flex-row"
>
<div class="w-full lg:w-1/2">
<div class="flex items-center justify-center p-4 md:p-8 lg:p-12">
<NuxtImg
class="object-cover object-center w-full transition duration-300 ease-in-out rounded hover:scale-95"
alt="hero"
title="hero"
src="/img/bijikopi.jpg"
format="webp"
height="450"
width="450"
/>
</div>
</div>
<div
class="flex flex-col w-full mb-4 space-y-6 rounded-sm sm:w-1/2 text-cWhite"
>
<!-- 1 -->
<div class="flex space-x-2 sm:space-x-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
class="flex-shrink-0 w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
></path>
</svg>
<div class="space-y-2">
<p class="text-xl font-bold tracking-wide text-cTerang">
Indonesian coffee has a unique variety of flavors
</p>
<p class="text-base leading-snug">
For example, Aceh coffee that appears with a deep chocolate flavor
and there is also coffee that tastes like salak fruit to a spicy
taste.
</p>
</div>
</div>
<!-- 2 -->
<div class="flex space-x-2 sm:space-x-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
class="flex-shrink-0 w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
></path>
</svg>
<div class="space-y-2">
<p class="text-xl font-bold tracking-wide text-cTerang">
The best type of coffee in the world is in Indonesia, namely Kopi
Luwak or civet coffee
</p>
<p class="text-base leading-snug">
Kopi luwak is the coffee with the best quality, making it a
typical Indonesian coffee
</p>
</div>
</div>
<!-- 3 -->
<div class="flex space-x-2 sm:space-x-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
class="flex-shrink-0 w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
></path>
</svg>
<div class="space-y-2">
<p class="text-xl font-bold tracking-wide text-cTerang">
Many flavor options because it has a variety of types of coffee in
each region
</p>
<p class="text-base leading-snug">
Coffee lovers will feel happy to come to Indonesia, because every
region in Indonesia has its own specialty coffee
</p>
</div>
</div>
</div>
</div>
</section>
</template>