Featured tours working

app/Models/Continent.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Model;
+use LaravelIdea\Helper\App\Models\_IH_Continent_C;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+class Continent extends Model
+{
+    protected $fillable = ['name', 'internal_name'];
+    public $timestamps = false;
+
+    public static function allContinentsWithTours(): _IH_Continent_C|Collection|array
+    {
+        return Continent::whereHas('countries.tours')
+            ->orderBy('name')
+            ->get();
+    }
+
+    public function countries(): HasMany
+    {
+        return $this->hasMany(Country::class);
+    }
+
+}

app/Models/Country.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+
+class Country extends Model
+{
+    protected $fillable = [
+        'internal_name',
+        'name',
+        'country_code',
+        'continent_id',
+    ];
+    public $timestamps = false;
+
+    public function continent(): BelongsTo
+    {
+        return $this->belongsTo(Continent::class);
+    }
+
+    public function tours(): BelongsToMany
+    {
+        return $this->belongsToMany(Tour::class, 'tour_countries', 'country_id', 'tour_id');
+    }
+}

app/Models/Tour.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+
+class Tour extends Model
+{
+    protected $fillable = ['name', 'internal_name', 'short_description'];
+    public $timestamps = false;
+
+    public function countries()
+    {
+        return $this->belongsToMany(Country::class, 'tour_countries', 'tour_id', 'country_id');
+    }
+}

app/Models/TourCountry.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class TourCountry extends Model
+{
+    protected $fillable = ['tour_id', 'country_id'];
+    public $timestamps = false;
+
+}

database/migrations/2025_09_15_003257_create_continents_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('continents', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('internal_name')->unique();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('continents');
+    }
+};

database/migrations/2025_09_15_013414_create_countries_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('countries', function (Blueprint $table) {
+            $table->id();
+            $table->string('internal_name')->unique();
+            $table->string('name');
+            $table->string('country_code', 2)->unique();
+            $table->foreignId('continent_id')
+                ->constrained('continents')
+                ->onDelete('restrict'); // or ->onDelete('cascade') if you prefer
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('countries');
+    }
+};

database/migrations/2025_09_15_014700_create_tours_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('tours', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('internal_name');
+            $table->string('short_description');
+            $table->integer('length');
+            $table->integer('price');
+            $table->string('level');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('tours');
+    }
+};

database/migrations/2025_09_15_021144_create_tour_countries_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('tour_countries', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('country_id')->constrained();
+            $table->foreignId('tour_id')->constrained();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('tour_countries');
+    }
+};

database/seeders/ContinentSeeder.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+
+class ContinentSeeder extends Seeder
+{
+    public function run(): void
+    {
+        DB::table('continents')->insert([
+            ['id' => 1, 'name' => 'Australia & Oceania', 'internal_name' => 'oceania'],
+            ['id' => 2, 'name' => 'Africa', 'internal_name' => 'africa'],
+            ['id' => 3, 'name' => 'Asia', 'internal_name' => 'asia'],
+            ['id' => 4, 'name' => 'Europe', 'internal_name' => 'europe'],
+            ['id' => 5, 'name' => 'North America', 'internal_name' => 'north_america'],
+            ['id' => 6, 'name' => 'South America', 'internal_name' => 'south_america'],
+            ['id' => 7, 'name' => 'Antarctica', 'internal_name' => 'antarctica'],
+        ]);
+    }
+
+}

database/seeders/CountrySeeder.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Continent;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class CountrySeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $map = Continent::all()->pluck('id', 'internal_name')->toArray();
+
+        \DB::table('countries')->insert([
+            ['internal_name'=>'comoros','name'=>'Comoros','country_code'=>'km','continent_id'=>$map['africa']],
+            ['internal_name'=>'madagascar','name'=>'Madagascar','country_code'=>'mg','continent_id'=>$map['africa']],
+            ['internal_name'=>'suriname','name'=>'Suriname','country_code'=>'sn','continent_id'=>$map['south_america']],
+            ['internal_name'=>'mauritania','name'=>'Mauritania','country_code'=>'mr','continent_id'=>$map['africa']],
+            ['internal_name'=>'china','name'=>'China','country_code'=>'cn','continent_id'=>$map['asia']],
+            ['internal_name'=>'tajikistan','name'=>'Tajikistan','country_code'=>'tj','continent_id'=>$map['asia']],
+            ['internal_name'=>'gabon','name'=>'Gabon','country_code'=>'ga','continent_id'=>$map['africa']],
+        ]);
+    }
+
+}

database/seeders/DatabaseSeeder.php

