mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-10-07 02:58:11 +00:00
fix: revamp
This commit is contained in:
Kinfe123
parent
37be087ac7
commit
c541089866
10 changed files with 277 additions and 49 deletions
149
apps/web/app/(landing)/CardPatterns/AnimatedGrid.tsx
Normal file
149
apps/web/app/(landing)/CardPatterns/AnimatedGrid.tsx
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
"use client";
|
||||
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect, useId, useRef, useState } from "react";
|
||||
|
||||
interface GridPatternProps {
|
||||
width?: number;
|
||||
height?: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
strokeDasharray?: any;
|
||||
numSquares?: number;
|
||||
className?: string;
|
||||
maxOpacity?: number;
|
||||
duration?: number;
|
||||
repeatDelay?: number;
|
||||
}
|
||||
|
||||
export function GridPattern({
|
||||
width = 40,
|
||||
height = 40,
|
||||
x = -1,
|
||||
y = -1,
|
||||
strokeDasharray = 0,
|
||||
numSquares = 50,
|
||||
className,
|
||||
maxOpacity = 0.5,
|
||||
duration = 4,
|
||||
repeatDelay = 0.5,
|
||||
...props
|
||||
}: GridPatternProps) {
|
||||
const id = useId();
|
||||
const containerRef = useRef(null);
|
||||
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
||||
const [squares, setSquares] = useState(() => generateSquares(numSquares));
|
||||
|
||||
function getPos() {
|
||||
return [
|
||||
Math.floor((Math.random() * dimensions.width) / width),
|
||||
Math.floor((Math.random() * dimensions.height) / height),
|
||||
];
|
||||
}
|
||||
|
||||
// Adjust the generateSquares function to return objects with an id, x, and y
|
||||
function generateSquares(count: number) {
|
||||
return Array.from({ length: count }, (_, i) => ({
|
||||
id: i,
|
||||
pos: getPos(),
|
||||
}));
|
||||
}
|
||||
|
||||
// Function to update a single square's position
|
||||
const updateSquarePosition = (id: number) => {
|
||||
setSquares((currentSquares) =>
|
||||
currentSquares.map((sq) =>
|
||||
sq.id === id
|
||||
? {
|
||||
...sq,
|
||||
pos: getPos(),
|
||||
}
|
||||
: sq,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
// Update squares to animate in
|
||||
useEffect(() => {
|
||||
if (dimensions.width && dimensions.height) {
|
||||
setSquares(generateSquares(numSquares));
|
||||
}
|
||||
}, [dimensions, numSquares]);
|
||||
|
||||
// Resize observer to update container dimensions
|
||||
useEffect(() => {
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (let entry of entries) {
|
||||
setDimensions({
|
||||
width: entry.contentRect.width,
|
||||
height: entry.contentRect.height,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (containerRef.current) {
|
||||
resizeObserver.observe(containerRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (containerRef.current) {
|
||||
resizeObserver.unobserve(containerRef.current);
|
||||
}
|
||||
};
|
||||
}, [containerRef]);
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={containerRef}
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id={id}
|
||||
width={width}
|
||||
height={height}
|
||||
patternUnits="userSpaceOnUse"
|
||||
x={x}
|
||||
y={y}
|
||||
>
|
||||
<path
|
||||
d={`M.5 ${height}V.5H${width}`}
|
||||
fill="none"
|
||||
strokeDasharray={strokeDasharray}
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill={`url(#${id})`} />
|
||||
<svg x={x} y={y} className="overflow-visible">
|
||||
{squares.map(({ pos: [x, y], id }, index) => (
|
||||
<motion.rect
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: maxOpacity }}
|
||||
transition={{
|
||||
duration,
|
||||
repeat: 1,
|
||||
delay: index * 0.1,
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
onAnimationComplete={() => updateSquarePosition(id)}
|
||||
key={`${x}-${y}-${index}`}
|
||||
width={width - 1}
|
||||
height={height - 1}
|
||||
x={x ?? 1 * width + 1}
|
||||
y={y ?? 1 * height + 1}
|
||||
fill="currentColor"
|
||||
strokeWidth="0"
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default GridPattern;
|
||||
|
|
@ -130,7 +130,7 @@ export const GlareCard = ({
|
|||
<div className="w-full pb-10 bg-glass-gradient h-full grid [grid-area:1/1] mix-blend-soft-light [clip-path:inset(0_0_1px_0_round_var(--radius))] opacity-[var(--opacity)] transition-opacity transition-background duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-background [background:radial-gradient(farthest-corner_circle_at_var(--m-x)_var(--m-y),_rgba(255,255,255,0.8)_10%,_rgba(255,255,255,0.65)_20%,_rgba(255,255,255,0)_90%)]" />
|
||||
<div
|
||||
className="w-full h-full grid [grid-area:1/1] mix-blend-color-dodge opacity-[var(--opacity)] will-change-background transition-opacity [clip-path:inset(0_0_1px_0_round_var(--radius))] [background-blend-mode:hue_hue_hue_overlay] [background:var(--hero-gradient),_var(--rainbow),var(--diagonal),_var(--shade)] relative after:content-[''] after:grid-area-[inherit] after:bg-repeat-[inherit] after:bg-attachment-[inherit] after:bg-origin-[inherit] after:bg-clip-[inherit] after:bg-[inherit] after:mix-blend-exclusion after:[background-size:var(--foil-size),_200%_400%,_800%,_200%] after:[background-position:center,_0%_var(--bg-y),_calc(var(--bg-x)*_-1)_calc(var(--bg-y)*_-1),_var(--bg-x)_var(--bg-y)] after:[background-blend-mode:soft-light,_hue,_hard-light]"
|
||||
style={{ ...backgroundStyle , 'opacity':"12%"}}
|
||||
style={{ ...backgroundStyle , 'opacity':"10%"}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,21 @@
|
|||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import EmailInput from "./EmailInput";
|
||||
import GridPattern from "./CardPatterns/AnimatedGrid";
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { Gradient } from "./Features/features";
|
||||
// import {Animated}
|
||||
|
||||
function Cta() {
|
||||
return (
|
||||
<section
|
||||
id="try"
|
||||
className="relative mb-44 mt-60 flex w-full flex-col items-center justify-center gap-8 "
|
||||
className="relative bg-page-gradient dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] min-h-[600px] border-[1px] border-white/20 flex flex-col gap-8 justify-center items-center mt-60 mb-44 w-3/4 rounded-3xl py-10 px-8 mx-auto"
|
||||
>
|
||||
<div className="absolute left-0 z-[-1] h-full w-full">
|
||||
<div className="absolute -z-1 inset-0 rounded-3xl opacity-5 h-[600px] w-full bg-transparent bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
||||
|
||||
<div className="absolute left-0 w-full h-full z-[-1]">
|
||||
{/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
|
||||
<div className="overflow-hidden">
|
||||
<div
|
||||
|
|
@ -17,26 +24,30 @@ function Cta() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Image
|
||||
{/* <Image
|
||||
src="/landing-ui-2.png"
|
||||
alt="Landing page background"
|
||||
width={1512}
|
||||
height={1405}
|
||||
priority
|
||||
draggable="false"
|
||||
className="absolute z-[-2] hidden select-none rounded-3xl bg-black md:block lg:w-[80%]"
|
||||
/>
|
||||
<h1 className="z-20 mt-4 text-center text-5xl font-medium tracking-tight text-white">
|
||||
className="absolute z-[-2] hidden select-none rounded-3xl md:block lg:w-[80%] bg-page-gradient"
|
||||
/> */}
|
||||
<h1 className="text-sm z-20 text-gray-400 group font-geist mx-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent border-[2px] border-white/5 rounded-3xl w-fit">
|
||||
<p className="tracking-tight uppercase">
|
||||
Launching July 1st, 2024
|
||||
<ChevronRight className="inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
|
||||
</p>
|
||||
</h1>
|
||||
<h1 className="z-20 mx-auto mt-0 max-w-xl font-normal tracking-tighter text-5xl md:text-6xl lg:text-7xl text-center text-white">
|
||||
Your bookmarks are collecting dust.
|
||||
</h1>
|
||||
<div className="text-center text-sm text-zinc-500">
|
||||
Launching July 1st, 2024
|
||||
</div>
|
||||
<p className="text-soft-foreground-text z-20 text-center">
|
||||
Time to change that. <br /> Sign up for the waitlist and be the first to
|
||||
try Supermemory
|
||||
<p className="z-20 text-center text-lg">
|
||||
Sign up for the waitlist and be the first to try Supermemory
|
||||
</p>
|
||||
<EmailInput />
|
||||
<div className="w-1/2 mx-auto">
|
||||
<EmailInput />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,12 +34,12 @@ function EmailInput() {
|
|||
className="flex w-full items-center justify-center gap-2"
|
||||
>
|
||||
<div
|
||||
className={`transition-width z-20 rounded-2xl bg-gradient-to-br from-gray-200/70 to-transparent p-[0.7px] duration-300 ease-in-out ${email ? "w-[90%] md:w-[42%]" : "w-full md:w-1/2"}`}
|
||||
className={`transition-width z-20 rounded-2xl bg-gradient-to-br from-gray-200/70 to-transparent p-[0] duration-300 ease-in-out ${email ? "w-[90%] md:w-[42%]" : "w-full md:w-1/2"}`}
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
className={`transition-width py-4 bg-page-gradient flex w-full items-center rounded-xl border-white/20 bg-[#37485E] px-4 outline-none duration-300 focus:outline-none`}
|
||||
className={`transition-width py-4 bg-page-gradient flex w-full items-center rounded-xl border-white/5 bg-[#37485E] px-4 outline-none duration-300 focus:outline-none`}
|
||||
placeholder="Enter your email"
|
||||
value={email}
|
||||
required
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { CardClick } from "@repo/ui/components/cardClick";
|
|||
import FUIFeatureSectionWithCards from "./FeatureCardContent";
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import { Gradient } from "./Features/features";
|
||||
|
||||
export default function Features() {
|
||||
const [tab, setTab] = useState<number>(0);
|
||||
|
|
@ -30,23 +31,25 @@ export default function Features() {
|
|||
|
||||
return (
|
||||
<section className="overflow-hidden relative w-full max-lg:after:hidden">
|
||||
<img
|
||||
{/* <img
|
||||
src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
|
||||
className="absolute -top-0 left-10 opacity-60 z-2"
|
||||
/>
|
||||
<div className="relative bg-page-gradient">
|
||||
<div className="-z-1 absolute inset-x-0 -top-0 h-screen w-full bg-transparent bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] opacity-5 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
||||
/> */}
|
||||
<div className="absolute top-0 z-0 w-screen left-0 right-0 mx-auto min-h-screen overflow-hidden bg-inherit bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
|
||||
<div className="relative ">
|
||||
{/* <div className="-z-1 absolute inset-x-0 -top-0 h-screen w-full bg-transparent bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] opacity-5 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div> */}
|
||||
|
||||
<div className="flex relative flex-col px-4 mx-auto max-w-screen-xl md:px-8">
|
||||
<div className="mr-auto mb-10 space-y-4 max-w-3xl text-left">
|
||||
<div className="flex relative flex-col px-4 mx-auto max-w-screen-xl md:px-0">
|
||||
<div className="relative mx-auto mb-5 space-y-4 max-w-3xl text-center">
|
||||
<h2 className="pt-16 text-4xl tracking-tighter text-transparent bg-clip-text bg-gradient-to-tr via-white md:text-5xl lg:text-6xl font-nomral font-geist from-zinc-400/50 to-white/60">
|
||||
A Supermemory has all the memory saved for you
|
||||
</h2>
|
||||
|
||||
<p className="text-zinc-400">
|
||||
Supermemory offers all the vital building blocks you need to
|
||||
transform your idea into a great-looking startup.
|
||||
</p>
|
||||
<button className="flex gap-2 justify-center items-center py-2 px-10 mt-4 text-lg tracking-tighter text-center bg-gradient-to-br rounded-md ring-2 ring-offset-1 transition-all hover:ring-transparent group w-fit font-geist bg-page-gradient text-md from-zinc-400 to-zinc-700 text-zinc-50 ring-zinc-500/50 ring-offset-zinc-950/5 hover:scale-[1.02] active:scale-[0.98] active:ring-zinc-500/70">
|
||||
<button className="mx-auto flex gap-2 justify-center items-center py-2 px-10 mt-4 text-lg tracking-tighter text-center bg-gradient-to-br rounded-md ring-2 ring-offset-1 transition-all hover:ring-transparent group w-fit font-geist bg-page-gradient text-md from-zinc-400 to-zinc-700 text-zinc-50 ring-zinc-500/50 ring-offset-zinc-950/5 hover:scale-[1.02] active:scale-[0.98] active:ring-zinc-500/70">
|
||||
Get Started
|
||||
<div className="overflow-hidden relative ml-1 w-5 h-5">
|
||||
<ArrowUpRight className="absolute transition-all duration-500 group-hover:translate-x-4 group-hover:-translate-y-5" />
|
||||
|
|
@ -55,6 +58,12 @@ export default function Features() {
|
|||
</button>
|
||||
</div>
|
||||
<FUIFeatureSectionWithCards />
|
||||
<div className="overflow-x-hidden overflow-y-hidden">
|
||||
<div
|
||||
className="absolute left-0 top-[60%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-70 blur-[337.4px]"
|
||||
style={{ transform: "rotate(-30deg)" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { CheckIcon, ChevronRight, GithubIcon } from "lucide-react";
|
||||
import { Gradient } from "./features";
|
||||
|
||||
import Generating from "./generating";
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<div id="how-to-use">
|
||||
|
|
@ -127,7 +127,7 @@ const Services = () => {
|
|||
background:
|
||||
"linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.2) 40.92%, rgba(140, 121, 249, 0) 80.35%)",
|
||||
}}
|
||||
className="flex overflow-hidden relative items-center p-8 mt-10 mb-5 rounded-3xl border lg:p-20 bg-page-gradient z-1 h-[38rem] border-white/20 xl:h-[28rem] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
|
||||
className="flex overflow-hidden relative items-center p-8 mt-5 mb-5 rounded-3xl border lg:p-20 bg-page-gradient z-1 h-[38rem] border-white/20 xl:h-[28rem] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
|
||||
>
|
||||
<img
|
||||
src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
|
||||
|
|
|
|||
|
|
@ -1,30 +1,93 @@
|
|||
import {
|
||||
Github,
|
||||
// Github,
|
||||
Medium,
|
||||
Notion,
|
||||
Reddit,
|
||||
Twitter,
|
||||
} from "@repo/ui/components/icons";
|
||||
import Image from "next/image";
|
||||
const Github = ({className}: {className?:string}) => {
|
||||
return (
|
||||
<svg fill="#ffffff" className={className} version="1.1" id="svg2" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 2500 676.1" xmlSpace="preserve"><g id="layer1" transform="translate(-85.59 -376.905)"><g id="g3012" transform="matrix(1.25 0 0 -1.25 85.59 539.248)"><g id="g3014" transform="scale(.1)"><g id="g3016"><g id="g3018"><path id="path3024" className="st0" d="M3852.1-1016.2H2171.4c-43.4 0-78.5-35.2-78.5-78.6v-821.7c0-43.4 35.2-78.7 78.5-78.7H2827V-3016s-147.2-50.2-554.2-50.2c-480.2 0-1150.9 175.5-1150.9 1650.5 0 1475.3 698.5 1669.4 1354.2 1669.4 567.6 0 812.2-99.9 967.8-148.1 48.9-15 94.1 33.7 94.1 77.1l187.5 793.9c0 20.3-6.9 44.7-30 61.3-63.2 45.1-448.7 260.8-1422.6 260.8C1150.9 1298.8 0 821.4 0-1473.3S1317.6-4110 2428-4110c919.4 0 1477.1 392.9 1477.1 392.9 23 12.7 25.5 44.8 25.5 59.6v2562.7c0 43.4-35.2 78.6-78.5 78.6"/><path id="path3026" className="st0" d="M12513.4 1023.8c0 43.7-34.6 79-78 79h-946.3c-43.2 0-78.4-35.3-78.4-79l.3-1828.8H9936v1828.8c0 43.7-34.8 79-78.1 79h-946.3c-43.1 0-78.2-35.3-78.2-79V-3928c0-43.7 35.1-79.2 78.2-79.2h946.3c43.3 0 78.1 35.6 78.1 79.2v2118h1475l-2.6-2118c0-43.7 35.1-79.2 78.4-79.2h948.6c43.4 0 78 35.6 78.1 79.2v4951.8"/><path id="path3028" className="st0" d="M5637.8 374c0 340.7-273.2 616.1-610.2 616.1-336.7 0-610.1-275.4-610.1-616.1 0-340.4 273.4-616.5 610.1-616.5 337 0 610.2 276.1 610.2 616.5"/><path id="path3030" className="st0" d="M5570.1-2883.4v2285.8c0 43.4-35 78.9-78.3 78.9h-943.3c-43.3 0-82-44.6-82-88v-3274.8c0-96.3 60-124.9 137.6-124.9H5454c93.2 0 116.1 45.8 116.1 126.4v996.6"/><path id="path3032" className="st0" d="M16109.8-526.2h-939.1c-43.1 0-78.1-35.5-78.1-79.2v-2428s-238.5-174.5-577.2-174.5c-338.6 0-428.4 153.6-428.4 485.2v2117.4c0 43.7-35 79.2-78.1 79.2h-953.1c-43 0-78.3-35.5-78.3-79.2V-2883c0-984.8 548.8-1225.7 1303.9-1225.7 619.4 0 1118.8 342.2 1118.8 342.2s23.8-180.3 34.5-201.7c10.8-21.3 38.8-42.9 69.1-42.9l606.3 2.7c43 0 78.3 35.6 78.3 79l-.3 3324.1c.1 43.6-35 79.1-78.3 79.1"/><path id="path3034" className="st0" d="M18306-3205c-325.7 9.9-546.6 157.7-546.6 157.7v1568.1s218 133.6 485.4 157.5c338.2 30.3 664-71.9 664-878.5-.1-850.6-147.1-1018.5-602.8-1004.8zm370.4 2790c-533.4 0-896.1-238-896.1-238v1676.8c0 43.7-34.9 79-78.1 79h-949c-43.1 0-78.2-35.3-78.2-79V-3928c0-43.7 35.1-79.2 78.3-79.2h658.4c29.7 0 52.1 15.3 68.7 42.1 16.4 26.6 40 228.3 40 228.3s388.1-367.7 1122.6-367.7c862.4 0 1357 437.5 1357 1963.8 0 1526.2-789.9 1725.7-1323.6 1725.7"/><path id="path3036" className="st0" d="M8289.9-518.3H7580l-1.1 937.8c0 35.5-18.3 53.2-59.3 53.2h-967.3c-37.6 0-57.8-16.5-57.8-52.7v-969.1s-484.8-117-517.5-126.5c-32.6-9.5-56.7-39.6-56.7-75.5v-609c0-43.8 35-79.1 78.3-79.1h496v-1465c0-1088.2 763.3-1195.1 1278.4-1195.1 235.3 0 516.9 75.6 563.3 92.8 28.1 10.3 44.4 39.4 44.4 71l.8 669.9c0 43.7-36.9 79-78.5 79-41.4 0-147.2-16.8-256.1-16.8-348.7 0-466.8 162.1-466.8 372v1392.2H8290c43.3 0 78.3 35.3 78.3 79.1v762.8c-.1 43.8-35.2 79-78.4 79"/></g></g></g></g></g></svg>
|
||||
)
|
||||
}
|
||||
const NotionText = ({className}: {className?: string}) => {
|
||||
return (
|
||||
|
||||
<svg className={className} version="1.0" fill="#ffffff" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 600 400" xmlSpace="preserve">
|
||||
<style type="text/css">
|
||||
</style>
|
||||
<path d="M283.2,228.4v-39.7h0.7l28.6,39.7h9v-58.3h-10v39.6h-0.7l-28.6-39.6h-9v58.3L283.2,228.4L283.2,228.4z M349.8,229.3
|
||||
c13.2,0,21.3-8.6,21.3-23c0-14.3-8.1-23-21.3-23c-13.1,0-21.3,8.7-21.3,23C328.6,220.7,336.6,229.3,349.8,229.3z M349.8,220.9
|
||||
c-7,0-11-5.3-11-14.6c0-9.2,4-14.6,11-14.6c7,0,11,5.4,11,14.6C360.8,215.6,356.8,220.9,349.8,220.9z M380.2,173.4v11.1h-7v8h7v24.1
|
||||
c0,8.6,4,12,14.2,12c1.9,0,3.8-0.2,5.3-0.5v-7.8c-1.2,0.1-2,0.2-3.4,0.2c-4.2,0-6.1-1.9-6.1-6.3v-21.7h9.5v-8h-9.5v-11.1
|
||||
L380.2,173.4L380.2,173.4z M405.7,228.4h10v-44.2h-10V228.4z M410.7,176.9c3.3,0,6-2.7,6-6c0-3.4-2.7-6.1-6-6.1c-3.3,0-6,2.7-6,6.1
|
||||
C404.7,174.2,407.4,176.9,410.7,176.9L410.7,176.9z M443.1,229.3c13.2,0,21.3-8.6,21.3-23c0-14.3-8.1-23-21.3-23
|
||||
c-13.1,0-21.3,8.7-21.3,23C421.8,220.7,429.8,229.3,443.1,229.3z M443.1,220.9c-7,0-11-5.3-11-14.6c0-9.2,4-14.6,11-14.6
|
||||
c6.9,0,11,5.4,11,14.6C454,215.6,450,220.9,443.1,220.9z M470.3,228.4h10v-25.7c0-6.5,3.8-10.6,9.7-10.6c6.1,0,8.9,3.4,8.9,10.1
|
||||
v26.2h10v-28.6c0-10.6-5.4-16.5-15.2-16.5c-6.6,0-11,3-13.1,8h-0.7v-7.1h-9.7C470.3,184.2,470.3,228.4,470.3,228.4z"/>
|
||||
<g>
|
||||
<path className="st0" d="M120,152.1c4.7,3.8,6.4,3.5,15.2,2.9l82.9-5c1.8,0,0.3-1.8-0.3-2l-13.8-9.9c-2.6-2-6.2-4.4-12.9-3.8l-80.2,5.9
|
||||
c-2.9,0.3-3.5,1.8-2.3,2.9L120,152.1z M125,171.4v87.2c0,4.7,2.3,6.4,7.6,6.1l91.1-5.3c5.3-0.3,5.9-3.5,5.9-7.3v-86.6
|
||||
c0-3.8-1.5-5.9-4.7-5.6l-95.2,5.6C126.2,165.8,125,167.6,125,171.4L125,171.4z M214.9,176.1c0.6,2.6,0,5.3-2.6,5.6l-4.4,0.9v64.4
|
||||
c-3.8,2-7.3,3.2-10.3,3.2c-4.7,0-5.9-1.5-9.4-5.9l-28.7-45.1v43.6l9.1,2c0,0,0,5.3-7.3,5.3l-20.2,1.2c-0.6-1.2,0-4.1,2-4.7l5.3-1.5
|
||||
v-57.6l-7.3-0.6c-0.6-2.6,0.9-6.4,5-6.7l21.7-1.5l29.9,45.6V184l-7.6-0.9c-0.6-3.2,1.8-5.6,4.7-5.9L214.9,176.1z M104.2,132.2
|
||||
l83.5-6.1c10.2-0.9,12.9-0.3,19.3,4.4l26.6,18.7c4.4,3.2,5.9,4.1,5.9,7.6v102.7c0,6.4-2.3,10.2-10.5,10.8l-96.9,5.9
|
||||
c-6.2,0.3-9.1-0.6-12.3-4.7L100.1,246c-3.5-4.7-5-8.2-5-12.3v-91.3C95.1,137.1,97.5,132.8,104.2,132.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
const MediumText = ({className}: {className?:string}) => {
|
||||
return (
|
||||
|
||||
<svg className={className} fill="#ffffff" version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 652 652" xmlSpace="preserve">
|
||||
<path d="M112,321.5c0,25-20.1,45.3-45,45.3s-45-20.3-45-45.3s20.1-45.3,45-45.3S112,296.5,112,321.5 M161.3,321.5
|
||||
c0,23.5-10.1,42.6-22.5,42.6c-12.4,0-22.5-19.1-22.5-42.6s10.1-42.6,22.5-42.6C151.2,278.9,161.3,297.9,161.3,321.5 M181.5,321.5
|
||||
c0,21.1-3.5,38.2-7.9,38.2c-4.4,0-7.9-17.1-7.9-38.2s3.5-38.2,7.9-38.2S181.5,300.4,181.5,321.5 M305.6,280.1l0.1,0v-1h-25.6
|
||||
L256.4,335l-23.8-55.8h-27.6v1l0.1,0c4.7,1.1,7,2.6,7,8.3v66.4c0,5.7-2.4,7.2-7,8.3l-0.1,0v1h18.7v-1l-0.1,0c-4.7-1.1-7-2.6-7-8.3
|
||||
v-62.5l30.5,71.8h1.7l31.4-73.8v66.2c-0.4,4.5-2.7,5.9-7,6.8l-0.1,0v1h32.6v-1l-0.1,0c-4.2-1-6.6-2.3-7-6.8l0-68h0
|
||||
C298.6,282.8,301,281.2,305.6,280.1 M320.5,324.1c0.5-11.9,4.8-20.5,12-20.7c2.2,0,4.1,0.8,5.5,2.2c3.1,3,4.5,9.2,4.3,18.5H320.5z
|
||||
M320.2,327.4h38.2v-0.2c-0.1-9.1-2.7-16.2-7.8-21.1c-4.4-4.2-10.9-6.5-17.8-6.5h-0.2c-3.6,0-7.9,0.9-11,2.4
|
||||
c-3.5,1.6-6.6,4.1-9.2,7.3c-4.2,5.2-6.7,12.1-7.3,20c0,0.2,0,0.5-0.1,0.7c0,0.2,0,0.4,0,0.7c-0.1,1.1-0.1,2.2-0.1,3.3
|
||||
c0.4,17.8,10,32,27.1,32c15,0,23.7-10.9,25.9-25.6l-1.1-0.4c-3.8,7.9-10.7,12.7-18.5,12.1C327.6,351.3,319.4,340.5,320.2,327.4
|
||||
M401.5,351.5c-1.3,3-3.9,4.6-7.4,4.6s-6.7-2.4-9-6.8c-2.4-4.7-3.7-11.3-3.7-19.2c0-16.3,5.1-26.9,13-26.9c3.3,0,5.9,1.6,7.1,4.5
|
||||
V351.5z M426.9,363.2c-4.7-1.1-7-2.7-7-8.7v-79.3l-28.4,8.4v1l0.2,0c3.9-0.3,6.6,0.2,8.1,1.6c1.2,1.1,1.8,2.8,1.8,5.2v10.9
|
||||
c-2.8-1.8-6.1-2.7-10.2-2.7c-8.2,0-15.7,3.4-21.1,9.7c-5.6,6.5-8.6,15.4-8.6,25.8c0,18.5,9.1,30.9,22.6,30.9
|
||||
c7.9,0,14.3-4.3,17.2-11.7v9.8H427v-1L426.9,363.2z M451.2,286c0-5.8-4.3-10.1-10.1-10.1c-5.7,0-10.2,4.4-10.2,10.1
|
||||
s4.5,10.1,10.2,10.1C446.8,296.1,451.2,291.8,451.2,286 M457.9,363.2c-4.7-1.1-7-2.7-7-8.7h0v-54.6l-25.5,7.3v1l0.2,0
|
||||
c5.5,0.5,7,2.4,7,8.8v47.2H458v-1L457.9,363.2z M523.1,363.2c-4.7-1.1-7-2.7-7-8.7v-54.6l-24.2,7.1v1l0.1,0c4.5,0.5,5.8,2.5,5.8,8.9
|
||||
v34.5c-1.5,3-4.3,4.7-7.7,4.9c-5.5,0-8.6-3.7-8.6-10.5v-45.9l-25.5,7.3v1l0.2,0c5.5,0.5,7,2.4,7,8.8v29.2c0,2,0.2,4.1,0.5,6.1l0.5,2
|
||||
c2.2,7.7,7.8,11.8,16.6,11.8c7.5,0,14.1-4.6,17-11.9v10.1h25.5v-1L523.1,363.2z M622,364.2v-1l-0.1,0c-5.1-1.2-7-3.4-7-7.9v-37.1
|
||||
c0-11.6-6.5-18.5-17.4-18.5c-7.9,0-14.6,4.6-17.2,11.7c-2-7.6-7.9-11.7-16.7-11.7c-7.7,0-13.7,4-16.2,10.9v-10.7l-25.5,7v1l0.2,0
|
||||
c5.4,0.5,7,2.4,7,8.7v47.6h23.8v-1l-0.1,0c-4-0.9-5.3-2.7-5.3-7.1v-42.6c1.1-2.5,3.2-5.5,7.5-5.5c5.3,0,8,3.7,8,10.9v45.3h23.8v-1
|
||||
l-0.1,0c-4-0.9-5.3-2.7-5.3-7.1v-37.9c0-1.4-0.1-2.8-0.3-4.2c1.1-2.7,3.4-5.9,7.8-5.9c5.4,0,8,3.6,8,10.9v45.3H622z"/>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
const logos = [
|
||||
{
|
||||
name: "Larvel",
|
||||
url: <Github className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
name: "Github",
|
||||
url: <Github className="w-32 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Nextjs",
|
||||
url: <Medium className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
name: "Medium",
|
||||
url: <MediumText className="w-52 h brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Prime",
|
||||
url: <Notion className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
name: "Notion",
|
||||
url: <NotionText className="w-52 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Trustpilot",
|
||||
name: "Reddit",
|
||||
url: <Reddit className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Webflow",
|
||||
name: "Twitter",
|
||||
url: <Twitter className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
];
|
||||
|
|
@ -32,7 +95,7 @@ const logos = [
|
|||
const AnimatedLogoCloud = () => {
|
||||
return (
|
||||
<div className="py-2 max-w-4xl">
|
||||
<p className="font-normal tracking-tighter text-base text-gray-100 bg-gradient-to-br from-zinc-400 via-zinc-300 to-zinc-700 bg-clip-text text-transparent text-center mt-6">
|
||||
<p className="font-normal tracking-tighter text-base text-gray-100 bg-gradient-to-br from-zinc-400 via-zinc-300 to-zinc-700 bg-clip-text text-transparent text-center mt-4">
|
||||
Well Integrated with six companies so far
|
||||
|
||||
|
||||
|
|
@ -40,13 +103,13 @@ const AnimatedLogoCloud = () => {
|
|||
{/* <hr className="h-[0.1px] relative bg-white/10" /> */}
|
||||
|
||||
<div className="relative bg-page-gradient h-full mx-auto max-w-full">
|
||||
<div className="absolute z-40 mx-auto h-screen overflow-hidden bg-inherit bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
|
||||
<div className="absolute z-40 mx-auto h-screen overflow-hidden bg-inherit bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
|
||||
|
||||
</div>
|
||||
<div className="px-4 mx-auto w-full md:px-8 relative ">
|
||||
|
||||
<div
|
||||
className="flex overflow-hidden relative gap-6 p-2 mt-6 group"
|
||||
className="flex overflow-hidden relative gap-6 p-2 mt-[-40px] group"
|
||||
style={{
|
||||
maskImage:
|
||||
"linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)",
|
||||
|
|
@ -57,7 +120,7 @@ const AnimatedLogoCloud = () => {
|
|||
.map((index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-row gap-10 justify-around animate-logo-cloud shrink-0"
|
||||
className="flex flex-row gap-5 justify-around items-center animate-logo-cloud shrink-0"
|
||||
>
|
||||
{logos.map((logo, key) => (
|
||||
<>{logo.url}</>
|
||||
|
|
@ -71,3 +134,5 @@ const AnimatedLogoCloud = () => {
|
|||
};
|
||||
|
||||
export default AnimatedLogoCloud;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const RotatingIcons: React.FC = () => {
|
|||
{...{
|
||||
transition: {delay: 0.2 },
|
||||
}}
|
||||
className="text-center max-w-2xl mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter text-transparent md:text-7xl"
|
||||
className="text-center max-w-2xl mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter text-transparent md:text-5xl lg:text-6xl"
|
||||
>
|
||||
Collect any data{" "}
|
||||
<span className="bg-gradient-to-r from-zinc-300 to-blue-200 bg-clip-text text-transparent">
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"scripts": {
|
||||
"vercel-build": "next build"
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ import { redirect } from "next/navigation";
|
|||
import FUIPricingSectionWithBadge from "./Pricing";
|
||||
import Services from "./Features/index";
|
||||
import { Showcases } from "./Showcase";
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
|
||||
export const runtime = "edge";
|
||||
|
||||
|
|
@ -23,11 +24,11 @@ export default async function Home() {
|
|||
}
|
||||
|
||||
return (
|
||||
<main className="flex relative min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0 font-geistSans bg-hero-gradient">
|
||||
<main className="flex overflow-x-hidden relative flex-col items-center px-2 min-h-screen md:px-0 font-geistSans bg-hero-gradient">
|
||||
<Navbar />
|
||||
|
||||
{/* Background gradients */}
|
||||
<div className="absolute left-0 top-0 z-[-1] h-full w-full">
|
||||
<div className="absolute top-0 left-0 w-full h-full z-[-1]">
|
||||
<div className="overflow-x-hidden">
|
||||
<div
|
||||
className="absolute left-0 h-32 w-[95%] overflow-x-hidden bg-[#369DFD] bg-opacity-70 blur-[337.4px]"
|
||||
|
|
@ -55,13 +56,11 @@ export default async function Home() {
|
|||
|
||||
{/* Features section */}
|
||||
<Features />
|
||||
|
||||
<RotatingIcons />
|
||||
|
||||
<RotatingIcons />
|
||||
<Cta />
|
||||
|
||||
<Toaster />
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue