Skip to content

Commit

Permalink
Changes: Revamp pages
Browse files Browse the repository at this point in the history
  • Loading branch information
Qodestackr committed Sep 5, 2023
1 parent cd62a41 commit 82829a1
Show file tree
Hide file tree
Showing 11 changed files with 231 additions and 40 deletions.
44 changes: 28 additions & 16 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,21 @@ import { Routes, Route } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools"; //y Devtools

import { UnderConstruction } from "@core/components";
import {
Tooltip,
TooltipTrigger,
TooltipContent,
TooltipProvider,
UnderConstruction,
} from "@core/components";
import Register from "@pages/register/Register";
import Login from "@pages/login/Login";
import Home from "@/pages/home/Home";
import ForgotPassword from "@/pages/forgot-password/ForgotPassword";
import DashboardHome from "@/pages/dashboard/DashboardHome";
import Billing from "@/pages/dashboard/screens/billing/Billing";
import RequestDemo from "./pages/request-demo/RequestDemo";
import { TableDemo } from "./core/components/table/TableTest";

const queryClient = new QueryClient({
defaultOptions: {
Expand Down Expand Up @@ -47,32 +55,36 @@ function App() {
return (
<QueryClientProvider client={queryClient}>
<Routes>
<Route path="/demo-request" element={<RequestDemo />} />
<Route path="/" element={<Home />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
<Route path="/forgot-password" element={<ForgotPassword />} />

{/* */}
<Route path="/dashboard" element={<DashboardHome />}>
<Route path="employees" element={<UnderConstruction />} />
<Route
path="employees"
element={/**<UnderConstruction /> */ <TableDemo />}
/>
<Route path="billing" element={<Billing />}>
<Route path="settings" element={<UnderConstruction />} />
</Route>
<Route path="payments" element={<UnderConstruction />}>
<Route path="balances" element={<UnderConstruction />} />
<Route path="bulk-payments" element={<UnderConstruction />} />
<Route path="statutory-payments" element={<UnderConstruction />} />
<Route path="account-statement" element={<UnderConstruction />} />
<Route path="payments" element={<TableDemo />}>
<Route path="balances" element={<TableDemo />} />
<Route path="bulk-payments" element={<TableDemo />} />
<Route path="statutory-payments" element={<TableDemo />} />
<Route path="account-statement" element={<TableDemo />} />
</Route>
<Route path="wallet" element={<UnderConstruction />} />
<Route path="messages" element={<UnderConstruction />} />
<Route path="departments" element={<UnderConstruction />} />
<Route path="events" element={<UnderConstruction />} />
<Route path="notice-board" element={<UnderConstruction />} />
<Route path="projects" element={<UnderConstruction />} />
<Route path="payroll" element={<UnderConstruction />} />
<Route path="documents" element={<UnderConstruction />} />
<Route path="backups" element={<UnderConstruction />} />
<Route path="wallet" element={<TableDemo />} />
<Route path="messages" element={<TableDemo />} />
<Route path="departments" element={<TableDemo />} />
<Route path="events" element={<TableDemo />} />
<Route path="notice-board" element={<TableDemo />} />
<Route path="projects" element={<TableDemo />} />
<Route path="payroll" element={<TableDemo />} />
<Route path="documents" element={<TableDemo />} />
<Route path="backups" element={<TableDemo />} />
</Route>
{/* */}

Expand Down
5 changes: 5 additions & 0 deletions src/core/components/label/Label.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from "react";

export default function Label() {
return <div>Label</div>;
}
9 changes: 6 additions & 3 deletions src/layouts/common/footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export default function Footer() {
<div className="flex gap-4 justify-between items-center">
{width <= 640 ? (
<div className=" w-full flex flex-col justify-center items-center">
<h2>PRIMARY</h2>
<ul className="w-full">
<li>
<Accordion type="multiple">
Expand All @@ -66,7 +65,9 @@ export default function Footer() {
</AccordionItem>

<AccordionItem value="item-2">
<AccordionTrigger>Product Links</AccordionTrigger>
<AccordionTrigger className="font-semibold">
Product Links
</AccordionTrigger>
<AccordionContent>
<ul>
{PRODUCTS_FOOTER_LINKS.map((link) => (
Expand All @@ -79,7 +80,9 @@ export default function Footer() {
</AccordionItem>

<AccordionItem value="item-3">
<AccordionTrigger>Service Links</AccordionTrigger>
<AccordionTrigger className="font-semibold">
Built For You
</AccordionTrigger>
<AccordionContent>
<ul>
{SERVICE_FOOTER_LINKS.map((link) => (
Expand Down
7 changes: 5 additions & 2 deletions src/layouts/common/hero/HeroSection.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from "react";
import HeroSectionIMG from "@assets/images/hero-section.png";
import { Button } from "@core/components";
import { Link } from "react-router-dom";

export default function HeroSection() {
return (
<section className="w-11/12 mx-auto">
<section className="container mx-auto">
{/* flex flex-col md:flex-row justify-between items-center gap-12 mt-2 */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
<div className="flex flex-col md:w-9/12">
Expand All @@ -18,7 +19,9 @@ export default function HeroSection() {
People.
</span>

<Button className="my-4">Book A Demo</Button>
<Link to="/demo-request">
<Button className="my-4">Book A Demo</Button>
</Link>
</div>

<div>
Expand Down
40 changes: 40 additions & 0 deletions src/layouts/common/mobile-section/MobileLayoutSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Button } from "@/core/components";
import React from "react";

export default function MobileLayoutSection() {
return (
<div className="container mx-auto flex flex-col my-3">
<div className="text-center my-4">
<h2 className="text-2xl my-2">Level Up With Mobile Management.</h2>
<p className="text-lg">
Manage your teams on the go! Stay on top of your game with a <br />
revolutionary mobile platform that gives you control of your team
anywhere, anytime.
</p>
</div>

{/* */}
<div className="flex flex-col md:flex-row justify-between items-center bg-slate-700 text-white p-12 md:p-28 rounded-lg">
<div>
<p className="text-xl md:text-3xl my-3">
500+ companies trust Workpay to <br />
automate their employee management
</p>
<p>Download the App on Google Play or the App Store.</p>

<div className="flex gap-4 my-4">
<Button>GET IT ON Google Play</Button>
<Button>Download on the AppStore</Button>
</div>
</div>

{/* */}
<div>
MOBILE IMAGE
<img src="" alt="" />
</div>
{/* */}
</div>
</div>
);
}
2 changes: 1 addition & 1 deletion src/layouts/dashboard-layouts/DashboardNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function DashboardNav() {
className="py-2 text-white bg-red-400 hover:bg-red-200
hover:text-white hover:cursor-pointer"
>
Plan Activation is Required
Plan Activation Required
</Badge>

<div className="flex items-center">
Expand Down
2 changes: 2 additions & 0 deletions src/pages/dashboard/DashboardHome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ function DashboardHome() {

<div className="bg-gray-100">
<DashboardNav />
<h3 className="text-2xl">Welcome Back</h3>
{/* Cannot remove the Outlet yet I need render some defaults... Show the way */}
<div className="shadow-md rounded-md">
<Outlet />
</div>
Expand Down
3 changes: 3 additions & 0 deletions src/pages/home/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Footer from "@/layouts/common/footer/Footer";
import HeroSection from "@/layouts/common/hero/HeroSection";
import MobileLayoutSection from "@/layouts/common/mobile-section/MobileLayoutSection";
import Nav from "@/layouts/common/nav/Nav";
import PricingSection from "@/layouts/default-pricing-section/PricingSection";
import Features from "@layouts/home-layouts/Features";
Expand All @@ -11,6 +12,8 @@ export default function Home() {
<HeroSection />
<Features />
<PricingSection />
<MobileLayoutSection />

<Footer />
</>
);
Expand Down
154 changes: 137 additions & 17 deletions src/pages/request-demo/RequestDemo.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,145 @@
import { useForm } from "react-hook-form";
import { useNavigate } from "@core/hooks";

import { Input } from "@core/components/input/Input";
import { Button } from "@/core/components";

import { useSignUpMutation } from "@api/services/authApi";
import { ReactNode } from "react";
import { Link } from "react-router-dom";

function RequestDemo() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();

const signUpMutation = useSignUpMutation();
const navigate = useNavigate(); //

const requestDemoHandler = async (data: any) => {
try {
console.log(data);
// await signUpMutation.mutateAsync(data);

console.log("User registered successfully");
/*** */
setTimeout(() => {
navigate("/dashboard");
}, 2000);
/**** */
} catch (error) {
console.error("Registration error:", error);
}
};

return (
<section id="request-demo">
<h2>Request a Demo Today!</h2>
<p>
The modern solution for HR, Payroll, Compliance, and Benefits built for
local and remote teams.
</p>
{/*
Form: FullName
Email
Company Name
Number of Employees
Phone Number(+254:.....)
How did you hear about us? : Search Engine, Social Media, Ads, Blog Post, TV, Events, Referral

- Terms & privacy checkboc
Submit
*/}
<div className="w-10/12 md:w-8/12 mx-auto">
<h2 className="font-medium text-3xl">Request a Demo Today!</h2>
<p>
The modern solution for HR, Payroll, Compliance, and Benefits built{" "}
<br /> for local and remote teams.
</p>
<form className="" onSubmit={handleSubmit(requestDemoHandler)}>
<div className="mb-2">
<Input
label="FullName"
type="text"
placeholder="Full Name"
{...register("fullName", { required: "This field is required" })}
/>
{errors.fullName && (
<p className="text-red-500 mt-[-10px]">
{errors.fullName.message as ReactNode}
</p>
)}
</div>
<div className="mb-2">
<Input
label="Email"
type="email"
placeholder="Email"
{...register("password", { required: "Email is required" })}
/>
{errors.password && (
<p className="text-red-500 mt-[-10px]">
{errors.password.message as ReactNode}
</p>
)}
</div>

<div className="mb-2">
<Input
label="Company Name"
type="text"
placeholder="Company Name"
{...register("password", {
required: "Company Name is required",
})}
/>
{errors.password && (
<p className="text-red-500 mt-[-10px]">
{errors.password.message as ReactNode}
</p>
)}
</div>

<div className="mb-2">
<Input
label="Number of Employees"
type="number"
placeholder="Number of Employees"
{...register("password", { required: "Email is required" })}
/>
{errors.password && (
<p className="text-red-500 mt-[-10px]">
{errors.password.message as ReactNode}
</p>
)}
</div>

<div className="mb-2">
<Input
label="Phone Number"
type="tel"
placeholder="254700652437"
{...register("password", { required: "Phone is required" })}
/>
{errors.password && (
<p className="text-red-500 mt-[-10px]">
{errors.password.message as ReactNode}
</p>
)}
</div>

<div className="mb-2">
<Input
label="How did You Hear about Us?"
type="text"
placeholder="Type Here..."
{...register("password", { required: "This field is required" })}
/>
{errors.password && (
<p className="text-red-500 mt-[-10px]">
{errors.password.message as ReactNode}
</p>
)}
</div>

<div>
<input type="checkbox" name="" id="" className="my-4" />
<label className="mx-2"> Accept terms and privacy policy</label>
</div>

<Button type="submit" className="w-full md:w-4/12">
{signUpMutation.isLoading ? "..." : "Book Demo"}
</Button>
</form>
</div>
</section>
);
}

export default RequestDemo
export default RequestDemo;
4 changes: 3 additions & 1 deletion src/routes/index.routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,16 @@ import Home from "@/pages/home/Home";
import ForgotPassword from "@/pages/forgot-password/ForgotPassword";
import DashboardHome from "@/pages/dashboard/DashboardHome";
import Billing from "@/pages/dashboard/screens/billing/Billing";
import RequestDemo from "@/pages/request-demo/RequestDemo";

const routes = (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
<Route path="/forgot-password" element={<ForgotPassword />} />
<Route path="/demo-request" element={<Login />} />

<Route path="/dashboard" element={<DashboardHome />}>
<Route path="employees" element={<UnderConstruction />} />
<Route path="billing" element={<Billing />}>
Expand All @@ -75,7 +78,6 @@ const routes = (
<Route path="statutory-payments" element={<UnderConstruction />} />
<Route path="account-statement" element={<UnderConstruction />} />
</Route>
{/* Add more nested routes for dashboard */}
</Route>
<Route path="*" element={<UnderConstruction />} />
</Routes>
Expand Down
Loading

0 comments on commit 82829a1

Please sign in to comment.