Added About Page

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