Files
deer-flow/web/src/app/landing/components/core-features-section.tsx
2025-05-02 10:43:14 +08:00

88 lines
2.8 KiB
TypeScript

// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT
import { Bird, Microscope, Podcast, Usb, User } from "lucide-react";
import { BentoCard, BentoGrid } from "~/components/magicui/bento-grid";
import { SectionHeader } from "./section-header";
const features = [
{
Icon: Microscope,
name: "Dive Deeper and Reach Wider",
description:
"Unlock deeper insights with advanced tools. Our powerful search + crawling and Python tools gathers comprehensive data, delivering in-depth reports to enhance your study.",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",
},
{
Icon: User,
name: "Human-in-the-loop",
description:
"Refine your research plan, or adjust focus areas all through simple natural language.",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",
},
{
Icon: Bird,
name: "Lang Stack",
description:
"Build with confidence using the LangChain and LangGraph frameworks.",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-2 lg:col-end-3 lg:row-start-1 lg:row-end-2",
},
{
Icon: Usb,
name: "MCP Integrations",
description:
"Supercharge your research workflow and expand your toolkit with seamless MCP integrations.",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-2 lg:col-end-3 lg:row-start-2 lg:row-end-3",
},
{
Icon: Podcast,
name: "Podcast Generation",
description:
"Instantly generate podcasts from reports. Perfect for on-the-go learning or sharing findings effortlessly. ",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-2 lg:col-end-3 lg:row-start-3 lg:row-end-4",
},
];
export function CoreFeatureSection() {
return (
<section className="relative flex w-full flex-col content-around items-center justify-center">
<SectionHeader
title="Core Features"
description="Find out what makes DeerFlow effective."
/>
<BentoGrid className="w-3/4 lg:grid-cols-2 lg:grid-rows-3">
{features.map((feature) => (
<BentoCard key={feature.name} {...feature} />
))}
</BentoGrid>
</section>
);
}