Spaces:
Running
Running
File size: 4,641 Bytes
21a686e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
import React from "react";
import { useId } from "react";
export function FeaturesSectionSimpleWithCardGradient() {
return (
<div className="py-20 lg:py-40">
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 sm:grid-cols-2 md:grid-cols-3 md:gap-2 lg:grid-cols-4">
{grid.map((feature) => (
<div
key={feature.title}
className="relative overflow-hidden rounded-3xl bg-gradient-to-b from-neutral-100 to-white p-6 dark:from-neutral-900 dark:to-neutral-950"
>
<Grid size={20} />
<p className="relative z-20 text-base font-bold text-neutral-800 dark:text-white">
{feature.title}
</p>
<p className="relative z-20 mt-4 text-base font-normal text-neutral-600 dark:text-neutral-400">
{feature.description}
</p>
</div>
))}
</div>
</div>
);
}
const grid = [
{
title: "HIPAA and SOC2 Compliant",
description:
"Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.",
},
{
title: "Automated Social Media Posting",
description:
"Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.",
},
{
title: "Advanced Analytics",
description:
"Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.",
},
{
title: "Content Calendar",
description:
"Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.",
},
{
title: "Audience Targeting",
description:
"Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.",
},
{
title: "Social Listening",
description:
"Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.",
},
{
title: "Customizable Templates",
description:
"Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.",
},
{
title: "Collaboration Tools",
description:
"Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.",
},
];
export const Grid = ({
pattern,
size,
}: {
pattern?: number[][];
size?: number;
}) => {
const p = pattern ?? [
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
];
return (
<div className="pointer-events-none absolute left-1/2 top-0 -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]">
<div className="absolute inset-0 bg-gradient-to-r from-zinc-100/30 to-zinc-300/30 opacity-100 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 dark:to-zinc-900/30">
<GridPattern
width={size ?? 20}
height={size ?? 20}
x="-12"
y="4"
squares={p}
className="absolute inset-0 h-full w-full fill-black/10 stroke-black/10 mix-blend-overlay dark:fill-white/10 dark:stroke-white/10"
/>
</div>
</div>
);
};
export function GridPattern({ width, height, x, y, squares, ...props }: any) {
const patternId = useId();
return (
<svg aria-hidden="true" {...props}>
<defs>
<pattern
id={patternId}
width={width}
height={height}
patternUnits="userSpaceOnUse"
x={x}
y={y}
>
<path d={`M.5 ${height}V.5H${width}`} fill="none" />
</pattern>
</defs>
<rect
width="100%"
height="100%"
strokeWidth={0}
fill={`url(#${patternId})`}
/>
{squares && (
<svg x={x} y={y} className="overflow-visible">
{squares.map(([x, y]: [number, number], index: number) => (
<rect
strokeWidth="0"
key={`${x}-${y}-${index}-${patternId}`}
width={width + 1}
height={height + 1}
x={x * width}
y={y * height}
/>
))}
</svg>
)}
</svg>
);
}
|