Added About Page

resources/js/components/dredgy/TourCard.vue

@@ -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>

resources/js/components/home/Hero.vue

@@ -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>
+            <GradientText>{{titleLineOne}}</GradientText><br>
-            <span>On the Edge</span>
+            <span>{{titleLineTwo}}</span>
         </h1>
 
         <p class="hero-subtitle animate-slide">
-            We don't go wherever is trendy. <br/>
+            {{subtitleLineOne}}<br/>
-            We set the trends.
+            {{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()

resources/js/pages/AboutUs.vue

@@ -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;

resources/js/pages/Home.vue

@@ -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