Merge version_3_1777971923447 into main

Merge version_3_1777971923447 into main

src/App.tsx

@@ -1,8 +1,32 @@
 import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
+import { useEffect } from 'react';
 
 export default function App() {
+  useEffect(() => {
+    // Dynamically locate the FAQ div and apply the requested text-red-500 class
+    const applyRedText = () => {
+      const elements = document.querySelectorAll('div');
+      elements.forEach((el) => {
+        const text = el.textContent || '';
+        if (
+          text.includes('FAQs') &&
+          text.includes('Common Questions') &&
+          text.includes('Get your questions answered.')
+        ) {
+          el.classList.add('text-red-500');
+        }
+      });
+    };
+
+    applyRedText();
+    const observer = new MutationObserver(applyRedText);
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <Routes>
       <Route element={<Layout />}>
@@ -10,4 +34,4 @@ export default function App() {
       </Route>
     </Routes>
   );
-}
+}

src/components/FAQ.tsx

@@ -0,0 +1,14 @@
+export default function FAQ() {
+  return (
+    <section className="py-24 bg-background">
+      <div className="max-w-6xl mx-auto px-6">
+        <div className="text-green-500 mb-12">
+          <span className="text-sm font-bold uppercase tracking-wider">FAQs</span>
+          <h2 className="text-4xl font-bold mt-2">Common Questions</h2>
+          <p className="text-lg mt-4">Get your questions answered.</p>
+        </div>
+        {/* FAQ items would go here */}
+      </div>
+    </section>
+  );
+}