🌐 about us page added 👷

client/app/(landing-pages)/about/page.tsx

@@ -1,11 +1,31 @@
 import { Metadata } from "next";
+import BookingSection from "@/components/page-components/landing/about/BookingSection";
+import HeroSection from "@/components/page-components/landing/about/HeroSection";
+import LocationMap from "@/components/page-components/landing/about/LocationMap";
+import MissionAndValues from "@/components/page-components/landing/about/MissionAndValues";
+import OurStory from "@/components/page-components/landing/about/OurStory";
+import WhyChooseUs from "@/components/page-components/landing/about/WhyChooseUs";
 
 export const metadata: Metadata = {
-   title: "About Us",
+  title: "About Us",
+  description:
+    "Learn about our commitment to holistic health through Ayurveda. Discover our story, meet our team, and understand our mission to enhance your well-being through ancient healing practices.",
+  keywords: ["Ayurveda", "Holistic Health", "About Us", "Our Team", "Our Mission", "Ayurvedic Center"],
 };
 
-const AboutPage = () => {
-   return <div>AboutPage</div>;
-};
-
-export default AboutPage;
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-background py-8">
+      <div className="container mx-auto px-4">
+        <h1 className="mb-8 text-4xl font-bold text-center">About AVM Ayurveda</h1>
+
+        <HeroSection />
+        <OurStory />
+        <MissionAndValues />
+        <WhyChooseUs />
+        <LocationMap />
+        <BookingSection />
+      </div>
+    </div>
+  );
+}

client/components/page-components/landing/about/BookingSection.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { Card, CardContent } from "@/components/ui/card";
+import { ButtonV2 } from "@/components/button/ButtonV2";
+import { useRouter } from "next/navigation";
+
+const BookingSection = () => {
+  const router = useRouter();
+  return (
+    <Card>
+      <CardContent className="p-6 text-center">
+        <h2 className="text-2xl font-bold mb-4">Ready to Start Your Wellness Journey?</h2>
+        <p className="mb-6">Book a consultation with our Ayurvedic experts and take the first step towards holistic health.</p>
+        <ButtonV2 onClick={() => router.push("/new-appointment")} variant={"shine"} size="lg">
+          Book an Appointment
+        </ButtonV2>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default BookingSection;

client/components/page-components/landing/about/HeroSection.tsx

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import { Card, CardContent } from "@/components/ui/card";
+import { SliderImages } from "@/constants";
+
+const HeroSection = () => {
+  return (
+    <Card className="mb-12">
+      <CardContent className="flex flex-col md:flex-row items-center p-6">
+        <div className="md:w-1/2 mb-6 md:mb-0">
+          <Image
+            src={SliderImages[0]}
+            alt="AVM Ayurveda"
+            width={500}
+            height={300}
+            className="rounded-lg object-cover"
+          />
+        </div>
+        <div className="md:w-1/2 md:pl-6">
+          <h2 className="text-2xl font-semibold mb-4">Embracing Holistic Wellness</h2>
+          <p className="text-lg">
+            At AVM Ayurveda, we're dedicated to reviving the ancient wisdom of Ayurveda
+            and integrating it with modern healthcare practices. Our goal is to guide you on a
+            journey of holistic healing and self-discovery.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default HeroSection;

client/components/page-components/landing/about/LocationMap.tsx

@@ -0,0 +1,30 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+
+const LocationMap = () => {
+  return (
+    <Card className="mb-12">
+      <CardHeader>
+        <CardTitle>Our Location</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="aspect-w-16 aspect-h-9 mb-4">
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3911.875185958898!2d75.79679470162522!3d11.343826171470987!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba65e0faa44289d%3A0xf35a6458bc072465!2sAVM%20Hospital!5e0!3m2!1sen!2sin!4v1728189070741!5m2!1sen!2sin"
+            width="100%"
+            height="450"
+            style={{ border: 0 }}
+            allowFullScreen
+            loading="lazy"
+          ></iframe>
+        </div>
+        <p className="text-lg">
+          Visit us at: Chelannur, Kozhikode, Kerala 673616<br />
+          Phone: 04952262655<br />
+          Email: [email protected]
+        </p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default LocationMap;

client/components/page-components/landing/about/MissionAndValues.tsx

@@ -0,0 +1,38 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import Image from "next/image";
+
+const values = [
+  { title: "Holistic Approach", description: "We treat the whole person, not just symptoms." },
+  { title: "Personalized Care", description: "Every treatment plan is tailored to the individual." },
+  { title: "Ancient Wisdom, Modern Science", description: "We combine traditional Ayurveda with contemporary research." },
+  { title: "Continuous Learning", description: "Our team stays updated with the latest in Ayurvedic medicine." },
+];
+
+const MissionAndValues = () => {
+  return (
+    <Card className="mb-12">
+      <CardHeader>
+        <CardTitle>Our Mission and Values</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-lg mb-6">
+          Our mission is to empower individuals to achieve optimal health and harmony through
+          the timeless wisdom of Ayurveda, delivered with compassion and expertise.
+        </p>
+        <div className="grid gap-4 md:grid-cols-2">
+          {values.map((value, index) => (
+            <div key={index} className="flex items-start">
+              <Image src="/assets/icons/check.svg" alt="Check" width={24} height={24} className="mr-2 mt-1" />
+              <div>
+                <h4 className="font-semibold">{value.title}</h4>
+                <p>{value.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default MissionAndValues;

client/components/page-components/landing/about/OurStory.tsx

@@ -0,0 +1,24 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+
+const OurStory = () => {
+  return (
+    <Card className="mb-12">
+      <CardHeader>
+        <CardTitle>Our Story</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-lg mb-4">
+          Founded in 2000 by Moyudu Gurikkal, Ayurveda Health Center began with a vision to spread the good power of nature and Ayurveda. Over the years, we have evolved into a comprehensive wellness center, dedicated to transforming lives through holistic health practices.
+        </p>
+        <p className="mb-8 indent-10 text-xl">
+          Ayurveda, the timeless science of life, offers a comprehensive and natural approach to health and well-being. Grounded in nature, it harmonizes the body, mind, and soul through customized therapies, herbal remedies, and mindful practices. We prioritize natural healing, avoiding allopathic medicines with potential side effects.
+        </p>
+        <p className="mb-4 indent-10 text-xl">
+          With over a century of rich heritage and expertise, we provide exceptional service rooted in tradition and excellence. Our facility also offers Kalari classes, preserving this ancient martial art as part of a holistic lifestyle. Embrace Ayurveda and Kalari with us for a balanced, vibrant life free from the drawbacks of modern medicine.
+        </p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default OurStory;

client/components/page-components/landing/about/WhyChooseUs.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+
+const WhyChooseUs = () => {
+  return (
+    <Card className="mb-12">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Image src="/assets/icons/stethoscope.svg" alt="Stethoscope" width={24} height={24} />
+          Why Choose Ayurveda Health Center?
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {[
+            "Expert Ayurvedic Physicians",
+            "Personalized Treatment Plans",
+            "State-of-the-art Facilities",
+            "Authentic Herbal Medicines",
+            "Holistic Wellness Programs",
+            "Ongoing Support and Education",
+          ].map((benefit, index) => (
+            <li key={index} className="flex items-center gap-2">
+              <Image src="/assets/icons/check.svg" alt="Check" width={24} height={24} />
+              {benefit}
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default WhyChooseUs;