@@ -14,9 +14,12 @@ class DatabaseSeeder extends Seeder
     public function run(): void
     {
         // User::factory(10)->create();
-        $this->call(ContinentSeeder::class);
+        $this
-
+            ->call(ContinentSeeder::class)
-        $this->call(CountrySeeder::class);
+            ->call(CountrySeeder::class)
+            ->call(TourSeeder::class)
+            ->call(TourCountrySeeder::class)
+        ;
 
         User::factory()->create([
             'name' => 'Test User',

database/seeders/TourCountrySeeder.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Country;
+use App\Models\Tour;
+use App\Models\TourCountry;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class TourCountrySeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $tourMap =  Tour::all()->pluck('id', 'internal_name')->toArray();
+        $countryMap= Country::all()->pluck('id', 'internal_name')->toArray();
+        \DB::table('tour_countries')->insert([
+            ['tour_id' => $tourMap['cantonese_charm'], 'country_id' => $countryMap['china']],
+            ['tour_id' => $tourMap['fujianese_fantasy'], 'country_id' => $countryMap['china']],
+            ['tour_id' => $tourMap['hebei_hijinx'], 'country_id' => $countryMap['china']],
+        ]);
+
+    }
+}

database/seeders/TourSeeder.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class TourSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        \DB::table('tours')->insert([
+            ['length' => 8, 'name' => "Cantonese Charm", 'short_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],
+            ['length' => 7, 'name' => "Fujianese Fantasy", 'short_description' => "Experience fresh seafood in Xiamen, and then move rurally for an authentic dive into Hakka culture", 'internal_name' => "fujianese_fantasy", 'level' => "Beginner", 'price' => 1200],
+            ['length' => 10, 'name' => "Hebei Hijinx", 'short_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],
+        ]);
+
+
+    }
+}

resources/js/components/dredgy/TourCard.vue

@@ -26,10 +26,10 @@ const props = defineProps<{
                     <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                     <circle cx="12" cy="10" r="3"></circle>
                 </svg>
-                {{tour.countryName}}, {{tour.continentName}}
+                {{ tour.countries.at(0)?.name }}, {{ tour.countries.at(0)?.continent.name }}
             </div>
             <h3 class="tour-title">{{tour.title}}</h3>
-            <p class="tour-description" v-if="tour.description">{{tour.description}}</p>
+            <p class="tour-description" v-if="tour.short_description">{{tour.short_description}}</p>
             <div class="tour-details">
                 <div class="tour-detail">
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

resources/js/components/home/About.vue

@@ -181,5 +181,6 @@ import EdgyButton from "@/components/dredgy/EdgyButton.vue";
 import GradientText from "@/components/dredgy/GradientText.vue";
 import SectionContainer from "@/components/dredgy/SectionContainer.vue";
 import SectionTitle from "@/components/dredgy/SectionTitle.vue";
+
 </script>
 

resources/js/components/home/FeaturedTours.vue

@@ -99,10 +99,12 @@ 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[] = [];
 
-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},
+import { defineProps } from 'vue'
-    {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},
+const props = defineProps<{
-]
+    featuredTours: Tour[]
+}>()*/
 </script>

resources/js/composables/useIntersectionObserver.ts

@@ -0,0 +1,38 @@
+import { onMounted, onBeforeUnmount, nextTick } from 'vue';
+
+/**
+ * useIntersectionObserver
+ *
+ * @param selector - CSS selector for elements to observe
+ * @param callback - called when intersection changes
+ * @param options - IntersectionObserver options
+ */
+export const useIntersectionObserver = (
+    selector: string,
+    callback: IntersectionObserverCallback,
+    options: IntersectionObserverInit = {}
+) => {
+    let observer: IntersectionObserver | null = null;
+
+    const defaultOptions: IntersectionObserverInit = {
+        threshold: 0.3,
+        rootMargin: '0px 0px -50px 0px',
+    };
+
+    onMounted(async () => {
+        await nextTick(); // wait for DOM to render
+
+        const elements = document.querySelectorAll(selector);
+        if (!elements.length) return;
+
+        observer = new IntersectionObserver(callback, { ...defaultOptions, ...options });
+        elements.forEach(el => observer!.observe(el));
+    });
+
+    onBeforeUnmount(() => {
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+    });
+};

resources/js/pages/Home.vue

@@ -1,9 +1,7 @@
 <template>
     <Hero />
-    <!-- About Section -->
     <About />
-    <!-- Featured Tours Section -->
+    <FeaturedTours :featured-tours="featured_tours" />
-    <FeaturedTours />
 </template>
 
 <style>
@@ -11,15 +9,21 @@
 </style>
 
 <script setup lang="ts">
-
-
-
 import { onMounted } from 'vue';
+import {usePage} from "@inertiajs/vue3";
+import {Tour} from "@/types";
+
+interface Properties {
+    featured_tours: Tour[]
+}
+
+const { featured_tours } = usePage().props as unknown as Properties
 
 import AppLayout from '../layouts/AppLayout.vue'
 import Hero from "@/components/home/Hero.vue";
 import About from "@/components/home/About.vue";
 import FeaturedTours from "@/components/home/FeaturedTours.vue";
+
 defineOptions({
     layout: AppLayout
 })

resources/js/types/index.d.ts

@@ -46,16 +46,20 @@ export interface Continent {
     internal_name: string
 }
 
+export interface Country {
+    id: number
+    name: string
+    internal_name: string
+    continent: Continent;
+}
+
 export interface Tour {
     id: number
     title: string
     internal_name: string
-    continentId: number
-    continentName: string
-    countryId: number
-    countryName: string
-    level: string
-    description?: string
-    price: number
     length: number
+    price: number
+    level: string
+    short_description: string
+    countries: Country[]
 }

routes/web.php

@@ -1,14 +1,13 @@
 <?php
 
 use App\Models\Continent;
+use App\Models\Tour;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
 Route::get('/', function () {
-    $continent = Continent::first();
-
     return Inertia::render('Home',[
-        'continent' => $continent,
+        'featured_tours' => Tour::all()->random(3),
     ]);
 })->name('home');