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-18 15:09:44 +10:00
parent c40fdc0b2a
commit 3a5f5ff0b7
7 changed files with 109 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/dredgy/TourCard.vue
View File

@@ -50,7 +50,7 @@ const props = defineProps<{
Maximum 6
</div>
</div>
<EdgyButton classes="btn-primary btn-full">Book Now</EdgyButton>
<EdgyButton classes="btn-primary btn-full">View Details</EdgyButton>
</div>
</div>
</template>

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

@@ -1,20 +1,20 @@
<template>
<section class="hero">
<div class="hero-bg"></div>
<div class="hero-bg" :style="'background-image:url('+image+')'"></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>
<GradientText>{{titleLineOne}}</GradientText><br>
<span>{{titleLineTwo}}</span>
</h1>
<p class="hero-subtitle animate-slide">
We don't go wherever is trendy. <br/>
We set the trends.
{{subtitleLineOne}}<br/>
{{subtitleLineTwo}}<br/>
</p>
<div class="hero-buttons">
<EdgyButton classes="btn-secondary">View Adventures</EdgyButton>
<slot />
</div>
</div>
<ScrollIndicator />
@@ -38,7 +38,6 @@
left: 0;
right: 0;
height: 120%;
background-image: url('/img/hero.jpg');
background-size: cover;
background-position: center;
will-change: transform;
@@ -60,6 +59,10 @@
text-align: center;
max-width: 1000px;
padding: 0 2rem;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero-title {
@@ -86,7 +89,8 @@
}
.hero-title,
.hero-subtitle {
.hero-subtitle,
.hero-buttons{
opacity: 0;
transform: translateY(18px);
transition: opacity 1000ms cubic-bezier(.22,.9,.32,1),
@@ -96,15 +100,17 @@
/* visible state toggled by JS */
.hero-title.is-visible,
.hero-subtitle.is-visible {
.hero-subtitle.is-visible,
.hero-buttons.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (min-width: 640px) {
.hero-buttons {
flex-direction: row;
width: 50%;
justify-content: center;
align-items: center;
}
}
@media (max-width: 767px) {
@@ -149,6 +155,7 @@ const initLoadingAnimations = (): void => {
const heroTitle = document.querySelector('.hero-title') as HTMLElement | null;
const heroSubtitle = document.querySelector('.hero-subtitle') as HTMLElement | null;
const heroButtons = document.querySelector('.hero-buttons') as HTMLElement | null;
if (heroTitle) {
setTimeout(() => {
@@ -164,8 +171,23 @@ const initLoadingAnimations = (): void => {
heroSubtitle.classList.add('is-visible');
}, 750);
}
if (heroButtons) {
setTimeout(() => {
void heroButtons.offsetWidth;
heroButtons.classList.add('is-visible');
}, 900);
}
};
defineProps({
image: String,
titleLineOne: String,
titleLineTwo: String,
subtitleLineOne: String,
subtitleLineTwo: String,
})
onMounted(() => {
initParallax()
initLoadingAnimations()

69
resources/js/pages/AboutUs.vue
View File

@@ -3,6 +3,7 @@ import AppLayout from "@/layouts/AppLayout.vue";
import SectionContainer from "@/components/dredgy/SectionContainer.vue";
import SectionTitle from "@/components/dredgy/SectionTitle.vue";
import ProfileCard from "@/components/ProfileCard.vue";
import Hero from "@/components/home/Hero.vue";
defineOptions({
layout: AppLayout
@@ -11,15 +12,60 @@ defineOptions({
<template>
<section class="about about-us" id="about-us">
<Hero
image="/img/chongqing2_hero.jpeg"
title-line-one="What"
title-line-two="We Do"
subtitle-line-one="Small groups, thoughtful routes, and experiences"
subtitle-line-two=" that lean into curiosity."
>
<p>
From remote borderlands and high deserts to vibrant city backstreets, our tours are crafted for travelers who want more
than a checklist. We run set departures for small groups and design custom trips around your dates, interests, and comfort level.
</p>
<p>
Expect immersive walks, local food, lived-in stays, and time for serendipity. Whether you’re after a deep-dive expedition
or a punchy day tour, we’ll keep it flexible, intimate, and full of good stories.
</p>
</Hero>
<div class="about-decorations">
<div class="about-decoration about-decoration-1"></div>
<div class="about-decoration about-decoration-2"></div>
<div class="about-decoration about-decoration-3"></div>
</div>
<SectionContainer>
<!-- Why Choose Dr Edgy -->
<SectionContainer class="section-block">
<div v-show-on-intersect="'fade-up'" class="about-content">
<SectionTitle title="Meet" gradient="The Team" subtitle="Dr Edgy was started by friends who can't get enough of adventuring and who enjoy the thrill of planning and sharing their experiences." />
<SectionTitle
title="Why"
gradient="Choose Dr Edgy"
subtitle="Real insight, careful planning, and the right amount of edge."
/>
<div class="company-blurb" v-show-on-intersect="{type:'fade-up'}">
<p>
Our itineraries are built by guides who’ve actually spent time on these routes—testing logistics, meeting people, and
learning the rhythms of each place. We balance safety with genuine adventure, so you can step off the beaten path
with confidence.
</p>
</div>
<div class="company-blurb" v-show-on-intersect="{type:'fade-up'}">
<p>
We keep groups small, work with local partners, and stay transparent about what’s included. It’s travel designed to be
rewarding, respectful, and unforgettable.
</p>
</div>
</div>
</SectionContainer>
<!-- Meet the Team -->
<SectionContainer class="section-block">
<div v-show-on-intersect="'fade-up'" class="about-content">
<SectionTitle
title="Meet"
gradient="The Team"
subtitle="Dr Edgy was started by friends who can't get enough of adventuring and who enjoy the thrill of planning and sharing their experiences."
/>
<div class="company-blurb" v-show-on-intersect="{type:'fade-up'}">
<p>
@@ -71,10 +117,25 @@ defineOptions({
text-align: center;
}
/* Base "About" styling to match the Home page aesthetic */
.company-blurb + .company-blurb {
margin-top: 1rem;
}
.section-block{
min-height: 45dvh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* Ensure clear separation between SectionContainer blocks */
.section-block + .section-block {
margin-top: 3rem;
}
/* Base "About" styling */
.about {
position: relative;
padding: 5rem 0;
padding: 0 0 5rem 0; /* hero handles its own vertical space; keep bottom padding for rest */
background: var(--background);
overflow: hidden;
min-height: 90dvh;

13
resources/js/pages/Home.vue
View File

@@ -1,5 +1,13 @@
<template>
<Hero />
<Hero
image="/img/hero.jpg"
title-line-one="Travel."
title-line-two="On the Edge."
subtitle-line-one="We don't go wherever is trendy."
subtitle-line-two="We set the trends."
>
<EdgyButton classes="btn-secondary">View Adventures</EdgyButton>
</Hero>
<About />
<FeaturedTours :featured-tours="featured_tours" />
</template>
@@ -9,7 +17,6 @@
</style>
<script setup lang="ts">
import { onMounted } from 'vue';
import {usePage} from "@inertiajs/vue3";
import {Tour} from "@/types";
@@ -23,6 +30,8 @@ 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";
import EdgyButton from "@/components/dredgy/EdgyButton.vue";
import GradientText from "@/components/dredgy/GradientText.vue";
defineOptions({
layout: AppLayout