Merge pull request #162 from komal-agarwal5/komal

About us

src/app/about/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import About from '@/components/about/About'
+const page = () => {
+  return (
+    <div>
+      <About/>
+    </div>
+  )
+}
+
+export default page

src/components/about/About.css

@@ -0,0 +1,153 @@
+/* Container */
+.about-container {
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Hero Section */
+.about-hero {
+    /* background: linear-gradient(135deg, #e0f7fa, #f1f8e9); */
+    text-align: center;
+    padding: 80px 20px;
+    border-radius: 12px;
+    color: #2c3e50;
+}
+
+.about-hero h1 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+.about-hero p {
+    font-size: 1.2rem;
+    line-height: 1.6;
+    margin-bottom: 0;
+    color: #2c3e50;
+}
+
+/* Sections */
+.section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 30px;
+    margin: 40px 0;
+    padding: 40px 20px;
+    border-radius: 12px;
+    background-color: #fafafa;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.section-content {
+    flex: 1;
+    font-size:x-large;
+    margin: 10px;
+    padding: 10px;
+}
+
+.section img {
+    width: 40%;
+    height: auto;
+    border-radius: 12px;
+    object-fit: cover;
+}
+.section-content p{
+    color: #11181f;
+    font-size: large;
+    line-height:30px;
+    margin-top: 20px;
+}
+
+/* Problem Section */
+.problem-section {
+    background: #e8f5e9;
+}
+
+.solution-section {
+    background: #e3f2fd;
+}
+
+/* Discover Section */
+.discover-section {
+    background: linear-gradient(135deg, #ffdde1, #ee9ca7);
+    text-align: center;
+    padding: 60px 20px;
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.discover-section h2 {
+    font-size: 2.2rem;
+    margin-bottom: 40px;
+}
+
+.discover-list {
+    list-style-type: none;
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+
+.discover-list li {
+    background: white;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+    transition: transform 0.2s ease-in-out;
+}
+
+.discover-list li:hover {
+    transform: translateY(-5px);
+}
+
+.discover-list li strong {
+    color: #e91e63;
+    font-weight: 600;
+}
+
+/* User Section */
+.user-section {
+    background: #f0f4c3;
+    text-align: center;
+    padding: 60px 20px;
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+    font-style: italic;
+}
+
+.user-section h2 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+}
+
+.user-section p {
+    font-size: 1.2rem;
+    line-height: 1.6;
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+    .section {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .section img {
+        width: 80%;
+    }
+
+    .discover-list {
+        grid-template-columns: 1fr;
+    }
+
+    .about-hero h1 {
+        font-size: 2rem;
+    }
+
+    .about-hero p {
+        font-size: 1rem;
+    }
+}

src/components/about/About.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import "./About.css";
+
+const AboutUs: React.FC = () => {
+  return (
+    <div className="about-container">
+      {/* Hero Section */}
+      <div className="about-hero">
+        <div className="hero-content">
+          <h1>Welcome to the Uttarakhand Culture Preservation Project</h1>
+          <p>
+            Explore and preserve the cultural richness of Uttarakhand with us.
+            We provide a digital platform to share the traditions, history, and
+            natural beauty of the region, making it accessible for everyone.
+          </p>
+        </div>
+      </div>
+
+      {/* Problem Section */}
+      <div className="section problem-section">
+        <img
+          src="/about1.png"
+          alt="Cultural heritage issue"
+          className="section-image-left"
+        />
+        <div className="section-content">
+          <h2>The Problem</h2>
+          <p>
+            Uttarakhand{"'"}s cultural heritage is at risk of being forgotten
+            as younger generations move away from their roots. If not preserved,
+            these traditions might disappear, leaving future generations without
+            a connection to their past.
+          </p>
+        </div>
+      </div>
+
+      {/* Solution Section */}
+      <div className="section solution-section">
+        <div className="section-content">
+          <h2>Our Solution</h2>
+          <p>
+            We digitize Uttarakhand’s cultural knowledge to ensure it’s
+            preserved and passed down. By leveraging technology, we make it easy
+            for the younger generation to access, learn, and engage with their
+            rich heritage.
+          </p>
+        </div>
+        <img
+          src="/about2.png"
+          alt="Digital platform"
+          className="section-image-right"
+        />
+      </div>
+
+      {/* Discover Section */}
+      <div className="section discover-section">
+        <h2>Discover Uttarakhand’s Cultural Wealth</h2>
+        <ul className="discover-list">
+          <li>
+            <strong>Language:</strong> Kumaoni, Garhwali, Jaunsari
+          </li>
+          <li>
+            <strong>Cultural Stories:</strong> Historical kings, famous
+            personalities
+          </li>
+          <li>
+            <strong>History:</strong> Uttarakhand’s past, movements, and leaders
+          </li>
+          <li>
+            <strong>Spiritual Heritage:</strong> Temples, deities, architectural
+            wonders
+          </li>
+          <li>
+            <strong>Cuisine:</strong> Authentic recipes and traditional methods
+          </li>
+          <li>
+            <strong>Festivals & Events:</strong> Upcoming cultural festivals and
+            fairs
+          </li>
+          <li>
+            <strong>Art & Craft:</strong> Traditional art, handicrafts, and
+            artisans
+          </li>
+          <li>
+            <strong>Music & Dance:</strong> Regional music, instruments, and
+            dances
+          </li>
+          <li>
+            <strong>Nature:</strong> Flora, fauna, rivers, mountains
+          </li>
+        </ul>
+      </div>
+
+      {/* User-Suggested Features Section */}
+      <div className="section user-section">
+        <div className="section-content">
+          <h2>Your Voice Matters</h2>
+          <p>
+            Have a suggestion for our platform? Send us an email or submit a
+            feature idea, and we’ll consider incorporating it to enhance our
+            platform.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;

src/components/ui/Footer.tsx

@@ -40,7 +40,7 @@ export default function Footer() {
                     <div className={styles["footer-right-link-container"]} >
                         <p>Contribution</p>
                         <Link href={""}>Issues</Link>
-                        <Link href={"https://github.com/Uttarakhand-Culture/Frontend/blob/main/README.md"}>About us</Link>
+                        <Link href={"/about"}>About us</Link>
                         <Link href={""}>Contribution</Link>
                     </div>
                 </div>