From ae21952dbe0c292169685eaf10fb22f4a7d4d249 Mon Sep 17 00:00:00 2001 From: Ifeanyi bright Date: Fri, 24 Jul 2026 13:44:42 +0000 Subject: [PATCH 1/2] work is done --- app/faq/page.tsx | 25 ++++--- components/support/Accordion.module.css | 9 +-- components/support/AccordionSection.tsx | 21 ++---- components/support/FaqHelpCenter.tsx | 60 +++++++--------- components/support/FaqPageShell.tsx | 70 +++++++++++++++++++ .../support/__tests__/FaqPageShell.test.tsx | 13 ++++ 6 files changed, 137 insertions(+), 61 deletions(-) create mode 100644 components/support/FaqPageShell.tsx create mode 100644 components/support/__tests__/FaqPageShell.test.tsx diff --git a/app/faq/page.tsx b/app/faq/page.tsx index 88aecd14..fd04e82f 100644 --- a/app/faq/page.tsx +++ b/app/faq/page.tsx @@ -9,14 +9,23 @@ export const metadata = { export default function FaqPage() { return ( -
-

- FAQ & Help Center -

-

- Find answers to common questions about SwiftChain. -

- +
+
+
+

+ Support Hub +

+

+ FAQ & Help Center +

+

+ Find clear answers about escrows, deliveries, driver onboarding, and secure payments + on the SwiftChain platform. +

+
+ + +
); } \ No newline at end of file diff --git a/components/support/Accordion.module.css b/components/support/Accordion.module.css index 3d8d21f8..e271f730 100644 --- a/components/support/Accordion.module.css +++ b/components/support/Accordion.module.css @@ -1,5 +1,5 @@ .accordionItem { - border-bottom: 1px solid #e5e7eb; + border-bottom: 1px solid rgba(148, 163, 184, 0.25); } .trigger { @@ -14,17 +14,18 @@ text-align: left; font-size: 1rem; font-weight: 500; - color: #111827; + color: #f8fafc; } .trigger:hover { - color: #3b82f6; + color: #67e8f9; } .icon { flex-shrink: 0; margin-left: 1rem; transition: transform 0.3s ease; + color: #67e8f9; } .iconOpen { @@ -44,7 +45,7 @@ } .panelText { - color: #4b5563; + color: #cbd5e1; font-size: 0.95rem; line-height: 1.6; } \ No newline at end of file diff --git a/components/support/AccordionSection.tsx b/components/support/AccordionSection.tsx index 4b357b28..4ecb6521 100644 --- a/components/support/AccordionSection.tsx +++ b/components/support/AccordionSection.tsx @@ -11,22 +11,15 @@ interface AccordionSectionProps { */ export function AccordionSection({ category }: AccordionSectionProps) { return ( -
-

+
+

{category.category}

- {category.items.map((item) => ( - - ))} +
+ {category.items.map((item) => ( + + ))} +
); } \ No newline at end of file diff --git a/components/support/FaqHelpCenter.tsx b/components/support/FaqHelpCenter.tsx index 587a445d..b2784d9a 100644 --- a/components/support/FaqHelpCenter.tsx +++ b/components/support/FaqHelpCenter.tsx @@ -2,6 +2,7 @@ import { useLanguage } from '@/hooks/useLanguage'; import { LANGUAGE_LABELS, type Locale } from '@/contexts/LanguageContext'; import { AccordionSection } from './AccordionSection'; +import { FaqPageShell } from './FaqPageShell'; import { useFaq } from '@/hooks/useFaq'; const LOCALES = Object.keys(LANGUAGE_LABELS) as Locale[]; @@ -17,63 +18,52 @@ export function FaqHelpCenter() { const { categories, isLoading, isError } = useFaq(locale); return ( -
- {/* Language selector */} -
- - + +
+
+ + +
- {/* States */} {isLoading && ( -
+
Loading help articles…
)} {isError && ( -
+
Failed to load FAQ. Please try again later.
)} {!isLoading && !isError && categories.length === 0 && ( -
+
No FAQ articles available.
)} {!isLoading && !isError && categories.length > 0 && ( -
+
{categories.map((category) => ( ))}
)} -
+ ); } \ No newline at end of file diff --git a/components/support/FaqPageShell.tsx b/components/support/FaqPageShell.tsx new file mode 100644 index 00000000..a44b6015 --- /dev/null +++ b/components/support/FaqPageShell.tsx @@ -0,0 +1,70 @@ +import type { ReactNode } from 'react'; + +interface FaqPageShellProps { + children?: ReactNode; +} + +export function FaqPageShell({ children }: FaqPageShellProps) { + return ( +
+
+
+ + Support center + +

+ Frequently asked questions +

+

+ Everything you need to know about secure deliveries, escrow payouts, and onboarding + on SwiftChain. +

+
+ +
+

Need a tailored answer?

+

Our support team replies in under 24 hours.

+
+
+ +
{children}
+ +
+
+
+

+ Bottom CTA +

+

+ Ready to secure your shipments? +

+

+ Create a trusted delivery flow with escrow, transparent milestones, and instant + support for every handoff. +

+
+ + +
+
+ +
+

SwiftChain keeps every shipment visible, verifiable, and protected.

+

© 2026 SwiftChain • Secure logistics for modern commerce

+
+
+ ); +} diff --git a/components/support/__tests__/FaqPageShell.test.tsx b/components/support/__tests__/FaqPageShell.test.tsx new file mode 100644 index 00000000..33a3d41e --- /dev/null +++ b/components/support/__tests__/FaqPageShell.test.tsx @@ -0,0 +1,13 @@ +import { render, screen } from '@testing-library/react'; +import { FaqPageShell } from '@/components/support/FaqPageShell'; + +describe('FaqPageShell', () => { + it('renders the FAQ heading and bottom CTA content', () => { + render(); + + expect(screen.getByRole('heading', { name: /frequently asked questions/i })).toBeInTheDocument(); + expect(screen.getByText(/ready to secure your shipments/i)).toBeInTheDocument(); + expect(screen.getByRole('link', { name: /book a demo/i })).toHaveAttribute('href', '/support'); + expect(screen.getByRole('link', { name: /contact support/i })).toHaveAttribute('href', '/support'); + }); +}); From 94c37a4d6d85f89e3321e49fed287b6cf4af92c4 Mon Sep 17 00:00:00 2001 From: Ifeanyi bright Date: Mon, 19 Oct 2026 01:12:24 +0100 Subject: [PATCH 2/2] design: create light-mode reputation, address, dispute, and courier bidding screens --- ...ion-address-dispute-courier-bidding-design.txt | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 app/figma/uiux/reputation-address-dispute-courier-bidding-design.txt diff --git a/app/figma/uiux/reputation-address-dispute-courier-bidding-design.txt b/app/figma/uiux/reputation-address-dispute-courier-bidding-design.txt new file mode 100644 index 00000000..b8f7cd6f --- /dev/null +++ b/app/figma/uiux/reputation-address-dispute-courier-bidding-design.txt @@ -0,0 +1,15 @@ +LIGHT MODE DESIGN + +//Design Light Mode Titles +#640 — Decentralized Reputation System & Driver Reviews: Present driver ratings, customer feedback, and on-chain reputation metrics in an easy-to-scan grid. + +#642 — Customer Address Book & Saved Locations (List View): Provide a practical list for selecting and managing frequently used pickup and drop-off addresses. + +#638 — Dispute Resolution & Evidence Upload Portal: Design an accessible dispute workflow for reporting delivery problems, submitting photo evidence, and communicating escrow review status. + +#636 — Courier Load Matching & Bidding Interface: Organize available delivery loads, courier bids, and rate negotiation details into a clear matching interface. + + +//Design Light Mode reference +https://www.figma.com/design/2kP82C0Z8z0X3CncLQmfhB/Stellar-Project-Fig?node-id=3104-2&p=f&t=8viSao94cjKWsGb3-0 +