Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
5775d0f4bd | ||
|
|
96ee3d9d63 |
5
.gitignore
vendored
5
.gitignore
vendored
@ -1,3 +1,8 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
*/node_modules/
|
*/node_modules/
|
||||||
*/build/
|
*/build/
|
||||||
|
|
||||||
|
**/node_modules/
|
||||||
|
**/build/
|
||||||
|
.DS_Store
|
||||||
|
.env
|
||||||
File diff suppressed because one or more lines are too long
15
frontend/src/components/FooterPublic.tsx
Normal file
15
frontend/src/components/FooterPublic.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const FooterPublic: React.FC = () => (
|
||||||
|
<footer className="bg-gray-800 text-gray-200 py-6">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<p className="text-sm">© 2024 MFT SELF HELP GROUP. All rights reserved.</p>
|
||||||
|
<div className="mt-2 space-x-4">
|
||||||
|
<a href="/privacy-policy" className="hover:text-white text-sm">Privacy Policy</a>
|
||||||
|
<a href="/terms-of-use" className="hover:text-white text-sm">Terms of Use</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default FooterPublic;
|
||||||
27
frontend/src/components/HeaderPublic.tsx
Normal file
27
frontend/src/components/HeaderPublic.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
const HeaderPublic: React.FC = () => (
|
||||||
|
<header className="fixed top-0 left-0 w-full bg-white shadow z-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Link href="/">
|
||||||
|
<a>
|
||||||
|
<img src="/assets/logo.png" alt="Logo" className="h-8" />
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<nav className="hidden md:flex space-x-8">
|
||||||
|
<Link href="/"><a className="text-gray-700 hover:text-blue-600">Home</a></Link>
|
||||||
|
<Link href="/about"><a className="text-gray-700 hover:text-blue-600">About</a></Link>
|
||||||
|
<Link href="/contact"><a className="text-gray-700 hover:text-blue-600">Contact</a></Link>
|
||||||
|
</nav>
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
<Link href="/login"><a className="px-4 py-2 bg-blue-600 text-white rounded">Login as Member</a></Link>
|
||||||
|
<Link href="/login?role=official"><a className="px-4 py-2 border border-blue-600 text-blue-600 rounded">Login as Official</a></Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default HeaderPublic;
|
||||||
32
frontend/src/pages/about.tsx
Normal file
32
frontend/src/pages/about.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { ReactElement } from 'react';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import HeaderPublic from '../components/HeaderPublic';
|
||||||
|
import FooterPublic from '../components/FooterPublic';
|
||||||
|
|
||||||
|
export default function About() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>About | MFT Self Help Group</title>
|
||||||
|
<meta name="description" content="About MFT Self Help Group" />
|
||||||
|
</Head>
|
||||||
|
<HeaderPublic />
|
||||||
|
<main className="pt-16">
|
||||||
|
<section className="py-16 bg-gray-100">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 text-center">
|
||||||
|
<h1 className="text-3xl font-bold mb-4">About Us</h1>
|
||||||
|
<p className="text-lg text-gray-700">
|
||||||
|
MFT Self Help Group is a community-based financial cooperative that provides members with saving, lending, and welfare services.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<FooterPublic />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
About.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return page;
|
||||||
|
};
|
||||||
87
frontend/src/pages/contact.tsx
Normal file
87
frontend/src/pages/contact.tsx
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import type { ReactElement } from 'react';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import HeaderPublic from '../components/HeaderPublic';
|
||||||
|
import FooterPublic from '../components/FooterPublic';
|
||||||
|
|
||||||
|
export default function Contact() {
|
||||||
|
const [form, setForm] = useState({ name: '', email: '', message: '' });
|
||||||
|
const [status, setStatus] = useState<string | null>(null);
|
||||||
|
|
||||||
|
async function handleSubmit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setStatus(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/contactForm', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(form)
|
||||||
|
});
|
||||||
|
setStatus(res.ok ? 'Message sent successfully' : 'Failed to send message');
|
||||||
|
} catch {
|
||||||
|
setStatus('Failed to send message');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>Contact | MFT Self Help Group</title>
|
||||||
|
<meta name="description" content="Contact MFT Self Help Group" />
|
||||||
|
</Head>
|
||||||
|
<HeaderPublic />
|
||||||
|
<main className="pt-16">
|
||||||
|
<section className="py-16">
|
||||||
|
<div className="max-w-3xl mx-auto px-4">
|
||||||
|
<h1 className="text-3xl font-bold mb-4 text-center">Get in Touch</h1>
|
||||||
|
{status && <p className="text-center text-green-600 mb-4">{status}</p>}
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={form.name}
|
||||||
|
onChange={e => setForm({ ...form, name: e.target.value })}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded px-3 py-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
required
|
||||||
|
value={form.email}
|
||||||
|
onChange={e => setForm({ ...form, email: e.target.value })}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded px-3 py-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Message</label>
|
||||||
|
<textarea
|
||||||
|
required
|
||||||
|
value={form.message}
|
||||||
|
onChange={e => setForm({ ...form, message: e.target.value })}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded px-3 py-2 h-32"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="px-6 py-3 bg-blue-600 text-white rounded"
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<FooterPublic />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Contact.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return page;
|
||||||
|
};
|
||||||
@ -2,65 +2,85 @@ import React from 'react';
|
|||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import BaseButton from '../components/BaseButton';
|
import HeaderPublic from '../components/HeaderPublic';
|
||||||
import CardBox from '../components/CardBox';
|
import FooterPublic from '../components/FooterPublic';
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
|
||||||
import { useAppSelector } from '../stores/hooks';
|
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
||||||
|
|
||||||
export default function Starter() {
|
export default function Home() {
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
|
||||||
const title = 'MFT SELF HELP GROUP'
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>Home | MFT Self Help Group</title>
|
||||||
</Head>
|
<meta name="description" content="Welcome to MFT Self Help Group" />
|
||||||
|
</Head>
|
||||||
<SectionFullScreen bg='violet'>
|
<HeaderPublic />
|
||||||
<div className={`flex flex-row min-h-screen w-full`}>
|
<main className="pt-16">
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
{/* Hero Section */}
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
<section
|
||||||
<CardBoxComponentTitle title="Welcome to your MFT SELF HELP GROUP app!"/>
|
className="bg-cover bg-center"
|
||||||
|
style={{ backgroundImage: "url('/assets/hero-bg.jpg')" }}
|
||||||
<div className="space-y-3">
|
>
|
||||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
<div className="max-w-7xl mx-auto px-4 py-32 text-center">
|
||||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
<h1 className="text-4xl font-bold text-white mb-4">
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
Welcome to MFT Self Help Group
|
||||||
</div>
|
</h1>
|
||||||
|
<p className="text-xl text-white mb-8">
|
||||||
<BaseButtons>
|
Empowering members through community savings and loans.
|
||||||
<BaseButton
|
</p>
|
||||||
href='/login'
|
<div className="flex justify-center space-x-4">
|
||||||
label='Login'
|
<Link href="/login">
|
||||||
color='info'
|
<a className="px-6 py-3 bg-blue-600 text-white rounded">
|
||||||
className='w-full'
|
Login as Member
|
||||||
/>
|
</a>
|
||||||
|
</Link>
|
||||||
</BaseButtons>
|
<Link href="/login?role=official">
|
||||||
<div className='grid grid-cols-1 gap-2 lg:grid-cols-4 mt-2'>
|
<a className="px-6 py-3 border border-white text-white rounded">
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://react.dev/'>React.js</a></div>
|
Login as Official
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://tailwindcss.com/'>Tailwind CSS</a></div>
|
</a>
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://nodejs.org/en'>Node.js</a></div>
|
</Link>
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://flatlogic.com/forum'>Flatlogic Forum</a></div>
|
</div>
|
||||||
</div>
|
|
||||||
</CardBox>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</SectionFullScreen>
|
{/* Features Section */}
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
<section className="py-12">
|
||||||
<p className='py-6 text-sm'>© 2024 <span>{title}</span>. All rights reserved</p>
|
<div className="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
<div>
|
||||||
Privacy Policy
|
<h3 className="text-xl font-semibold mb-2">Member Management</h3>
|
||||||
</Link>
|
<p>Manage memberships easily.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">Loans & Contributions</h3>
|
||||||
|
<p>Apply and track loans and contributions.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">Financial Reports</h3>
|
||||||
|
<p>Generate PDF statements and reports.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/* About Section */}
|
||||||
|
<section className="py-12 bg-gray-100">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 text-center">
|
||||||
|
<h2 className="text-3xl font-bold mb-4">About Us</h2>
|
||||||
|
<p className="text-lg text-gray-700">
|
||||||
|
MFT Self Help Group is a community-based financial cooperative that provides members with saving and lending services.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/* Contact Section */}
|
||||||
|
<section className="py-12">
|
||||||
|
<div className="max-w-3xl mx-auto px-4 text-center">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">Get in Touch</h2>
|
||||||
|
<Link href="/contact">
|
||||||
|
<a className="underline text-blue-600">Contact Us</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<FooterPublic />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
Home.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return page;
|
||||||
};
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user