Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
869e9adfdd |
72
frontend/src/components/Matches/MatchesWidget.tsx
Normal file
72
frontend/src/components/Matches/MatchesWidget.tsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import CardBox from '../CardBox';
|
||||||
|
import BaseIcon from '../BaseIcon';
|
||||||
|
import { mdiHandshake, mdiMagnify } from '@mdi/js';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
const MatchesWidget = () => {
|
||||||
|
const [matches, setMatches] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchMatches = async () => {
|
||||||
|
try {
|
||||||
|
// Fetch matches for the user
|
||||||
|
const response = await axios.get('/matches');
|
||||||
|
// If no real matches, show some "Potential Partners" (Agribusinesses)
|
||||||
|
if (response.data.rows && response.data.rows.length > 0) {
|
||||||
|
setMatches(response.data.rows.slice(0, 3));
|
||||||
|
} else {
|
||||||
|
const agriResponse = await axios.get('/agribusinesses');
|
||||||
|
setMatches(agriResponse.data.rows.slice(0, 3).map(agri => ({
|
||||||
|
id: agri.id,
|
||||||
|
summary: `Potential match with ${agri.name}`,
|
||||||
|
status: 'potential',
|
||||||
|
agribusiness: agri
|
||||||
|
})));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching matches:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchMatches();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) return <div>Loading matches...</div>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CardBox className="h-full">
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<h3 className="text-lg font-bold flex items-center gap-2">
|
||||||
|
<BaseIcon path={mdiHandshake} size={20} className="text-[#2D5A27]" />
|
||||||
|
Matchmaking
|
||||||
|
</h3>
|
||||||
|
<Link href="/matches/matches-list" className="text-sm text-blue-600 font-medium">View all</Link>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{matches.length > 0 ? (
|
||||||
|
matches.map((match: any) => (
|
||||||
|
<div key={match.id} className="p-3 bg-stone-50 rounded-lg border border-stone-100 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold text-sm">{match.summary || `Partner: ${match.agribusiness?.name}`}</p>
|
||||||
|
<p className="text-xs text-gray-500">{match.status || 'Active'}</p>
|
||||||
|
</div>
|
||||||
|
<Link href={`/matches/matches-list`}>
|
||||||
|
<BaseIcon path={mdiMagnify} size={20} className="text-gray-400" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-500 text-sm italic">No matches found yet. Post a listing to get started!</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MatchesWidget;
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
import * as icon from '@mdi/js';
|
import * as icon from '@mdi/js';
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
@ -14,8 +15,12 @@ import { hasPermission } from "../helpers/userPermissions";
|
|||||||
import { fetchWidgets } from '../stores/roles/rolesSlice';
|
import { fetchWidgets } from '../stores/roles/rolesSlice';
|
||||||
import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
|
import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
|
||||||
import { SmartWidget } from '../components/SmartWidget/SmartWidget';
|
import { SmartWidget } from '../components/SmartWidget/SmartWidget';
|
||||||
|
import MatchesWidget from '../components/Matches/MatchesWidget';
|
||||||
|
import CardBox from '../components/CardBox';
|
||||||
|
import BaseButton from '../components/BaseButton';
|
||||||
|
|
||||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
||||||
@ -24,46 +29,30 @@ const Dashboard = () => {
|
|||||||
|
|
||||||
const loadingMessage = 'Loading...';
|
const loadingMessage = 'Loading...';
|
||||||
|
|
||||||
|
const [listingsCount, setListingsCount] = React.useState(loadingMessage);
|
||||||
|
const [matchesCount, setMatchesCount] = React.useState(loadingMessage);
|
||||||
|
const [messagesCount, setMessagesCount] = React.useState(loadingMessage);
|
||||||
|
const [dealsCount, setDealsCount] = React.useState(loadingMessage);
|
||||||
|
|
||||||
const [users, setUsers] = React.useState(loadingMessage);
|
|
||||||
const [roles, setRoles] = React.useState(loadingMessage);
|
|
||||||
const [permissions, setPermissions] = React.useState(loadingMessage);
|
|
||||||
const [organizations, setOrganizations] = React.useState(loadingMessage);
|
|
||||||
const [agribusinesses, setAgribusinesses] = React.useState(loadingMessage);
|
|
||||||
const [categories, setCategories] = React.useState(loadingMessage);
|
|
||||||
const [listings, setListings] = React.useState(loadingMessage);
|
|
||||||
const [matches, setMatches] = React.useState(loadingMessage);
|
|
||||||
const [conversations, setConversations] = React.useState(loadingMessage);
|
|
||||||
const [messages, setMessages] = React.useState(loadingMessage);
|
|
||||||
const [attachments, setAttachments] = React.useState(loadingMessage);
|
|
||||||
const [notifications, setNotifications] = React.useState(loadingMessage);
|
|
||||||
const [deals, setDeals] = React.useState(loadingMessage);
|
|
||||||
|
|
||||||
|
|
||||||
const [widgetsRole, setWidgetsRole] = React.useState({
|
|
||||||
role: { value: '', label: '' },
|
|
||||||
});
|
|
||||||
const { currentUser } = useAppSelector((state) => state.auth);
|
const { currentUser } = useAppSelector((state) => state.auth);
|
||||||
const { isFetchingQuery } = useAppSelector((state) => state.openAi);
|
const { isFetchingQuery } = useAppSelector((state) => state.openAi);
|
||||||
|
|
||||||
const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
|
const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
|
||||||
|
|
||||||
|
const [widgetsRole, setWidgetsRole] = React.useState({
|
||||||
const organizationId = currentUser?.organizations?.id;
|
role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name },
|
||||||
|
});
|
||||||
|
|
||||||
async function loadData() {
|
async function loadData() {
|
||||||
const entities = ['users','roles','permissions','organizations','agribusinesses','categories','listings','matches','conversations','messages','attachments','notifications','deals',];
|
const entities = ['listings', 'matches', 'messages', 'deals'];
|
||||||
const fns = [setUsers,setRoles,setPermissions,setOrganizations,setAgribusinesses,setCategories,setListings,setMatches,setConversations,setMessages,setAttachments,setNotifications,setDeals,];
|
const fns = [setListingsCount, setMatchesCount, setMessagesCount, setDealsCount];
|
||||||
|
|
||||||
const requests = entities.map((entity, index) => {
|
const requests = entities.map((entity, index) => {
|
||||||
|
|
||||||
if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
|
if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
|
||||||
return axios.get(`/${entity.toLowerCase()}/count`);
|
return axios.get(`/${entity.toLowerCase()}/count`);
|
||||||
} else {
|
} else {
|
||||||
fns[index](null);
|
fns[index](null);
|
||||||
return Promise.resolve({data: {count: null}});
|
return Promise.resolve({data: {count: null}});
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
Promise.allSettled(requests).then((results) => {
|
Promise.allSettled(requests).then((results) => {
|
||||||
@ -80,6 +69,7 @@ const Dashboard = () => {
|
|||||||
async function getWidgets(roleId) {
|
async function getWidgets(roleId) {
|
||||||
await dispatch(fetchWidgets(roleId));
|
await dispatch(fetchWidgets(roleId));
|
||||||
}
|
}
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!currentUser) return;
|
if (!currentUser) return;
|
||||||
loadData().then();
|
loadData().then();
|
||||||
@ -101,25 +91,79 @@ const Dashboard = () => {
|
|||||||
<SectionMain>
|
<SectionMain>
|
||||||
<SectionTitleLineWithButton
|
<SectionTitleLineWithButton
|
||||||
icon={icon.mdiChartTimelineVariant}
|
icon={icon.mdiChartTimelineVariant}
|
||||||
title='Overview'
|
title='AgriMatch Dashboard'
|
||||||
main>
|
main>
|
||||||
{''}
|
{''}
|
||||||
</SectionTitleLineWithButton>
|
</SectionTitleLineWithButton>
|
||||||
|
|
||||||
{hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
|
{/* Quick Stats */}
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||||
|
<CardBox className="p-4 flex items-center gap-4">
|
||||||
|
<div className="p-3 bg-green-100 rounded-full text-green-700">
|
||||||
|
<BaseIcon path={icon.mdiClipboardList} size={24} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Listings</p>
|
||||||
|
<p className="text-xl font-bold">{listingsCount}</p>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
<CardBox className="p-4 flex items-center gap-4">
|
||||||
|
<div className="p-3 bg-blue-100 rounded-full text-blue-700">
|
||||||
|
<BaseIcon path={icon.mdiHandshake} size={24} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Matches</p>
|
||||||
|
<p className="text-xl font-bold">{matchesCount}</p>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
<CardBox className="p-4 flex items-center gap-4">
|
||||||
|
<div className="p-3 bg-yellow-100 rounded-full text-yellow-700">
|
||||||
|
<BaseIcon path={icon.mdiMessageText} size={24} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Messages</p>
|
||||||
|
<p className="text-xl font-bold">{messagesCount}</p>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
<CardBox className="p-4 flex items-center gap-4">
|
||||||
|
<div className="p-3 bg-purple-100 rounded-full text-purple-700">
|
||||||
|
<BaseIcon path={icon.mdiCash} size={24} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Deals</p>
|
||||||
|
<p className="text-xl font-bold">{dealsCount}</p>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<MatchesWidget />
|
||||||
|
</div>
|
||||||
|
<CardBox className="bg-[#2D5A27] text-white">
|
||||||
|
<h3 className="text-lg font-bold mb-4">Market Insights</h3>
|
||||||
|
<p className="text-sm text-white/80 mb-6">
|
||||||
|
Maize prices are up 12% in your region. Consider listing your harvest now to match with high-demand traders.
|
||||||
|
</p>
|
||||||
|
<BaseButton
|
||||||
|
href="/listings/listings-new"
|
||||||
|
label="Create Listing"
|
||||||
|
color="white"
|
||||||
|
className="w-full font-bold text-[#2D5A27]"
|
||||||
|
/>
|
||||||
|
</CardBox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Existing AI Widgets */}
|
||||||
|
{hasPermission(currentUser, 'CREATE_ROLES') && (
|
||||||
|
<div className="mt-8">
|
||||||
|
<WidgetCreator
|
||||||
currentUser={currentUser}
|
currentUser={currentUser}
|
||||||
isFetchingQuery={isFetchingQuery}
|
isFetchingQuery={isFetchingQuery}
|
||||||
setWidgetsRole={setWidgetsRole}
|
setWidgetsRole={setWidgetsRole}
|
||||||
widgetsRole={widgetsRole}
|
widgetsRole={widgetsRole}
|
||||||
/>}
|
/>
|
||||||
{!!rolesWidgets.length &&
|
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense mt-4'>
|
||||||
hasPermission(currentUser, 'CREATE_ROLES') && (
|
|
||||||
<p className=' text-gray-500 dark:text-gray-400 mb-4'>
|
|
||||||
{`${widgetsRole?.role?.label || 'Users'}'s widgets`}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
|
|
||||||
{(isFetchingQuery || loading) && (
|
{(isFetchingQuery || loading) && (
|
||||||
<div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
|
<div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
|
||||||
<BaseIcon
|
<BaseIcon
|
||||||
@ -132,9 +176,7 @@ const Dashboard = () => {
|
|||||||
Loading widgets...
|
Loading widgets...
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{ rolesWidgets && rolesWidgets.map((widget) => (
|
||||||
{ rolesWidgets &&
|
|
||||||
rolesWidgets.map((widget) => (
|
|
||||||
<SmartWidget
|
<SmartWidget
|
||||||
key={widget.id}
|
key={widget.id}
|
||||||
userId={currentUser?.id}
|
userId={currentUser?.id}
|
||||||
@ -144,378 +186,8 @@ const Dashboard = () => {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!!rolesWidgets.length && <hr className='my-6 text-pastelBrownTheme-mainBG ' />}
|
|
||||||
|
|
||||||
<div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
|
|
||||||
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Users
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{users}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={icon.mdiAccountGroup || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Roles
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{roles}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Permissions
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{permissions}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={icon.mdiShieldAccountOutline || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_ORGANIZATIONS') && <Link href={'/organizations/organizations-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Organizations
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{organizations}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_AGRIBUSINESSES') && <Link href={'/agribusinesses/agribusinesses-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Agribusinesses
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{agribusinesses}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiFactory' in icon ? icon['mdiFactory' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_CATEGORIES') && <Link href={'/categories/categories-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Categories
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{categories}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiTag' in icon ? icon['mdiTag' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_LISTINGS') && <Link href={'/listings/listings-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Listings
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{listings}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiClipboardList' in icon ? icon['mdiClipboardList' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_MATCHES') && <Link href={'/matches/matches-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Matches
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{matches}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiHandshake' in icon ? icon['mdiHandshake' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_CONVERSATIONS') && <Link href={'/conversations/conversations-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Conversations
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{conversations}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiChat' in icon ? icon['mdiChat' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_MESSAGES') && <Link href={'/messages/messages-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Messages
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{messages}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiMessageText' in icon ? icon['mdiMessageText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_ATTACHMENTS') && <Link href={'/attachments/attachments-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Attachments
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{attachments}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiPaperclip' in icon ? icon['mdiPaperclip' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_NOTIFICATIONS') && <Link href={'/notifications/notifications-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Notifications
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{notifications}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiBell' in icon ? icon['mdiBell' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_DEALS') && <Link href={'/deals/deals-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Deals
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{deals}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiCash' in icon ? icon['mdiCash' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</SectionMain>
|
</SectionMain>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,166 +1,195 @@
|
|||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } 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 BaseButton from '../components/BaseButton';
|
||||||
import CardBox from '../components/CardBox';
|
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
import SectionFullScreen from '../components/SectionFullScreen';
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
import { useAppSelector } from '../stores/hooks';
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
import { mdiMagnify, mdiHandshake, mdiSprout, mdiTruckDelivery } from '@mdi/js';
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
import BaseIcon from '../components/BaseIcon';
|
||||||
|
|
||||||
|
const featuredListings = [
|
||||||
|
{
|
||||||
|
title: 'Dry yellow maize lot 20 tons',
|
||||||
|
type: 'demand',
|
||||||
|
location: 'Mbarema Village',
|
||||||
|
price: '$220.5/ton',
|
||||||
|
quantity: '20 tons',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Bulk soybean demand for processing',
|
||||||
|
type: 'offer',
|
||||||
|
location: 'Coastal Town',
|
||||||
|
price: '$480.0/ton',
|
||||||
|
quantity: '10 tons',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Fertilizer NPK 20-10-10 stock',
|
||||||
|
type: 'demand',
|
||||||
|
location: 'Riverside Market',
|
||||||
|
price: '$650.0/ton',
|
||||||
|
quantity: '50 tons',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function Starter() {
|
export default function AgriMatchLanding() {
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
|
||||||
src: undefined,
|
|
||||||
photographer: undefined,
|
|
||||||
photographer_url: undefined,
|
|
||||||
})
|
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
|
||||||
const [contentType, setContentType] = useState('image');
|
|
||||||
const [contentPosition, setContentPosition] = useState('right');
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||||
|
const title = 'AgriMatch';
|
||||||
const title = 'AgriMatch'
|
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchData() {
|
|
||||||
const image = await getPexelsImage();
|
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="bg-[#FDFBF7] min-h-screen font-sans text-[#3E2723]">
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{getPageTitle('The B2B Bridge for Agribusiness')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
{/* Hero Section */}
|
||||||
<div
|
<section className="relative h-[80vh] flex items-center justify-center overflow-hidden bg-[#2D5A27]">
|
||||||
className={`flex ${
|
<div className="absolute inset-0 z-0 opacity-40">
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
<img
|
||||||
} min-h-screen w-full`}
|
src="https://images.unsplash.com/photo-1523348837708-15d4a09cfac2?auto=format&fit=crop&q=80&w=2000"
|
||||||
>
|
alt="Agriculture Field"
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
className="w-full h-full object-cover"
|
||||||
? imageBlock(illustrationImage)
|
|
||||||
: null}
|
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
|
||||||
? videoBlock(illustrationVideo)
|
|
||||||
: null}
|
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<CardBoxComponentTitle title="Welcome to your AgriMatch app!"/>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BaseButtons>
|
|
||||||
<BaseButton
|
|
||||||
href='/login'
|
|
||||||
label='Login'
|
|
||||||
color='info'
|
|
||||||
className='w-full'
|
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
|
||||||
|
<h1 className="text-4xl md:text-6xl font-extrabold text-white mb-6 tracking-tight">
|
||||||
|
Uniting Agribusiness for a Smarter Future
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl md:text-2xl text-white/90 mb-10 font-medium">
|
||||||
|
The B2B marketplace for farmers, traders, and suppliers to matchmake and grow together.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||||
|
<BaseButton
|
||||||
|
href="/register"
|
||||||
|
label="Join the Network"
|
||||||
|
color="white"
|
||||||
|
className="px-8 py-3 rounded-full text-lg font-bold shadow-lg"
|
||||||
|
/>
|
||||||
|
<BaseButton
|
||||||
|
href="/login"
|
||||||
|
label="Sign In"
|
||||||
|
color="white"
|
||||||
|
outline
|
||||||
|
className="px-8 py-3 rounded-full text-lg font-bold border-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</BaseButtons>
|
{/* Stats/Quick Search */}
|
||||||
</CardBox>
|
<section className="py-12 bg-white border-b">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
||||||
|
<div>
|
||||||
|
<p className="text-4xl font-bold text-[#2D5A27]">500+</p>
|
||||||
|
<p className="text-gray-500 font-medium">Verified Partners</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-4xl font-bold text-[#2D5A27]">1.2k</p>
|
||||||
|
<p className="text-gray-500 font-medium">Active Listings</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-4xl font-bold text-[#2D5A27]">$2M+</p>
|
||||||
|
<p className="text-gray-500 font-medium">Deals Facilitated</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SectionFullScreen>
|
</div>
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
</section>
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
{/* Featured Listings */}
|
||||||
Privacy Policy
|
<section className="py-20">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="flex justify-between items-end mb-12">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl font-bold mb-2">Featured Listings</h2>
|
||||||
|
<p className="text-gray-500">Discover current needs and offers from our network</p>
|
||||||
|
</div>
|
||||||
|
<Link href="/login" className={`${textColor} font-bold flex items-center gap-1`}>
|
||||||
|
View all <BaseIcon path={mdiMagnify} size={18} />
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{featuredListings.map((listing, idx) => (
|
||||||
|
<div key={idx} className="bg-white p-6 rounded-2xl shadow-sm border border-stone-100 hover:shadow-md transition-shadow">
|
||||||
|
<div className="flex justify-between items-start mb-4">
|
||||||
|
<span className={`px-3 py-1 rounded-full text-xs font-bold uppercase ${listing.type === 'offer' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'}`}>
|
||||||
|
{listing.type}
|
||||||
|
</span>
|
||||||
|
<p className="text-[#2D5A27] font-bold">{listing.price}</p>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-2">{listing.title}</h3>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-500 mb-4">
|
||||||
|
<BaseIcon path={mdiTruckDelivery} size={16} />
|
||||||
|
<span>{listing.location}</span>
|
||||||
|
</div>
|
||||||
|
<BaseButton
|
||||||
|
href="/login"
|
||||||
|
label="Interested"
|
||||||
|
color="info"
|
||||||
|
outline
|
||||||
|
className="w-full rounded-xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* How it Works */}
|
||||||
|
<section className="py-20 bg-[#F5F1E9]">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-16">How AgriMatch Works</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-12">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm">
|
||||||
|
<BaseIcon path={mdiSprout} size={32} className="text-[#2D5A27]" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-bold mb-2">Create Profile</h4>
|
||||||
|
<p className="text-sm text-gray-600">Tell us about your agribusiness and certifications.</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm">
|
||||||
|
<BaseIcon path={mdiMagnify} size={32} className="text-[#2D5A27]" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-bold mb-2">List Needs</h4>
|
||||||
|
<p className="text-sm text-gray-600">Post what you are selling or what you need to buy.</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm">
|
||||||
|
<BaseIcon path={mdiHandshake} size={32} className="text-[#2D5A27]" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-bold mb-2">Get Matches</h4>
|
||||||
|
<p className="text-sm text-gray-600">Our algorithm connects you with compatible partners.</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm">
|
||||||
|
<BaseIcon path={mdiTruckDelivery} size={32} className="text-[#2D5A27]" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-bold mb-2">Close Deals</h4>
|
||||||
|
<p className="text-sm text-gray-600">Securely message and finalize terms in the app.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-[#3E2723] text-white py-12">
|
||||||
|
<div className="container mx-auto px-6 text-center">
|
||||||
|
<p className="text-2xl font-bold mb-6">{title}</p>
|
||||||
|
<div className="flex justify-center gap-8 mb-8 text-sm text-white/60">
|
||||||
|
<Link href="/privacy-policy">Privacy Policy</Link>
|
||||||
|
<Link href="/terms-of-use">Terms of Use</Link>
|
||||||
|
<Link href="/login">Admin Access</Link>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-white/40">© 2026 AgriMatch. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
AgriMatchLanding.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user