ItemSection.tsx (4086B)
1 import { Onest } from 'next/font/google' 2 import { FormattedMessage, useIntl } from "react-intl"; 3 import { motion } from "framer-motion"; 4 import { RoundedContainerWithGradientBorder } from "@/components/ui/RoundedContainerWithGradientBorder"; 5 import { cn } from "@/lib/utils"; 6 import { Lock, User, Layers, Bell, FileText, LogOut } from "lucide-react"; 7 import { MeshGradient3 } from "@/components/effects/MeshGradient.3"; 8 import { MarkdownView } from '@/components/ui/MarkdownView'; 9 import React from 'react'; 10 11 const onest = Onest({ subsets: ['latin'] }) 12 13 export interface ItemSectionProps { 14 className?: string, 15 subHeadingClassName?: string, 16 heading: string, 17 subHeading: string, 18 items: Item[], 19 customChild?: React.ReactNode 20 } 21 22 export interface Item { 23 icon: React.ReactNode 24 headline: string 25 description: string 26 badgeClassName?: string 27 badgeText?: string 28 } 29 30 export function ItemSection({ className, subHeadingClassName, heading, subHeading, items, customChild }: ItemSectionProps) { 31 const intl = useIntl() 32 33 return (<> 34 <div className={cn("bg-black overflow-hidden relative", className)}> 35 <div className="container mx-auto px-6 pb-32 pt-20"> 36 <div className="flex flex-col items-center justify-center mt-32 lg:mt-16"> 37 <div className="relative mb-16 flex flex-col items-center"> 38 <motion.h2 39 className={cn("mt-6 text-3xl sm:text-4xl md:text-5xl text-center text-transparent bg-clip-text pb-6 font-semibold whitespace-pre-line max-w-4xl tracking-wide leading-relaxed", onest.className)} 40 style={{ 41 backgroundImage: "linear-gradient(to right, #ffffff -100%, #ffffff -40%, #2D175B 100%)", 42 opacity: 0, 43 }} 44 animate={{ 45 backgroundImage: "linear-gradient(to right, #ffffff 0%, #ffffff 40%, #2D175B 100%)", 46 transition: { duration: 3 }, 47 opacity: 1 48 }} 49 > 50 {heading} 51 </motion.h2> 52 <motion.div className={cn("text-white/60 text-xl text-center max-w-2xl mb-4 mt-6 break-keep", subHeadingClassName)}> 53 <MarkdownView>{subHeading}</MarkdownView> 54 </motion.div> 55 </div> 56 {(intl.locale != "ja" || process.env.FORCE_LOAD_ALL_JA_SECTIONS) && ( 57 <div className="flex flex-wrap gap-x-8 gap-y-16 items-stretch justify-center"> 58 {items.map((item, index) => ( 59 <div key={index} className="w-72 flex flex-col items-start justify-start"> 60 <div className="flex justify-between w-full items-start"> 61 {item.icon} 62 {item.badgeText && ( 63 <div className={cn("py-1 px-2 bg-orange-500/30 text-orange-200 rounded-lg", item.badgeClassName)}> 64 {item.badgeText} 65 </div> 66 )} 67 </div> 68 <h3 className="text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-br text-white text-left text-normal mt-6"> 69 {item.headline} 70 </h3> 71 <p className="text-white/80 text-left text-normal mt-4"> 72 {item.description} 73 </p> 74 </div> 75 ))} 76 </div> 77 )} 78 </div> 79 {customChild} 80 </div> 81 </div> 82 </>) 83 }