dredgy/DredgeTours
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added About Page

Browse Source
This commit is contained in:
Josh
2025-09-17 23:34:37 +10:00
parent 2f6006626d
commit b9e1f6827a
30 changed files with 1270 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
resources/js/components/home/About.vue
View File

@@ -7,32 +7,39 @@
</div>
<SectionContainer>
<div class="about-content">
<SectionTitle title="Beyond" gradient="Borders" />
<div class="about-grid">
<div class="about-text">
<p>
We've been travelling the world our whole lives. From North Korea to Afghanistan, Comoros to Venezuela, Suriname to Uruguay. We know the world, and we want to show it to you.
</p>
<p>
Dr Edgy offers immersive, authentic small group and private adventures, leveraging an extensive global network forged through decades of adventure travel.
</p>
<p>
Our main focus for now is China, where we offer deep-dive adventures of individual provinces and subjects-of-interest and going to places that most other tours completely bypass.
We can arrange private adventures in many other countries on request.
</p>
<div
v-show-on-intersect="'fade-up'"
class="about-content"
>
<div>
<SectionTitle title="Beyond" gradient="Borders" />
<div class="about-grid">
<div class="about-text" v-show-on-intersect="{type: 'slide-right'}">
<p>
We've been travelling the world our whole lives. From North Korea to Afghanistan, Comoros to Venezuela, Suriname to Uruguay. We know the world, and we want to show it to you.
</p>
<p>
Dr Edgy offers immersive, authentic small group and private adventures, leveraging an extensive global network forged through decades of adventure travel.
</p>
<p>
Our main focus for now is China, where we offer deep-dive adventures of individual provinces and subjects-of-interest and going to places that most other tours completely bypass.
We can arrange private adventures in many other countries on request.
</p>
</div>
<div class="about-cta" v-show-on-intersect="{type:'slide-left'}">
<h3>Who Are We?</h3>
<p>Dr Edgy was founded by two close friends who met travelling in North Korea. Both of us love adventure travel with a bit of luxury. One of us is even an actual doctor.</p>
<p>You are in safe hands.</p>
<EdgyButton classes="btn-primary">
<Link href="/about">
GET TO KNOW US
</Link>
</EdgyButton>
</div>
</div>
</div>
<div class="about-cta">
<h3>Who Are We?</h3>
<p>Dr Edgy was founded by two close friends who met travelling in North Korea. Both of us love adventure travel with a bit of luxury. One of us is even an actual doctor.</p>
<p> You are in safe hands.</p>
<EdgyButton classes="btn-primary">GET TO KNOW US</EdgyButton>
</div>
</div>
</div>
</SectionContainer>
</section>
@@ -83,17 +90,6 @@
background: var(--gradient-adventure);
}
.about-content {
opacity: 0;
transform: translateY(50px);
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.about-content.visible {
opacity: 1;
transform: translateY(0);
}
.about-grid {
display: grid;
gap: 3rem;
@@ -113,33 +109,6 @@
font-size: 1.125rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.stat {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
background: var(--gradient-adventure);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label {
color: var(--muted-foreground);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.about-cta {
text-align: center;
padding: 2rem;
@@ -176,34 +145,15 @@
</style>
<script setup lang="ts">
import { ref } from 'vue'
import EdgyButton from "@/components/dredgy/EdgyButton.vue";
import SectionContainer from "@/components/dredgy/SectionContainer.vue";
import SectionTitle from "@/components/dredgy/SectionTitle.vue";
import {createIntersectionObserver} from "@/composables/useIntersectionObserver";
import {onMounted} from "vue";
import {Link} from "@inertiajs/vue3";
onMounted(() => {
initAboutAnimation()
})
// About section animation
const initAboutAnimation = (): void => {
const aboutContent = document.querySelector('.about-content') as HTMLElement | null;
if (!aboutContent) return;
const observer = createIntersectionObserver((entries: IntersectionObserverEntry[]) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
} else {
entry.target.classList.remove('visible');
}
});
});
observer.observe(aboutContent);
};
const isVisible = ref(false)
const onIntersect = (isIntersecting: boolean, entries: IntersectionObserverEntry[]) => {
isVisible.value = isIntersecting
}
</script>

110
resources/js/components/home/FeaturedTours.vue
View File

@@ -6,28 +6,33 @@
</div>
<SectionContainer>
<div class="tours-header">
<div
v-show-on-intersect="{ type: 'fade-up', duration: '1s' }"
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, index) in featuredTours"
:key="tour.id ?? index"
:key="index"
class="tour-card"
:data-index="index"
:tour="tour"
/>
</div>
<br/>
<EdgyButton classes="btn-primary btn-full">Explore All Adventures</EdgyButton>
<EdgyButton
v-show-on-intersect="{ type: 'fade-up', duration: '0.6s' }"
classes="btn-primary btn-full"
>
Explore All Adventures
</EdgyButton>
</SectionContainer>
</section>
</template>
<style scoped>
/* Featured Tours Section */
.featured-tours {
@@ -69,19 +74,12 @@
.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;
overflow: hidden;
}
@media (min-width: 768px) {
@@ -95,85 +93,27 @@
grid-template-columns: repeat(3, 1fr);
}
}
/* Hover effects for tour cards */
.tour-card {
transition: transform 0.3s ease;
cursor: pointer;
overflow: hidden;
}
.tour-card:hover {
transform: translateY(-8px) scale(1.02);
}
</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";
import { Tour } from "@/types";
import { defineProps, onMounted } from 'vue'
import {createIntersectionObserver} from "@/composables/useIntersectionObserver";
const props = defineProps<{
defineProps<{
featuredTours: Tour[]
}>()
onMounted(() => {
initToursAnimation()
initTourCardInteractions()
})
const initTourCardInteractions = (): void => {
const tourCards = document.querySelectorAll('.tour-card') as NodeListOf<HTMLElement>;
tourCards.forEach((card: HTMLElement) => {
// Add hover effects
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-8px) scale(1.02)';
});
card.addEventListener('mouseleave', () => {
if (card.classList.contains('visible')) {
card.style.transform = 'translateY(0) rotate(0deg) scale(1)';
}
});
});
};
const initToursAnimation = (): void => {
const toursHeader = document.querySelector('.tours-header') as HTMLElement | null;
const tourCards = document.querySelectorAll('.tour-card') as NodeListOf<HTMLElement>;
if (!toursHeader || !tourCards.length) return;
// Header animation
const headerObserver = createIntersectionObserver((entries: IntersectionObserverEntry[]) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});
headerObserver.observe(toursHeader);
// Tour cards animation with staggered effect
const cardsObserver = createIntersectionObserver((entries: IntersectionObserverEntry[]) => {
entries.forEach((entry: IntersectionObserverEntry) => {
const tourCard = entry.target as HTMLElement;
const index = parseInt(tourCard.dataset.index || '0');
if (entry.isIntersecting) {
// Staggered animation when scrolling down
setTimeout(() => {
tourCard.classList.add('visible');
}, index * 150);
} else {
// Reverse staggered animation when scrolling up
const reverseIndex = (tourCards.length - 1) - index;
setTimeout(() => {
tourCard.classList.remove('visible');
}, reverseIndex * 100);
}
});
}, { threshold: 0.2 });
tourCards.forEach((card: HTMLElement) => {
cardsObserver.observe(card);
});
};
</script>

