-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(libs/external/farm-ui): add feature section
- Loading branch information
1 parent
2e44642
commit f832efb
Showing
2 changed files
with
200 additions
and
0 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { FUIFeatureSectionWithCards } from './feature' | ||
|
|
||
| const meta: Meta<typeof FUIFeatureSectionWithCards> = { | ||
| title: '✨ Farm UI/Feature', | ||
| parameters: { | ||
| layout: 'centered', | ||
| }, | ||
| component: FUIFeatureSectionWithCards, | ||
| tags: ['autodocs'], | ||
| args: {}, | ||
| argTypes: { | ||
| }, | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof FUIFeatureSectionWithCards> | ||
| export const UserExperience: Story = { | ||
| args: { | ||
| }, | ||
| render: args => ( | ||
| <div> | ||
| <FUIFeatureSectionWithCards {...args} /> | ||
| </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,173 @@ | ||
| import React from 'react' | ||
|
|
||
| export function FUIFeatureSectionWithCards() { | ||
| const features = [ | ||
| { | ||
| icon: ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" | ||
| /> | ||
| </svg> | ||
| ), | ||
| title: 'Fast Refresh', | ||
| desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.', | ||
| }, | ||
| { | ||
| icon: ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" | ||
| /> | ||
| </svg> | ||
| ), | ||
| title: 'Analytics', | ||
| desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.', | ||
| }, | ||
| { | ||
| icon: ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" | ||
| /> | ||
| </svg> | ||
| ), | ||
| title: 'Datacenter security', | ||
| desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.', | ||
| }, | ||
| { | ||
| icon: ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" | ||
| /> | ||
| </svg> | ||
| ), | ||
| title: 'Build on your terms', | ||
| desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.', | ||
| }, | ||
| { | ||
| icon: ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" | ||
| /> | ||
| </svg> | ||
| ), | ||
| title: 'Safe to use', | ||
| desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.', | ||
| }, | ||
| { | ||
| icon: ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" | ||
| /> | ||
| </svg> | ||
| ), | ||
| title: 'Flexible', | ||
| desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.', | ||
| }, | ||
| ] | ||
|
|
||
| return ( | ||
| <section className="py-14 relative"> | ||
| <img | ||
| src="https://tailwindcss.com/_next/static/media/[email protected]" | ||
| className="absolute z-2 -top-0 left-10" | ||
| /> | ||
| <div className="max-w-screen-xl mx-auto px-4 text-gray-400 md:px-8"> | ||
| <div className="relative max-w-2xl mx-auto sm:text-center"> | ||
| <div className="relative z-10"> | ||
| <h3 className="text-gray-200 mt-4 text-3xl font-normal font-geist tracking-tighter md:text-5xl sm:text-4xl"> | ||
| Let’s help power your SaaS | ||
| </h3> | ||
| <p className="mt-3 font-geist text-gray-200"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec | ||
| congue, nisl eget molestie varius, enim ex faucibus purus. | ||
| </p> | ||
| </div> | ||
| <div | ||
| className="absolute inset-0 max-w-xs mx-auto h-44 blur-[118px]" | ||
| style={{ | ||
| background: | ||
| 'linear-gradient(152.92deg, rgba(192, 132, 252, 0.2) 4.54%, rgba(232, 121, 249, 0.26) 34.2%, rgba(192, 132, 252, 0.1) 77.55%)', | ||
| }} | ||
| > | ||
| </div> | ||
| </div> | ||
| <hr className="bg-white/30 h-px w-1/2 mx-auto mt-5" /> | ||
| <div className="relative mt-12"> | ||
| <ul className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3"> | ||
| {features.map((item, idx) => ( | ||
| <li | ||
| key={idx} | ||
| className="bg-transparent transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] space-y-3 p-4 border rounded-xl" | ||
| > | ||
| <div className="text-purple-600 rounded-full p-4 transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] w-fit">{item.icon}</div> | ||
| <h4 className="text-lg text-gray-300 font-bold font-geist tracking-tighter"> | ||
| {item.title} | ||
| </h4> | ||
| <p className="text-gray-500">{item.desc}</p> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ) | ||
| } |