192 lines
6.8 KiB
Vue
192 lines
6.8 KiB
Vue
<script setup lang="ts">
|
||
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
|
||
})
|
||
</script>
|
||
|
||
<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>
|
||
|
||
<!-- Why Choose Dr Edgy -->
|
||
<SectionContainer class="section-block">
|
||
<br/><br/>
|
||
<div v-show-on-intersect="'fade-up'" class="about-content">
|
||
<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>
|
||
|
||
</p>
|
||
</div>
|
||
|
||
<div class="profiles">
|
||
<ProfileCard
|
||
photoSide="left"
|
||
name="Joshua Dredge"
|
||
position="Founder & Guide"
|
||
slide="left"
|
||
photo="/img/staff/josh_dredge.jpg"
|
||
blurb="Josh has been travelling since he was an infant, and has no plans to stop! He loves the act of discovery and is always going to places that he can't find an information on! He has a particular penchant for China, Central Asia and anywhere with a desert.
|
||
His background is in bartending, small-business management, wine logistics and software development; but made the move to guiding so that he's not tied down! He can't wait to introduce you to new and exciting places!"
|
||
/>
|
||
</div>
|
||
<div class="profiles">
|
||
<ProfileCard
|
||
slide="right"
|
||
photoSide="right"
|
||
name="Dr Rainbow Yuan"
|
||
position="Founder & Tour Designer (China)"
|
||
photo="/img/staff/rainbow_yuan.jpg"
|
||
blurb="Born and raised in Dongguan, China, Rainbow earned her doctorate of education and has taught widely across China, Malaysia, Thailand and even
|
||
at Kim il-Sung university in North Korea! She's of Hakka descent and is fluent in English, Mandarin and Cantonese. Rainbow has travelled far and wide
|
||
and is always eager to share her knowledge and experiences with you."
|
||
/>
|
||
</div>
|
||
</div>
|
||
</SectionContainer>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* Company blurb */
|
||
.company-blurb {
|
||
margin-top: 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.company-blurb p {
|
||
color: var(--muted-foreground);
|
||
font-size: 1.08rem;
|
||
line-height: 1.7;
|
||
max-width: 70ch;
|
||
text-align: center;
|
||
}
|
||
|
||
.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: 0 0 5rem 0; /* hero handles its own vertical space; keep bottom padding for rest */
|
||
background: var(--background);
|
||
overflow: hidden;
|
||
min-height: 90dvh;
|
||
}
|
||
|
||
.about-decorations {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.about-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));
|
||
}
|
||
|
||
.about-decoration-1 {
|
||
top: 2rem;
|
||
right: 2rem;
|
||
width: 100px;
|
||
height: 100px;
|
||
background: var(--gradient-adventure);
|
||
}
|
||
|
||
.about-decoration-2 {
|
||
bottom: 3rem;
|
||
left: 3rem;
|
||
width: 80px;
|
||
height: 80px;
|
||
background: var(--gradient-accent);
|
||
}
|
||
|
||
.about-decoration-3 {
|
||
top: 50%;
|
||
right: 5rem;
|
||
width: 6px;
|
||
height: 100px;
|
||
background: var(--gradient-adventure);
|
||
}
|
||
|
||
/* Profiles layout */
|
||
.profiles {
|
||
display: grid;
|
||
gap: 2.5rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
/* Mobile tweaks */
|
||
|
||
</style>
|