- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Add live demo
1 parent
2504724
commit e35357a
Showing
5 changed files
with
207 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import { cn } from "@/lib/utils"; | ||
| import { | ||
| Cloud, | ||
| CloudLightning, | ||
| DollarSign, | ||
| HeartIcon, | ||
| HelpCircle, | ||
| RouterIcon, | ||
| ShieldQuestion, | ||
| TerminalIcon, | ||
| } from "lucide-react"; | ||
|
|
||
| export function FeaturesSection() { | ||
| const features = [ | ||
| { | ||
| title: "Open-source", | ||
| description: | ||
| "Built for engineers, developers, dreamers, thinkers and doers.", | ||
| icon: <TerminalIcon />, | ||
| }, | ||
| { | ||
| title: "Ease of use", | ||
| description: | ||
| "Easily manage your tasks, events, documents & more with a single click.", | ||
| icon: <ShieldQuestion />, | ||
| }, | ||
| { | ||
| title: "File Sharing", | ||
| description: | ||
| "Upload and share files within your team to centralize project resources.", | ||
| icon: <Cloud />, | ||
| }, | ||
| { | ||
| title: "Pricing like no other", | ||
| description: | ||
| "It's free to self-host, we might charge you for the cloud version.", | ||
| icon: <DollarSign />, | ||
| }, | ||
| { | ||
| title: "Multi-tenant Architecture", | ||
| description: | ||
| "Efficiently manage users and teams with integrated authentication and authorization.", | ||
| icon: <RouterIcon />, | ||
| }, | ||
| { | ||
| title: "Commenting System", | ||
| description: | ||
| "Facilitate discussions and feedback with a built-in commenting feature.", | ||
| icon: <HelpCircle />, | ||
| }, | ||
| { | ||
| title: "Activity Logs", | ||
| description: | ||
| "Monitor project activities with comprehensive activity logs.", | ||
| icon: <CloudLightning />, | ||
| }, | ||
| { | ||
| title: "And everything else", | ||
| description: "I just ran out of copy ideas. Accept my sincere apologies", | ||
| icon: <HeartIcon />, | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-4 max-w-7xl mx-auto"> | ||
| {features.map((feature, index) => ( | ||
| <Feature key={feature.title} {...feature} index={index} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const Feature = ({ | ||
| title, | ||
| description, | ||
| icon, | ||
| index, | ||
| }: { | ||
| title: string; | ||
| description: string; | ||
| icon: React.ReactNode; | ||
| index: number; | ||
| }) => { | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-col lg:border-r py-10 relative group/feature dark:border-neutral-800", | ||
| (index === 0 || index === 4) && "lg:border-l dark:border-neutral-800", | ||
| index < 4 && "lg:border-b dark:border-neutral-800", | ||
| )} | ||
| > | ||
| {index < 4 && ( | ||
| <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" /> | ||
| )} | ||
| {index >= 4 && ( | ||
| <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" /> | ||
| )} | ||
| <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400"> | ||
| {icon} | ||
| </div> | ||
| <div className="text-lg font-bold mb-2 relative z-10 px-10"> | ||
| <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-primary transition-all duration-200 origin-center" /> | ||
| <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100"> | ||
| {title} | ||
| </span> | ||
| </div> | ||
| <p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10"> | ||
| {description} | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { useId } from "react"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| interface DotPatternProps { | ||
| width?: any; | ||
| height?: any; | ||
| x?: any; | ||
| y?: any; | ||
| cx?: any; | ||
| cy?: any; | ||
| cr?: any; | ||
| className?: string; | ||
| [key: string]: any; | ||
| } | ||
|
|
||
| function DotPattern({ | ||
| width = 16, | ||
| height = 16, | ||
| x = 0, | ||
| y = 0, | ||
| cx = 1, | ||
| cy = 1, | ||
| cr = 1, | ||
| className, | ||
| ...props | ||
| }: DotPatternProps) { | ||
| const id = useId(); | ||
|
|
||
| return ( | ||
| <svg | ||
| aria-hidden="true" | ||
| className={cn( | ||
| "pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80", | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| <defs> | ||
| <pattern | ||
| id={id} | ||
| width={width} | ||
| height={height} | ||
| patternUnits="userSpaceOnUse" | ||
| patternContentUnits="userSpaceOnUse" | ||
| x={x} | ||
| y={y} | ||
| > | ||
| <circle id="pattern-circle" cx={cx} cy={cy} r={cr} /> | ||
| </pattern> | ||
| </defs> | ||
| <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} /> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| export { DotPattern }; |