Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 59 additions & 22 deletions app/components/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ interface Tool {
logo: string
link?: string
categories?: string[]
highlights?: string[]
company: string
isFree?: boolean
features?: string[]
Expand Down Expand Up @@ -87,18 +88,28 @@ const categoryMap: CategoryMap = {
"Service Calls",
"Tech Response",
"Upselling",
"customer finance Management",
"CRM",
"HR Management",
],
},
optimize: {
name: "Assess & Optimize",
subcategories: [
"Portfolio Analysis & Management",
"Impact Measurements & Performance",
"Remote Team Management",
"API Integration & connection",
"Data Download",
],
},
endoflife: {
name: "Product End-of-Life",
subcategories: ["Repossession & Reverse logistics", "E-Waste Management"],
subcategories: [
"Repossession & Reverse logistics",
"E-Waste Management",
"Repair, Refurbishment Facilitation",
],
},
}

Expand Down Expand Up @@ -200,6 +211,18 @@ const EnAccessToolMap = ({
"/tools/challenges.yaml",
"/tools/carbon-clear.yaml",
"/tools/cavex.yaml",
"/tools/bridgin.yaml",
"/tools/d-rec-financing-programmes.yaml",
"/tools/fieldPro.yaml",
"/tools/Learn.ink.yaml",
"/tools/micropowerManager.yaml",
"/tools/nithio.yaml",
"/tools/odyssey-fern.yaml",
"/tools/paygops.yaml",
"/tools/vida.yaml",
"/tools/angaza.yaml",
"/tools/prospect.yaml",
"/tools/universus.yaml",
]

const loadedTools = await Promise.all(
Expand Down Expand Up @@ -341,27 +364,41 @@ const EnAccessToolMap = ({
</CardContent>

{/* Tool categories as badges */}
{tool.categories && tool.categories.length > 0 && (
<CardFooter className="flex gap-2 mt-4">
{tool.isFree && (
<Badge className="bg-[#43BC80] rounded-full text-[#161D1A] font-bold text-sm">
100% free
</Badge>
)}
{tool.categories.slice(0, 2).map((category, index) => {
// Rotate through different colors for category badges
const colors = ["bg-[#8BDC7F] ", "bg-[#43BC80] "]
const colorClass = colors[index % colors.length]

return (
<Badge
key={category}
className={`${colorClass} rounded-full text-[#161D1A] font-bold text-sm`}
>
{category}
</Badge>
)
})}
{tool.highlights && tool.highlights.length > 0 && (
<CardFooter className="mt-4">
<div className="flex flex-wrap gap-2 w-full">
{tool.highlights.map((category, index) => {
// Define colors explicitly for each badge
const colors = [
"bg-[#43BC80]",
"bg-[#8BDC7F]",
"bg-[#5AC9C5]",
"bg-[#67C6AB]",
]

// Make sure the index is within the range of the colors array
const colorIndex = index % colors.length
const colorClass = colors[colorIndex]

return (
<Badge
key={category}
className={`${colorClass} rounded-full text-[#161D1A] font-bold text-sm `}
style={{
minWidth: "auto", // Prevents forced stretching
display: "inline-flex", // Ensures it wraps around text content
justifyContent: "center", // Centers text inside badge
alignItems: "center",
backgroundColor: colorClass
.replace("bg-[", "")
.replace("]", ""),
}}
>
{category}
</Badge>
)
})}
</div>
</CardFooter>
)}
</Card>
Expand Down
51 changes: 27 additions & 24 deletions app/components/Landing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,31 @@ import QuestionaireFilter from "../components/Questionairefilter"
import { ToolCategoriesDrawer } from "../components/categories-drawer"
import { useMobile } from "../hooks/use-mobile"

interface Tool {
id?: number
name: string
summary: string
logo: string
link?: string
categories?: string[]
company: string
isFree?: boolean
features?: string[]
integrations?: string[]
pricing?: {
model: string
description: string
}
userTypes?: {
label: string
description: string
}[]
documentation?: {
title: string
description: string
}[]
}

export default function Landing() {
const [isModalOpen, setIsModalOpen] = useState(false)
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
Expand All @@ -26,37 +51,14 @@ export default function Landing() {
}

const handleCategorySelect = (categories: string[]) => {
// Update the selected categories state
setSelectedCategories(categories)
}

// Get tools from EnAccessToolMap component
const handleToolsLoaded = (loadedTools: Tool[]) => {
setTools(loadedTools)
}
interface Tool {
id?: number
name: string
summary: string
logo: string
link?: string
categories?: string[]
company: string
isFree?: boolean
features?: string[]
integrations?: string[]
pricing?: {
model: string
description: string
}
userTypes?: {
label: string
description: string
}[]
documentation?: {
title: string
description: string
}[]
}

return (
<div className="flex flex-col min-h-screen">
Expand Down Expand Up @@ -128,6 +130,7 @@ export default function Landing() {
onOpenChange={setIsDrawerOpen}
onCategorySelect={handleCategorySelect}
tools={tools}
selectedCategories={selectedCategories} // Pass the selected categories to the drawer
/>

{/* Empowering SMEs Section */}
Expand Down
70 changes: 39 additions & 31 deletions app/components/ToolDetailModel.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client"

import { Users, DollarSign, X } from "lucide-react"
import { Users, DollarSign } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
Expand All @@ -21,6 +21,7 @@ export interface ToolDetailModalProps {
name: string
summary: string
categories: string[]
highlights?: string[]
isFree?: boolean
link?: string
features?: string[]
Expand Down Expand Up @@ -51,7 +52,7 @@ export function ToolDetailModal({
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
<DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
<DialogHeader className="flex flex-col items-start space-y-2">
<div className="w-full flex items-center text-sm text-gray-500 mb-1">
<div className="w-full flex items-center text-sm text-gray-500 mb-1 sm:block lg:hidden">
<Link href="#" className="hover:underline">
Home
</Link>
Expand All @@ -61,13 +62,10 @@ export function ToolDetailModal({
</Link>
<span className="mx-2">&gt;</span>
<span className="text-gray-600">{tool.name}</span>

<DialogClose className="ml-auto h-6 w-6 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogClose>
</div>

<DialogClose className="ml-auto h-6 w-6 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100"></DialogClose>

<div>
<div className="text-sm text-gray-500">{tool.company}</div>
<DialogTitle className="text-2xl font-bold">
Expand All @@ -77,30 +75,40 @@ export function ToolDetailModal({
</DialogHeader>

<div className="flex flex-wrap gap-2 mt-2">
{tool.isFree && (
<Badge className="bg-[#8BDC7F] hover:bg-[#43A047] text-[#161D1A]">
100% free
</Badge>
)}
{tool.categories?.map((feature, index) => (
<Badge
key={index}
className="bg-[#4CAF50] hover:bg-[#43A047] text-[#161D1A]"
>
{feature}
</Badge>
)) || (
<>
<Badge className="bg-[#4CAF50] hover:bg-[#43A047] text-[#161D1A]">
Open Source
</Badge>
<Badge className="bg-[#4CAF50] hover:bg-[#43A047] text-[#161D1A]">
Some open source features
</Badge>
<Badge className="bg-[#4CAF50] hover:bg-[#43A047] text-[#161D1A]">
Free demo
</Badge>
</>
{tool.highlights && tool.highlights.length > 0 && (
<div className="flex flex-wrap gap-2 w-full">
{tool.highlights.map((category, index) => {
// Define colors explicitly for each badge
const colors = [
"bg-[#43BC80]",
"bg-[#8BDC7F]",
"bg-[#5AC9C5]",
"bg-[#67C6AB]",
]

// Make sure the index is within the range of the colors array
const colorIndex = index % colors.length
const colorClass = colors[colorIndex]

return (
<Badge
key={category}
className={`${colorClass} rounded-full text-[#161D1A] font-bold text-sm `}
style={{
minWidth: "auto", // Prevents forced stretching
display: "inline-flex", // Ensures it wraps around text content
justifyContent: "center", // Centers text inside badge
alignItems: "center",
backgroundColor: colorClass
.replace("bg-[", "")
.replace("]", ""),
}}
>
{category}
</Badge>
)
})}
</div>
)}
</div>

Expand Down
Loading