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>