FAQ + learn-more made responsive

Author: parthratra11

app/FAQ/page.tsx

@@ -1,30 +1,35 @@
-import { Metadata } from 'next'
-import FAQComponent from './component/faq-component'
-import ContactSection from './component/contact-section'
-import Navbar1 from '@/components/navbar'
-import Footer from '@/components/footer'
+import { Metadata } from "next";
+import FAQComponent from "./component/faq-component";
+import ContactSection from "./component/contact-section";
+import Navbar1 from "@/components/navbar";
+import Footer from "@/components/footer";
 
 export const metadata: Metadata = {
-  title: 'FAQ - Your Company Name',
-  description: 'Frequently Asked Questions about our products and services',
-}
+  title: "FAQ - Your Company Name",
+  description: "Frequently Asked Questions about our products and services",
+};
 
 export default function FAQPage() {
   return (
     <div className="min-h-screen space-y-12">
       <Navbar1 />
-      <div className="text-center mb-12">
+      <div className="text-center mb-12 px-4">
+        {/* Added x-padding */}
         <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold mb-4 text-purple-500" >Frequently Asked Questions</h1>
-          <p className="text-xl text-purple-600">Find answers to common questions about our products and services</p>
+          <h1 className="text-4xl font-bold mb-4 text-purple-500">
+            Frequently Asked Questions
+          </h1>
+          <p className="text-xl text-purple-600">
+            Find answers to common questions about our products and services
+          </p>
         </div>
         <FAQComponent />
-        <div className="rounded-lg text-center w-[50%] mx-auto">
+        <div className="rounded-lg text-center w-[100%] md:w-[60%] px-4 md:px-0 mx-auto">
+          {/* Changed width for small screens */}
           <ContactSection />
         </div>
       </div>
       <Footer />
     </div>
-  )
+  );
 }
-

app/learn-more/page.tsx

@@ -1,19 +1,20 @@
-'use client'
+"use client";
 
-import Link from 'next/link'
-import { motion } from 'framer-motion'
-import { TabContainer } from './components/TabContainer'
-import Navbar1 from '@/components/navbar'
-import Footer from '@/components/footer'
-import ShinyButton from '@/components/ui/shiny-button'
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { TabContainer } from "./components/TabContainer";
+import Navbar1 from "@/components/navbar";
+import Footer from "@/components/footer";
+import ShinyButton from "@/components/ui/shiny-button";
 
 export default function LearnMorePage() {
   return (
     <div className="">
       <Navbar1 />
       <div className="min-h-screen bg-grey-500 bg-texture">
-        <div className="container mx-auto px-32 py-16">
-          <motion.h1 
+        <div className="container mx-auto px-4 md:px-32 pb-16 pt-8 md:pt-16">
+          {/* Changed the x-padding for small devices + reduced y-padding-top for small devices */}
+          <motion.h1
             className="text-5xl font-bold text-center mb-8 text-white-800 dark:text-grey-300"
             initial={{ y: -20, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
@@ -24,25 +25,31 @@ export default function LearnMorePage() {
 
           <TabContainer />
 
-          <motion.div 
+          <motion.div
             className="text-center bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-lg p-8 shadow-lg mt-16"
             initial={{ y: 20, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ delay: 0.4, duration: 0.5 }}
           >
-            <h2 className="text-3xl font-bold mb-4 text-grey-800 dark:text-grey-300">Want to Contribute ?</h2>
-            <p className="text-xl mb-8 text-grey-700 dark:text-grey-200">Join hundreds of developers who have contributed to making LeetCode Journal better for everyone.</p>
+            <h2 className="text-3xl font-bold mb-4 text-grey-800 dark:text-grey-300">
+              Want to Contribute ?
+            </h2>
+            <p className="text-xl mb-8 text-grey-700 dark:text-grey-200">
+              Join hundreds of developers who have contributed to making
+              LeetCode Journal better for everyone.
+            </p>
             <ShinyButton>
               <Link
-                href='https://github.com/yashksaini-coder/Leetcode-Journal'
-                target='_blank'
-              >Contribute Now</Link>
-              </ShinyButton>
+                href="https://github.com/yashksaini-coder/Leetcode-Journal"
+                target="_blank"
+              >
+                Contribute Now
+              </Link>
+            </ShinyButton>
           </motion.div>
         </div>
       </div>
-      <Footer/>
+      <Footer />
     </div>
-  )
+  );
 }
-