From 2f5fd43f50d29be691db8dc623728d4792cde0b3 Mon Sep 17 00:00:00 2001
From: Arya Pratap Singh <notaryasingh@gmail.com>
Date: Wed, 19 Feb 2025 19:37:38 +0530
Subject: [PATCH] fix: get started button in about page

Signed-off-by: Arya Pratap Singh <notaryasingh@gmail.com>
---
 front-end/src/components/Centre.jsx |  2 +-
 front-end/src/pages/About.jsx       | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/front-end/src/components/Centre.jsx b/front-end/src/components/Centre.jsx
index cacca6c..1ebe1b1 100644
--- a/front-end/src/components/Centre.jsx
+++ b/front-end/src/components/Centre.jsx
@@ -191,7 +191,7 @@ function Centre() {
         </div>
       </section>
 
-      <section className="relative py-16 overflow-hidden">
+      <section id="how-to-get-started" className="relative py-16 overflow-hidden">
         <div className="relative container mx-auto px-4">
           <div className="max-w-3xl mx-auto text-center">
             <h2
diff --git a/front-end/src/pages/About.jsx b/front-end/src/pages/About.jsx
index 75bc900..7cda4a9 100644
--- a/front-end/src/pages/About.jsx
+++ b/front-end/src/pages/About.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { Heart, Users, Sparkles, BookOpen, ArrowRight } from "lucide-react";
+import { Link } from "react-router-dom";
 
 const About = () => {
   const [isVisible, setIsVisible] = useState(false);
@@ -219,10 +220,12 @@ const About = () => {
           <p className="text-xl mb-8 opacity-90">
             Join our community of writers and readers today.
           </p>
-          <button className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold flex items-center gap-2 mx-auto hover:bg-blue-50 transition-colors duration-300">
-            Get Started
-            <ArrowRight className="w-5 h-5" />
-          </button>
+          <Link to="/#how-to-get-started">
+            <button className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold flex items-center gap-2 mx-auto hover:bg-blue-50 transition-colors duration-300">
+              Get Started
+              <ArrowRight className="w-5 h-5" />
+            </button>
+          </Link>
         </div>
       </div>
     </div>