Farigh UI Logo

Farigh UI

Source Code

recent-highlights.tsx
1"use client";
2
3const highlights = [
4  {
5    title: "Improving Cursor Tab with online RL",
6    description:
7      "Our new Tab model makes 21% fewer suggestions while having 28% higher accept rate.",
8    category: "Research",
9    date: "Sep 12, 2025",
10  },
11  {
12    title: "1.5x faster MoE training with custom MXFPβ kernels",
13    description:
14      "Achieving a 3.5x MoE layer speedup with a complete rebuild for Blackwell GPUs.",
15    category: "Research",
16    date: "Aug 29, 2025",
17  },
18  {
19    title: "Series C and Scale",
20    description:
21      "We've raised $900m to push the frontier of AI coding research.",
22    category: "Company",
23    date: "Jun 7, 2025",
24  },
25];
26
27export const RecentHighlights = () => {
28  return (
29    <div className="w-full min-h-screen bg-[#1B1913] flex items-center justify-center p-8 md:p-16">
30      <div className="max-w-5xl w-full">
31        <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr] gap-12 lg:gap-20">
32          <h2 className="text-white/90 text-md font-medium">Recent highlights</h2>
33
34          <div className="space-y-3">
35            {highlights.map((highlight, index) => (
36              <div key={index} className="space-y-3 bg-[#24221c73] p-4 border border-[#4b4840]/20 hover:bg-[#26241E] rounded">
37                <h3 className="text-white text-md font-medium leading-tight">
38                  {highlight.title}
39                </h3>
40
41                <p className="text-white/60 text-base leading-relaxed">
42                  {highlight.description}
43                </p>
44
45                <p className="text-white/50 text-sm">
46                  {highlight.category} · {highlight.date}
47                </p>
48              </div>
49            ))}
50
51            <div className="pt-4">
52              <a
53                href="#"
54                className="inline-flex items-center gap-2 text-[#FF6B35] hover:text-[#FF8C5A] transition-colors text-base font-medium"
55              >
56                View more posts
57                <svg
58                  className="w-4 h-4"
59                  fill="none"
60                  stroke="currentColor"
61                  viewBox="0 0 24 24"
62                >
63                  <path
64                    strokeLinecap="round"
65                    strokeLinejoin="round"
66                    strokeWidth={2}
67                    d="M9 5l7 7-7 7"
68                  />
69                </svg>
70              </a>
71            </div>
72          </div>
73        </div>
74      </div>
75    </div>
76  );
77};
78

Related

Flight Card - San Francisco - Free React component preview

Flight Card - San Francisco

Flight Card - New York - Free React component preview

Flight Card - New York

Simplified Pricing - Free React component preview

Simplified Pricing

Mental Pricing - Free React component preview

Mental Pricing