[rewrite] Updated main page

frontend/src/pages/auth/auth-layout.tsx

@@ -1,3 +1,5 @@
+import {AdminAppName} from "@/config/manifest"
+
 interface Props {
 	children: React.ReactNode;
 }
@@ -18,7 +20,7 @@ export default function AuthLayout({ children }: Props) {
 						className="mr-2 h-6 w-6">
 						<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
 					</svg>
-					<h1 className="text-xl font-medium">Shadcn Admin</h1>
+					<h1 className="text-xl font-medium">{AdminAppName}</h1>
 				</div>
 				{children}
 			</div>

frontend/src/pages/auth/sign-in/sign-in-2.tsx

@@ -1,5 +1,6 @@
 import ViteLogo from "@/assets/vite.svg";
 import { UserAuthForm } from "./components/user-auth-form";
+import { AdminAppName } from "@/config/manifest";
 
 export default function SignIn2() {
 	return (
@@ -18,7 +19,7 @@ export default function SignIn2() {
 						className="mr-2 h-6 w-6">
 						<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
 					</svg>
-					Shadcn Admin
+					{AdminAppName}
 				</div>
 
 				<img

frontend/src/pages/home/components/call-to-action.tsx

@@ -0,0 +1,11 @@
+import { Button } from "@/components/ui/button";
+
+export default function CallToAction() {
+    return (
+       <div className="text-center py-12">
+          <h2 className="text-3xl font-bold mb-4">Ready to Get Started?</h2>
+          <p className="mb-6 text-gray-600">Join today and start managing your shop with ease.</p>
+          <Button className="px-6 py-2">Sign Up Now</Button>
+       </div>
+    );
+ };

frontend/src/pages/home/components/faq.tsx

@@ -0,0 +1,25 @@
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger
+} from "@/components/ui/accordion";
+import { faqs } from "../data/faq-data";
+
+export default function FAQ() {
+	return (
+		<div className="mt-12 max-w-4xl">
+			<h2 id="faqs" className="mb-6 text-center text-3xl font-bold">
+				Frequently Asked Questions
+			</h2>
+			<Accordion type="single" collapsible>
+				{faqs.map((faq, index) => (
+					<AccordionItem key={index} value={`faq-${index}`}>
+						<AccordionTrigger>{faq.question}</AccordionTrigger>
+						<AccordionContent>{faq.answer}</AccordionContent>
+					</AccordionItem>
+				))}
+			</Accordion>
+		</div>
+	);
+}

frontend/src/pages/home/components/features.tsx

@@ -0,0 +1,19 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { features } from "../data/feature-data";
+
+export default function Features() {
+	return (
+		<div className="grid max-w-5xl gap-6 sm:grid-cols-2 lg:grid-cols-3">
+			{features.map((feature, index) => (
+				<Card key={index}>
+					<CardHeader>
+						<CardTitle>{feature.title}</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<p>{feature.description}</p>
+					</CardContent>
+				</Card>
+			))}
+		</div>
+	);
+}

frontend/src/pages/home/components/hero.tsx

@@ -0,0 +1,11 @@
+export default function Hero() {
+	return (
+		<section className="flex w-full max-w-4xl flex-grow flex-col items-center justify-center text-center">
+			<h1 className="mb-4 text-4xl font-bold">Manage Your Shop with Ease</h1>
+			<p className="mb-6 text-gray-600">
+				A powerful multitenant API for inventory and product management. Define
+				your products, manage stock, and handle purchases effortlessly.
+			</p>
+		</section>
+	);
+}

frontend/src/pages/home/components/pricing.tsx

@@ -0,0 +1,35 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { plans } from "../data/pricing-data";
+import { Button } from "@/components/ui/button";
+
+export default function Pricing() {
+	return (
+		<div className="max-w-4xl text-center">
+			<h2 id="pricing" className="mb-6 text-3xl font-bold">Pricing Plans</h2>
+			<p className="mb-6 text-gray-600">
+				Prices are subject to change. These estimates help guide your decision.
+			</p>
+			<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+				{plans.map((plan, index) => (
+					<Card key={index} className="p-4">
+						<CardHeader>
+							<CardTitle>{plan.title}</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<p className="mb-4 text-xl font-semibold">{plan.price}</p>
+							<p className="mb-4 text-gray-600">{plan.description}</p>
+							<ul className="mb-4 text-left">
+								{plan.features.map((feature, i) => (
+									<li key={i} className="list-inside list-disc text-sm">
+										{feature}
+									</li>
+								))}
+							</ul>
+							<Button>Choose Plan</Button>
+						</CardContent>
+					</Card>
+				))}
+			</div>
+		</div>
+	);
+}

frontend/src/pages/home/data/faq-data.ts

@@ -0,0 +1,15 @@
+export const faqs = [
+	{
+		question: "How do I get started?",
+		answer:
+			"Sign up for a free account and start integrating our API into your shop."
+	},
+	{
+		question: "Can I upgrade or downgrade my plan?",
+		answer: "Yes, you can change your plan anytime from your dashboard."
+	},
+	{
+		question: "Is there customer support?",
+		answer: "Yes, we offer different levels of support depending on your plan."
+	}
+];

frontend/src/pages/home/data/feature-data.ts

@@ -0,0 +1,31 @@
+export const features = [
+	{
+		title: "Inventory Control",
+		description:
+			"Easily manage product stock, availability, and updates in real time."
+	},
+	{
+		title: "Flexible API",
+		description:
+			"Build custom storefronts with a backend that adapts to your needs."
+	},
+	{
+		title: "Seamless Transactions",
+		description: "Handle purchases smoothly with minimal backend complexity."
+	},
+	{
+		title: "User Roles & Permissions",
+		description:
+			"Predefined roles (Owner, Manager, Employee) with different access levels to manage store operations efficiently."
+	},
+	{
+		title: "Multi-Currency Support",
+		description:
+			"Each shop can define its default currency to handle transactions in the appropriate financial context."
+	},
+	{
+		title: "Future-Ready Analytics",
+		description:
+			"Upcoming analytics and statistics to help businesses track performance and make data-driven decisions."
+	}
+];

frontend/src/pages/home/data/pricing-data.ts

@@ -0,0 +1,20 @@
+export const plans = [
+    {
+       title: "Free Plan",
+       price: "$0/month",
+       description: "Basic features for small shops starting out.",
+       features: ["Basic Inventory Management", "Limited API Requests", "Community Support"]
+    },
+    {
+       title: "Pro Plan",
+       price: "$29/month",
+       description: "For growing businesses needing more control.",
+       features: ["Advanced Inventory Management", "Higher API Limits", "Email Support"]
+    },
+    {
+       title: "Enterprise Plan",
+       price: "$99/month",
+       description: "For high-scale businesses requiring full access.",
+       features: ["Unlimited API Access", "Priority Support", "Custom Integrations"]
+    }
+ ];

frontend/src/pages/home/index.tsx

@@ -1,100 +1,26 @@
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Label } from "@/components/ui/label";
+import MainNavbar from "@/components/main-navbar";
+import Features from "./components/features";
+import Hero from "./components/hero";
+import Pricing from "./components/pricing";
+import FAQ from "./components/faq";
+import CallToAction from "./components/call-to-action";
 
 export default function MainPage() {
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [username, setUsername] = useState("");
-
 	return (
-		<div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 p-6">
-			{/* Showcase Section */}
-			<section className="mb-8 w-full max-w-4xl text-center">
-				<h1 className="mb-4 text-4xl font-bold">Welcome to Our Platform</h1>
-				<p className="mb-6 text-gray-600">
-					A place where you can explore, connect, and engage. Sign up or log in
-					to get started.
-				</p>
-				<Button className="px-6 py-2">Learn More</Button>
-			</section>
+		<>
+			<MainNavbar />
+			<div className="flex min-h-screen flex-col items-center justify-center overflow-hidden p-6 gap-24">
 
-			{/* Authentication Section */}
-			<Card className="w-full max-w-md">
-				<CardHeader>
-					<CardTitle>Join Us</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<Tabs defaultValue="login" className="w-full">
-						<TabsList className="grid w-full grid-cols-2">
-							<TabsTrigger value="login">Login</TabsTrigger>
-							<TabsTrigger value="register">Register</TabsTrigger>
-						</TabsList>
+				{/* Top screen padding */}
+				<div className="h-[20vh] min-h-[20vh]"></div>
+				<Hero />
+				<Features />
+				<Pricing />
+				<FAQ />
+				<CallToAction />
 
-						{/* Login Tab */}
-						<TabsContent value="login">
-							<form className="space-y-4">
-								<div>
-									<Label>Email</Label>
-									<Input
-										type="email"
-										value={email}
-										onChange={(e) => setEmail(e.target.value)}
-										placeholder="Enter your email"
-									/>
-								</div>
-								<div>
-									<Label>Password</Label>
-									<Input
-										type="password"
-										value={password}
-										onChange={(e) => setPassword(e.target.value)}
-										placeholder="Enter your password"
-									/>
-								</div>
-								<Button className="w-full">Login</Button>
-							</form>
-						</TabsContent>
-
-						{/* Register Tab */}
-						<TabsContent value="register">
-							<form className="space-y-4">
-								<div>
-									<Label>Username</Label>
-									<Input
-										type="text"
-										value={username}
-										onChange={(e) => setUsername(e.target.value)}
-										placeholder="Choose a username"
-									/>
-								</div>
-								<div>
-									<Label>Email</Label>
-									<Input
-										type="email"
-										value={email}
-										onChange={(e) => setEmail(e.target.value)}
-										placeholder="Enter your email"
-									/>
-								</div>
-								<div>
-									<Label>Password</Label>
-									<Input
-										type="password"
-										value={password}
-										onChange={(e) => setPassword(e.target.value)}
-										placeholder="Create a password"
-									/>
-								</div>
-								<Button className="w-full">Register</Button>
-							</form>
-						</TabsContent>
-					</Tabs>
-				</CardContent>
-			</Card>
-		</div>
+				{/* [Optional] Consider inserting an image or illustration here to reinforce the platform’s purpose. */}
+			</div>
+		</>
 	);
 }