Populated Content

resources/js/components/home/FeaturedTours.vue

@@ -0,0 +1,108 @@
+<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>