Spaces:
Sleeping
Sleeping
File size: 4,211 Bytes
c78c3c8 8c4558f 8a83515 c78c3c8 8c4558f c78c3c8 8a83515 c78c3c8 8c4558f 8a83515 c78c3c8 8c4558f c78c3c8 8a83515 c78c3c8 8c4558f 8a83515 c78c3c8 8c4558f c78c3c8 8a83515 c78c3c8 7478de0 c78c3c8 a64caca c78c3c8 8c4558f c78c3c8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import React from "react";
export default function CapabilitiesSection() {
const cards = [
{
title: "Deconstruct",
body: "The Case Manager Agent decomposes your initial problem statement into structured, testable hypotheses using dynamic JSON templates.",
icon: (
// Code/Brackets outline SVG
<svg className="w-6 h-6 fill-none stroke-white" strokeWidth="1.5" viewBox="0 0 24 24">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
),
tags: ["Hypothesis Builder", "Logical Decomposition", "Structured JSON", "Case Manager"],
},
{
title: "Research",
body: "The Research Agent formulates optimized search queries and crawls DuckDuckGo to retrieve real-time facts and snippet evidence without API keys.",
icon: (
// Globe/Search outline SVG
<svg className="w-6 h-6 fill-none stroke-white" strokeWidth="1.5" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
),
tags: ["DuckDuckGo Search", "Web Querying", "Evidence Fetching", "Research Agent"],
},
{
title: "Synthesize",
body: "Categorizes evidence into supporting or contrary arguments, compiles final analysis conclusions, and marks the final verdict status.",
icon: (
// Lightbulb outline SVG
<svg className="w-6 h-6 fill-none stroke-white" strokeWidth="1.5" viewBox="0 0 24 24">
<path d="M9 21h6M9 17h6M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74A7 7 0 0 0 12 2z"></path>
</svg>
),
tags: ["Evidence Sorting", "Conflict Evaluation", "Structured Verdict", "Case Updates"],
},
];
return (
<section id="capabilities" className="relative w-screen min-h-screen bg-transparent flex flex-col justify-between">
{/* Foreground Content */}
<div className="relative z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10 flex flex-col min-h-screen justify-between">
{/* Header section */}
<div className="mb-auto">
<h2 className="font-heading italic text-white text-6xl md:text-7xl lg:text-[6.5rem] leading-[0.9] tracking-[-3px]">
Investigation
<br />
evolved
</h2>
</div>
{/* Cards Row Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
{cards.map((card, idx) => (
<div
key={idx}
className="liquid-glass rounded-[1.25rem] p-6 min-h-[360px] flex flex-col justify-between hover:scale-[1.02] transition-transform duration-300"
>
{/* Card Header Top */}
<div className="flex items-start justify-between gap-4">
{/* Left Nested Icon Box */}
<div className="w-11 h-11 rounded-[0.75rem] liquid-glass flex items-center justify-center">
{card.icon}
</div>
{/* Right Tags pill container */}
<div className="flex flex-wrap justify-end gap-1.5 max-w-[70%]">
{card.tags.map((tag, tIdx) => (
<span
key={tIdx}
className="rounded-full px-2.5 py-0.5 text-[10px] text-white/90 font-body border border-white/10 bg-white/5 whitespace-nowrap"
>
{tag}
</span>
))}
</div>
</div>
{/* Card content spacer */}
<div className="flex-1" />
{/* Card Bottom Body */}
<div className="mt-6">
<h3 className="font-heading italic text-white text-3xl md:text-4xl tracking-[-1px] leading-none">
{card.title}
</h3>
<p className="mt-3 text-sm text-white/80 font-body font-light leading-snug max-w-[32ch]">
{card.body}
</p>
</div>
</div>
))}
</div>
</div>
</section>
);
} |