Scaffold support page

apps/web/src/app/about/page.tsx

@@ -0,0 +1,9 @@
+const AboutPage = () => {
+	return (
+		<div>
+			<h1>About</h1>
+		</div>
+	);
+};
+
+export default AboutPage;

apps/web/src/app/support/page.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+const SupportPage = () => {
+	return (
+		<div className='container mx-auto px-4 py-8'>
+			<h1 className='text-3xl font-bold mb-6'>Support</h1>
+			<p className='mb-4'>
+				If you need assistance with Habiti, please don&apos;t hesitate to
+				contact us. We&apos;re here to help!
+			</p>
+			<h2 className='text-2xl font-semibold mb-4'>Contact Information</h2>
+			<ul className='list-disc list-inside mb-6'>
+				<li>Email: [email protected]</li>
+				{/* <li>Phone: +1 (555) 123-4567</li> */}
+				<li>Hours: Monday - Friday, 9:00 AM - 5:00 PM EST</li>
+			</ul>
+			<h2 className='text-2xl font-semibold mb-4'>
+				Frequently Asked Questions
+			</h2>
+			<div className='space-y-4'>
+				<div>
+					<h3 className='text-xl font-medium mb-2'>
+						How do I reset my password?
+					</h3>
+					<p>
+						To reset your password, go to the login page and click on the
+						&quot;Forgot Password link.&quot; Follow the instructions sent to
+						your email to create a new password.
+					</p>
+				</div>
+				<div>
+					<h3 className='text-xl font-medium mb-2'>
+						How can I update my payment information?
+					</h3>
+					<p>
+						You can update your payment information in the app by going to
+						Settings &gt; Payment Methods. From there, you can add, edit, or
+						remove payment methods.
+					</p>
+				</div>
+				<div>
+					<h3 className='text-xl font-medium mb-2'>
+						What should I do if I encounter a bug?
+					</h3>
+					<p>
+						If you encounter a bug, please report it to our support team via
+						email at [email protected]. Include as much detail as possible,
+						including steps to reproduce the issue and any error messages you
+						received.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default SupportPage;

apps/web/src/components/home/Footer.tsx

@@ -1,8 +1,42 @@
+import Link from 'next/link';
+
 const Footer = () => {
 	return (
-		<footer style={{ padding: 16 }}>
-			<div>
-				<p>&copy; {new Date().getFullYear()} Habiti.</p>
+		<footer className='bg-gray-100 py-8'>
+			<div className='container mx-auto px-4'>
+				<div className='flex flex-wrap justify-between'>
+					<div className='w-full md:w-1/3 mb-6 md:mb-0'>
+						<h3 className='text-lg font-semibold mb-2'>Habiti</h3>
+						<p className='text-sm text-gray-600'>
+							Simplifying online shopping for everyone.
+						</p>
+					</div>
+					<div className='w-full md:w-1/3 mb-6 md:mb-0'>
+						<h3 className='text-lg font-semibold mb-2'>Quick Links</h3>
+						<ul className='text-sm'>
+							<li className='mb-2'>
+								<Link href='/'>Home</Link>
+							</li>
+							<li className='mb-2'>
+								<Link href='/about'>About</Link>
+							</li>
+							<li className='mb-2'>
+								<Link href='/privacy-policy'>Privacy Policy</Link>
+							</li>
+							<li className='mb-2'>
+								<Link href='/support'>Support</Link>
+							</li>
+						</ul>
+					</div>
+					<div className='w-full md:w-1/3'>
+						<h3 className='text-lg font-semibold mb-2'>Contact Us</h3>
+						<p className='text-sm text-gray-600'>Email: [email protected]</p>
+						<p className='text-sm text-gray-600'>Phone: +1 (555) 123-4567</p>
+					</div>
+				</div>
+				<div className='mt-8 text-center text-sm text-gray-600'>
+					© {new Date().getFullYear()} Habiti. All rights reserved.
+				</div>
 			</div>
 		</footer>
 	);