205
resources/js/components/home/Hero.vue
View File

@@ -1,183 +1,126 @@
<template>
<section class="hero">
<div class="hero-bg"></div>
<div class="hero-overlay"></div>
<section class="hero">
<div class="hero-bg"></div>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1 class="hero-title animate-fade">
<GradientText>Travel.</GradientText><br>
<span>On the Edge</span>
</h1>
<div class="hero-content">
<h1 class="hero-title animate-fade">
<GradientText>Travel.</GradientText><br>
<span>On the Edge</span>
</h1>
<p class="hero-subtitle animate-slide">
We don't go wherever is trendy. <br/>
We set the trends.
</p>
<div class="hero-buttons">
<EdgyButton classes="btn-secondary">View Adventures</EdgyButton>
</div>
<p class="hero-subtitle animate-slide">
We don't go wherever is trendy. <br/>
We set the trends.
</p>
<div class="hero-buttons">
<EdgyButton classes="btn-secondary">View Adventures</EdgyButton>
</div>
<div class="scroll-indicator">
<div class="scroll-mouse">
<div class="scroll-dot"></div>
</div>
</div>
</section>
</div>
<ScrollIndicator />
</section>
</template>
<style scoped>
/* Hero Section */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120%;
background-image: url('/img/hero.jpg');
background-size: cover;
background-position: center;
will-change: transform;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120%;
background-image: url('/img/hero.jpg');
background-size: cover;
background-position: center;
will-change: transform;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120%;
background: var(--gradient-hero);
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120%;
background: var(--gradient-hero);
opacity: 0.8;
}
.hero-content {
position: relative;
z-index: 10;
text-align: center;
max-width: 1000px;
padding: 0 2rem;
position: relative;
z-index: 10;
text-align: center;
max-width: 1000px;
padding: 0 2rem;
}
.hero-title {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: bold;
margin-bottom: 1.5rem;
line-height: 1.1;
font-size: clamp(3rem, 8vw, 6rem);
font-weight: bold;
margin-bottom: 1.5rem;
line-height: 1.1;
}
.hero-subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
color: var(--muted-foreground);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
color: var(--muted-foreground);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.hero-title,
.hero-subtitle {
opacity: 0;
transform: translateY(18px);
transition: opacity 1000ms cubic-bezier(.22,.9,.32,1),
transform 1000ms cubic-bezier(.22,.9,.32,1);
will-change: opacity, transform;
opacity: 0;
transform: translateY(18px);
transition: opacity 1000ms cubic-bezier(.22,.9,.32,1),
transform 1000ms cubic-bezier(.22,.9,.32,1);
will-change: opacity, transform;
}
/* visible state toggled by JS */
.hero-title.is-visible,
.hero-subtitle.is-visible {
opacity: 1;
transform: translateY(0);
opacity: 1;
transform: translateY(0);
}
@media (min-width: 640px) {
.hero-buttons {
flex-direction: row;
justify-content: center;
}
.hero-buttons {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 767px) {
.hero-content {
padding: 0 1rem;
}
.hero-content {
padding: 0 1rem;
}
}
/* Animations */
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40%, 43% {
transform: translateX(-50%) translateY(-15px);
}
70% {
transform: translateX(-50%) translateY(-7px);
}
90% {
transform: translateX(-50%) translateY(-2px);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
}
.scroll-mouse {
width: 24px;
height: 40px;
border: 2px solid var(--foreground);
border-radius: 12px;
display: flex;
justify-content: center;
padding-top: 8px;
}
.scroll-dot {
width: 4px;
height: 12px;
background: var(--foreground);
border-radius: 2px;
animation: pulse 2s infinite;
}
</style>
<script setup lang="ts">
import EdgyButton from "@/components/dredgy/EdgyButton.vue";
import GradientText from "@/components/dredgy/GradientText.vue";
import {onMounted} from "vue";
import { onMounted } from "vue";
import ScrollIndicator from "@/components/dredgy/ScrollIndicator.vue";
const initParallax = (): void => {
const heroBackground = document.querySelector('.hero-bg') as HTMLElement | null;