├── .gitignore
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   ├── banner.png
    │   ├── mount.jpeg
    │   ├── banner-test.jpg
    │   ├── mount-square.jpg
    │   └── icons
    │   │   ├── icon-72x72.png
    │   │   ├── icon-96x96.png
    │   │   ├── icon-128x128.png
    │   │   ├── icon-144x144.png
    │   │   ├── icon-152x152.png
    │   │   ├── icon-192x192.png
    │   │   ├── icon-384x384.png
    │   │   └── icon-512x512.png
    ├── main.js
    ├── index.css
    ├── router
    │   └── index.js
    ├── components
    │   ├── List.vue
    │   ├── Card.vue
    │   └── Navbar.vue
    └── views
    │   ├── Home.vue
    │   └── View.vue
├── .vscode
    └── extensions.json
├── public
    └── favicon.ico
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── package.json
├── README.md
├── index.html
└── manifest.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<router-view></router-view>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/banner.png


--------------------------------------------------------------------------------
/src/assets/mount.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/mount.jpeg


--------------------------------------------------------------------------------
/src/assets/banner-test.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/banner-test.jpg


--------------------------------------------------------------------------------
/src/assets/mount-square.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/mount-square.jpg


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/assets/icons/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/icons/icon-72x72.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/icons/icon-96x96.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/icons/icon-128x128.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/icons/icon-144x144.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/icons/icon-152x152.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/icons/icon-192x192.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/icons/icon-384x384.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/or-abdillh/travel-app-3/HEAD/src/assets/icons/icon-512x512.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import './index.css'
5 | 
6 | createApp(App)
7 | .use(router)
8 | .mount('#app')
9 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   define: {
 8 |   	'process.env': {}
 9 |   }
10 | })
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: [
 3 | 	'./src/**/*.html',
 4 | 	'./src/**/*.vue',
 5 | 	'./src/**/*.jsx'
 6 |   ],
 7 |   darkMode: false, // or 'media' or 'class'
 8 |   theme: {
 9 |     extend: {
10 |        fontSize: {
11 |           'xxs': '.75rem',
12 |           'xxxs': '.65rem',
13 |           'xxxxs': '.55rem',
14 |           'xxxxxs': '.35rem'
15 |         }
16 |     }
17 |   },
18 |   variants: {
19 |     extend: {},
20 |   },
21 |   plugins: [],
22 | }
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "travel-app-3",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "serve": "vite preview"
 8 |   },
 9 |   "dependencies": {
10 |     "autoprefixer": "^10.4.0",
11 |     "postcss": "^8.4.4",
12 |     "tailwindcss": "^2.2.19",
13 |     "vue": "^3.2.16",
14 |     "vue-router": "^4.0.12"
15 |   },
16 |   "devDependencies": {
17 |     "@vitejs/plugin-vue": "^1.9.3",
18 |     "vite": "^2.6.4"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | /* Reset CSS */
 6 | * {
 7 |    margin: 0;
 8 |    padding: 0;
 9 |    font-family: 'Montserrat', Sans-Serif;
10 |    font-size: 24px;
11 |    -ms-overflow-style: none;
12 |    scrollbar-width: none;
13 | }
14 | 
15 | *::-webkit-scrollbar {
16 |    display: none;
17 | }
18 | 
19 | body {
20 | 	background: #EEEEEE;
21 | }
22 | 
23 | .app {
24 |    @apply bg-white md:w-8/12 mx-auto lg:w-5/12 xl:w-4/12;
25 | }


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | 
 3 | //import views component
 4 | import Home from '../views/Home.vue'
 5 | import View from '../views/View.vue'
 6 | 
 7 | //Routes
 8 | const routes = [
 9 | 	{
10 | 		name: 'home',
11 | 		path: '/',
12 | 		component: Home
13 | 	},
14 | 	{
15 | 		name: 'view',
16 | 		path: '/view',
17 | 		component: View
18 | 	}
19 | ]
20 | 
21 | //Init router
22 | const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes })
23 | 
24 | export default router
25 | 


--------------------------------------------------------------------------------
/src/components/List.vue:
--------------------------------------------------------------------------------
 1 | <style scoped>
 2 |    .list {
 3 |       @apply mt-3 flex gap-4 md:justify-between;
 4 |       animation: list .3s ease-in-out forwards;
 5 |    }
 6 |    
 7 |    @keyframes list {
 8 |       from {
 9 |          transform: translateY(-50%) scale(.75);
10 |       } to {
11 |          transform: translateY(0) scale(1);
12 |       }
13 |    }
14 | </style>
15 | <template>
16 |    <!-- List card -->
17 |    <div
18 |    @click="router.push({ name: 'view' })"
19 |    class="list">
20 | 	   <div class="flex gap-3">
21 | 	      <span>
22 | 	         <img class="rounded-xl" src="../assets/mount-square.jpg" width="60" />
23 | 	      </span>
24 | 	      <div>
25 | 	         <strong class="text-xs mb-0 w-full">Mt. Rinjani</strong>
26 | 	         <p class="text-xxxxs text-gray-400">Lombok, Indonesia</p>
27 | 	      </div>
28 |       </div>
29 |       <span class="text-xxxxs gap-1 flex items-center">
30 |          <i class="fa fa-star text-xxxxs text-yellow-400"></i>
31 |          4.6
32 |       </span>
33 |    </div>
34 | </template>
35 | 
36 | <script setup>
37 |    import { useRouter } from 'vue-router'
38 |    
39 |    const router = useRouter()
40 | </script>
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h3 align="center">Travel App</h3>
 2 | <p align="center">Slicing project #05</p>
 3 | 
 4 | <img src="./src/assets/banner.png" width="100%" alt="">
 5 | 
 6 | ### About
 7 | This is my projects to make UI using front end tech 
 8 | 
 9 | Where the ideas and the concept i use from any other designer UI/UX from Instagram or Dribbble
10 | 
11 | ### Original design
12 | by [@cirrustudio](https://instagram.com/cirrustudio?utm_medium=copy_link)
13 | 
14 | ### Languages and Tools
15 | - Vue Js 3
16 | - Tailwindcss
17 | - Google Font Montserrat
18 | - FontAwesome
19 | - Termux
20 | - Vite Js
21 | - Acode code editor
22 | 
23 | ### Responsive Test
24 | Test via [Am I Responsive](http://ami.responsivedesign.is/)
25 | <img src="src/assets/banner-test.jpg" width="100%" alt="">
26 | 
27 | ### Clone This Repo
28 | - <code>git clone https://github.com/or-abdillh/travel-app-3.git </code>
29 | - <code>cd travel-app-3</code>
30 | - <code>npm install</code>
31 | - <code>npm run dev</code>
32 | 
33 | ### Demo 
34 | - [Travel App](https://travel-app-3.vercel.app/)
35 | - [Reels Instagram](https://www.instagram.com/reel/CXFyzdwlr0T/?utm_medium=copy_link)
36 | 
37 | [Oka R Abdillah ](http://github.com/or-abdillh)
38 | <br>
39 | Last edited on : 5/12/2021


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |    <head>
 4 |       <meta charset="UTF-8" />
 5 |       <link rel="icon" href="src/assets/icons/icon-72x72.png" />
 6 |       <!-- SEO -->
 7 |       <link rel="manifest" href="./manifest.json" type="application/json" />
 8 |       <meta name="theme-color" content="#FFFFFF" />
 9 |       <meta name="description" content="Project slicing UI from any source into real interface using frontend tech stack" />
10 |       <!-- Google font Montserrat -->
11 |       <link rel="preconnect" href="https://fonts.googleapis.com">
12 |       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13 |       <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500&display=swap" rel="stylesheet">
14 |       <!-- Font Awesome 5 CDN -->
15 |       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
16 |       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17 |       <title>Project Slicing UI - Travel App 3</title>
18 |    </head>
19 |    <body>
20 |       <div class="app" id="app"></div>
21 |       <script type="module" src="/src/main.js"></script>
22 |    </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/src/components/Card.vue:
--------------------------------------------------------------------------------
 1 | <style scoped>
 2 |    .card {
 3 |       min-width: 70%;
 4 |       animation: card .3s ease-in-out forwards;
 5 |       @apply rounded-xl relative overflow-hidden;
 6 |    }
 7 |    .card-footer {
 8 |       @apply absolute bottom-2 left-2 right-2 rounded-xl px-3 py-2 bg-gray-50 flex items-start gap-1;
 9 |    }
10 |    
11 |    @keyframes card {
12 |       from {
13 |          transform: translateX(-150%) scale(.75);
14 |       } to {
15 |          transform: translateX(0) scale(1);
16 |       }
17 |    } 
18 | </style>
19 | 
20 | <template>
21 |    <!-- Card -->
22 |    <div 
23 |    class="card">
24 |       <img src="../assets/mount.jpeg" />
25 |       <div class="card-footer">
26 |          <div 
27 |          @click="router.push({ name: 'view' })"
28 |          class="flex flex-wrap">
29 |             <strong class="text-xxxs mb-0 w-full">Mt. Rinjani</strong>
30 |             <p class="text-xxxxs text-gray-400">Lombok, Indonesia</p>
31 |          </div>
32 |          <i
33 |          @click="isHeartClick = !isHeartClick"
34 |          :class="isHeartClick ? 'fas' : 'far'"
35 |          class="fa-heart duration-300 text-xs text-green-500"></i>
36 |       </div>
37 |    </div>
38 | </template>
39 | 
40 | <script setup>
41 |    import { ref } from 'vue'
42 |    import { useRouter } from 'vue-router'
43 |    
44 |    const router = useRouter()
45 |    //Handler for Heart icon
46 |    const isHeartClick = ref(false)
47 | </script>


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Travel App 3",
 3 |     "short_name": "Travel App 3",
 4 |     "theme_color": "#FFFFFF",
 5 |     "background_color": "#fff",
 6 |     "display": "standalone",
 7 |     "orientation": "porsrc/trait",
 8 |     "scope": "\/",
 9 |     "start_url": "\/",
10 |     "icons": [
11 |         {
12 |             "src": "src/assets/icons/icon-72x72.png",
13 |             "sizes":"72x72",
14 |             "type": "image\/png"
15 |         },
16 |         {
17 |             "src": "src/assets/icons/icon-96x96.png",
18 |             "sizes": "96x96",
19 |             "type": "image\/png"
20 |         },
21 |         {
22 |             "src": "src/assets/icons/icon-128x128.png",
23 |             "sizes": "128x128",
24 |             "type": "image\/png"
25 |         },
26 |         {
27 |             "src": "src/assets/icons/icon-144x144.png",
28 |             "sizes": "144x144",
29 |             "type": "image\/png"
30 |         },
31 |         {
32 |             "src": "src/assets/icons/icon-152x152.png",
33 |             "sizes": "152x152",
34 |             "type": "image\/png"
35 |         },
36 |         {
37 |             "src": "src/assets/icons/icon-192x192.png",
38 |             "sizes": "192x192",
39 |             "type": "image\/png"
40 |         },
41 |         {
42 |             "src": "src/assets/icons/icon-384x384.png",
43 |             "sizes": "384x384",
44 |             "type": "image\/png"
45 |         },
46 |         {
47 |             "src": "src/assets/icons/icon-512x512.png",
48 |             "sizes": "512x512",
49 |             "type": "image\/png"
50 |         }
51 |     ]
52 | }


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <style scoped>
 2 |    .nav-wrapper {
 3 |       @apply fixed left-0 right-0 bottom-0;
 4 |       box-shadow: -3px 3px 12px whitesmoke;
 5 |    }
 6 |    .navbar {
 7 |       @apply duration-300 w-full md:w-8/12  lg:w-4/12 mx-auto px-6 py-4 bg-white flex justify-between;
 8 |    }
 9 | </style>
10 | <template>
11 |    <section class="nav-wrapper">
12 |       <div class="navbar">
13 |          <template v-for="(menu, index) in menus" :key="index">
14 |             <div
15 |             @click="activeMenu = menu.name">
16 |                <i v-if="activeMenu !== menu.name"
17 |                :class="menu.icon"
18 |                class="duration-300 text-gray-500"></i>
19 |                <span class="duration-300 flex justify-center duration-300 flex-wrap" v-else>
20 |                   <p class="text-xxs text-green-400 w-full text-center">{{ menu.name }}</p>
21 |                   <i class="text-xxxxs text-green-400 fa fa-circle"></i>
22 |                </span>
23 |             </div>
24 |          </template>
25 |       </div>
26 |    </section>
27 | </template>
28 | 
29 | <script setup>
30 |    import { ref } from 'vue'
31 |    
32 |    //List menu
33 |    const menus = ref([
34 |       {
35 |          name: 'Home',
36 |          icon: 'fa fa-home'
37 |       },
38 |       {
39 |          name: 'Search',
40 |          icon: 'fa fa-search'
41 |       },
42 |       {
43 |          name: 'Bookmark',
44 |          icon: 'far fa-bookmark'
45 |       },
46 |       {
47 |          name: 'Profile',
48 |          icon: 'far fa-user'
49 |       }
50 |       ])
51 |       
52 |    //Handler for active menu
53 |    const activeMenu = ref('Home')
54 | </script>
55 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <style scoped>
 2 |    .text-xxs {
 3 |       font-size: .75rem;
 4 |    }
 5 |    .text-xxxs {
 6 |       font-size: .55rem;
 7 |    }
 8 |    .category-wrapper, .card-wrapper {
 9 |       @apply flex gap-3 overflow-scroll;
10 |    }
11 |    .category {
12 |       @apply bg-gray-100 duration-300 px-3 py-1 rounded-xl text-green-500 text-xs font-medium;
13 |    }
14 |    .active {
15 |       @apply bg-green-400 text-gray-50;
16 |    }
17 |    
18 | </style>
19 | 
20 | <template>
21 |    <section class="px-6 py-5">
22 |       <!-- Location -->
23 |       <div class="text-gray-400 flex items-center gap-2">
24 |          <i class="fas fa-map-marker-alt text-xxs"></i>
25 |          <span class="text-xxs">Jakarta, Indonesia</span>
26 |       </div>
27 |       <!-- Wellcome notes -->
28 |       <h1 class="text-2xl w-10/12 font-medium mt-5">
29 |          Where do you like to go ? 👏
30 |       </h1>
31 |       
32 |       <!-- Category -->
33 |       <div class="category-wrapper mt-5">
34 |          <template v-for="(category, index) in categories" :key="index">
35 |             <span
36 |             @click="activeBar = category"
37 |             :class="activeBar === category ? 'active' : ''" 
38 |             class="category">
39 |                {{ category }}
40 |             </span>
41 |          </template>
42 |       </div>
43 |       
44 |       <!-- Card -->
45 |       <div class="card-wrapper mt-6">
46 |          <template v-for="card in 4" :key="card">
47 |             <Card></Card>
48 |          </template>
49 |       </div>
50 |       
51 |       <!-- Recomendation for you -->
52 |       <div class="mt-5 mb-20">
53 |          <div class="flex items-center text-gray-600 justify-between">
54 |             <p>Recomendations</p>
55 |             <i class="fa fa-chevron-down"></i>
56 |          </div>
57 |          <template v-for="list in 8" :key="list">
58 |             <List></List>
59 |          </template>
60 |       </div>
61 |    </section>
62 |    <Navbar></Navbar>
63 | </template>
64 | 
65 | <script setup>
66 |    import { ref } from 'vue'
67 |    import Card from '../components/Card.vue'
68 |    import List from '../components/List.vue'
69 |    import Navbar from '../components/Navbar.vue'
70 |    
71 |    const categories = ref([
72 |          'Beach', 'Culture', 'Mountains', 'Forest'
73 |       ])
74 |    //For active class category
75 |    const activeBar = ref('Beach')   
76 | </script>


--------------------------------------------------------------------------------
/src/views/View.vue:
--------------------------------------------------------------------------------
 1 | <style scoped>
 2 |    .bottom-sheets {
 3 |       @apply p-6 w-full relative rounded-t-xl bg-white;
 4 |       animation: bottom-sheets .45s ease-in-out forwards;
 5 |       transform: translateY(-10%);
 6 |    }
 7 |    
 8 |    .btn {
 9 |       @apply bg-green-600 ring-green-300 w-full rounded mt-8 text-gray-50 text-sm font-medium py-2 duration-300 focus:ring focus:bg-opacity-75;
10 |    }
11 |    
12 |    @keyframes bottom-sheets {
13 |       from {
14 |          transform: translateY(150%) scale(.75);
15 |       } to {
16 |          transform: translateY(-10%) scale(1);
17 |       }
18 |    }
19 | </style>
20 | <template>
21 | 	<section class="">
22 |       <!-- Cover image -->
23 |       <div class="relative">
24 |          <img src="../assets/mount.jpeg" class="w-full" alt="" />
25 |          <span class="fixed left-0 right-0 top-0 px-6">
26 |             <div class="w-full md:w-8/12 lg:w-4/12 mx-auto py-4">
27 |                <i
28 |                @click="router.push({ name: 'home' })"
29 |                class="fa fa-chevron-left bg-gray-50 px-2 py-1 text-green-700 z-50 rounded bg-opacity-75"></i>
30 |             </div>
31 |          </span>
32 |       </div>
33 |       <!-- Bottom sheets -->
34 |       <div class="bottom-sheets">
35 |          <!-- Button heart -->
36 |          <span class="absolute right-6 -top-4 bg-white px-2 py-1 rounded-full shadow">
37 |             <i
38 |             @click="isHeartClicked = !isHeartClicked"
39 |             :class="isHeartClicked ? 'fas' : 'far'"
40 |             class="duration-300 text-red-600 fa-heart"></i>
41 |          </span>
42 |          <!-- The title -->
43 |          <div class="flex items-center justify-between">
44 |             <span>
45 |                <strong class="mb-1 w-full flex items-center gap-2">
46 |                   <h1>Mt. Rinjani</h1>
47 |                   <small class="font-light text-xxxs">(376km)</small>
48 |                </strong>
49 |                <p class="text-xs text-gray-400">Lombok, Indonesia</p>
50 |             </span>
51 |             <!-- rating -->
52 |             <span class="text-xxs gap-1 flex items-center">
53 |                <i class="fa fa-star text-xxxs text-yellow-400"></i>
54 |                4.6
55 |             </span>
56 |          </div>
57 |          
58 |          <!-- landscapes -->
59 |          <div class="mt-5 flex gap-3">
60 |             <template v-for="(landscape, index) in landscapes" :key="index">
61 |                <div>
62 |                   <img class="rounded mb-1" src="../assets/mount-square.jpg" />
63 |                   <p class="text-xxs text-center">{{ landscape }}</p>
64 |                </div>
65 |             </template>
66 |          </div>
67 |          <!-- Description -->
68 |          <div class="mt-5">
69 |             <p class="font-medium text-sm">Description</p>
70 |             <p class="text-xs text-gray-500">
71 |                Lorem ipsum sit amet dolor Lorem ipsum sit amet dolor Lorem ipsum sit amet dolor Lorem ipsum sit amet dolor
72 |             </p>
73 |          </div>
74 |          
75 |          <!-- CTA -->
76 |          <button class="btn" type="button">Visit place</button>
77 |       </div>
78 | 	</section>
79 | </template>
80 | 
81 | <script setup>
82 |    import { ref } from 'vue'
83 |    import { useRouter } from 'vue-router'
84 |    
85 |    const router = useRouter()
86 |    const landscapes = ref(['Lake', 'Beach', 'Forest', 'Sunset'])
87 |    const isHeartClicked = ref(false)
88 | </script>
89 | 


--------------------------------------------------------------------------------