109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<template>
|
|
<section class="featured-tours">
|
|
<div class="tour-decorations">
|
|
<div class="tour-decoration tour-decoration-1"></div>
|
|
<div class="tour-decoration tour-decoration-2"></div>
|
|
</div>
|
|
|
|
<SectionContainer>
|
|
<div class="tours-header">
|
|
<SectionTitle title="Featured" gradient="Adventures" subtitle="Discover somewhere new, in a new way" />
|
|
</div>
|
|
|
|
<div class="tours-grid">
|
|
<TourCard
|
|
v-for="tour in featuredTours"
|
|
:tour="tour"
|
|
/>
|
|
</div>
|
|
<br/>
|
|
<EdgyButton classes="btn-primary btn-full">Explore All Tours</EdgyButton>
|
|
|
|
</SectionContainer>
|
|
</section>
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
/* Featured Tours Section */
|
|
.featured-tours {
|
|
position: relative;
|
|
padding: 5rem 0;
|
|
background: var(--background);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tour-decorations {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tour-decoration {
|
|
position: absolute;
|
|
opacity: 0.05;
|
|
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
|
|
}
|
|
|
|
.tour-decoration-1 {
|
|
top: 5rem;
|
|
left: 0;
|
|
width: 128px;
|
|
height: 128px;
|
|
background: var(--gradient-adventure);
|
|
}
|
|
|
|
.tour-decoration-2 {
|
|
bottom: 10rem;
|
|
right: 5rem;
|
|
width: 96px;
|
|
height: 96px;
|
|
background: var(--gradient-accent);
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.tours-header {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.tours-header.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.tours-grid {
|
|
display: grid;
|
|
gap: 2rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.tours-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.tours-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import SectionContainer from "@/components/dredgy/SectionContainer.vue";
|
|
import SectionTitle from "@/components/dredgy/SectionTitle.vue";
|
|
import TourCard from "@/components/dredgy/TourCard.vue";
|
|
import { Tour } from "@/types";
|
|
import EdgyButton from "@/components/dredgy/EdgyButton.vue";
|
|
|
|
const featuredTours : Tour[] = [
|
|
{id: 1, length:8, title:"Cantonese Charm", countryId: 1, countryName: "China", continentId:1,continentName:"Asia",description:"Guangdong is known for it's big, global cities, but there is so much more to discover and pristine natural beauty.", internal_name:"cantonese_charm", level: "Beginner", price:1000},
|
|
{id: 2, length: 7, title:"Fujian Fantasy", countryId: 1, countryName: "China", continentId:1,continentName:"Asia",description:"Experience fresh seafood in Xiamen, and then move rurally for an authentic dive into Hakka culture", internal_name:"fujian_fantasy", level: "Beginner", price:1200},
|
|
{id: 3, length: 10, title:"Hebei Hijinx", countryId: 1, countryName: "China", continentId:1,continentName:"Asia",description:"The Great Wall, Great Food and ancient treasures in one of China's most underrated provinces.", internal_name:"hebei_hijinx", level: "Moderate", price:1500},
|
|
]
|
|
</script>
|