mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-10-06 02:47:54 +00:00
Merge pull request #82 from Kinfe123/feat/landing_revamp
This commit is contained in:
Dhravya Shah
GitHub
commit
6f81cd6690
48 changed files with 2499 additions and 464 deletions
|
|
@ -0,0 +1,70 @@
|
|||
@keyframes background-pan {
|
||||
from {
|
||||
background-position: 0% center;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: -200% center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
from,
|
||||
to {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
--size: clamp(20px, 1.5vw, 30px);
|
||||
|
||||
animation: scale 700ms ease forwards;
|
||||
display: block;
|
||||
height: var(--size);
|
||||
left: var(--star-left);
|
||||
position: absolute;
|
||||
top: var(--star-top);
|
||||
width: var(--size);
|
||||
}
|
||||
|
||||
.star > svg {
|
||||
animation: rotate 1000ms linear infinite;
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.star > svg > path {
|
||||
fill: #7b3907;
|
||||
}
|
||||
|
||||
.magicText {
|
||||
--purple: rgba(72, 130, 244, 0.868);
|
||||
--violet: #9a80f7;
|
||||
--pink: #f7f7f7;
|
||||
animation: background-pan 3s linear infinite;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--purple),
|
||||
var(--violet),
|
||||
var(--pink),
|
||||
var(--purple)
|
||||
);
|
||||
background-size: 200%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -3,81 +3,100 @@ import Link from "next/link";
|
|||
import Logo from "@/public/logo.svg";
|
||||
import { signIn } from "@/server/auth";
|
||||
import { Google } from "@repo/ui/components/icons";
|
||||
import gradientStyle from "./_components/TextGradient/gradient.module.css";
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
|
||||
export const runtime = "edge";
|
||||
|
||||
async function Signin({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Record<string, string | string[] | undefined>;
|
||||
}) {
|
||||
const searchParamsAsString = Object.keys(searchParams)
|
||||
.map((key) => {
|
||||
return `${key}=${searchParams[key]}`;
|
||||
})
|
||||
.join("&");
|
||||
|
||||
async function Signin() {
|
||||
return (
|
||||
<div className="flex items-center justify-between min-h-screen">
|
||||
<div className="relative w-full lg:w-1/2 flex items-center justify-center lg:justify-start min-h-screen bg-secondary p-8">
|
||||
<div className="flex relative font-geistSans overflow-hidden items-center justify-between min-h-screen">
|
||||
<div className="relative w-full lg:w-1/2 flex items-center min-h-screen bg-page-gradient p-8 border-r-[1px] border-white/5">
|
||||
<div className="absolute top-0 left-0 p-8 text-white inline-flex gap-2 items-center">
|
||||
<Image src={Logo} alt="SuperMemory logo" className="brightness-100" />
|
||||
<span className="text-xl">SuperMemory.ai</span>
|
||||
<Image
|
||||
src={Logo}
|
||||
alt="SuperMemory logo"
|
||||
className="hover:brightness-125 duration-200"
|
||||
/>
|
||||
<span className="text-xl">supermemory.ai</span>
|
||||
</div>
|
||||
<div className="absolute inset-0 opacity-5 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>
|
||||
<img
|
||||
className="absolute inset-x-0 -top-20 opacity-20"
|
||||
src={"/images/landing-hero-left.png"}
|
||||
width={1000}
|
||||
height={1000}
|
||||
alt="back bg"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<h1 className="text-5xl text-foreground mb-8">
|
||||
Hello, <span className="text-white">human</span>
|
||||
<div className="pl-4 z-20">
|
||||
<h1 className="text-5xl text-white mb-8 tracking-tighter">
|
||||
Hello,{" "}
|
||||
<span
|
||||
className={cn(
|
||||
"bg-gradient-to-tr from-zinc-100 via-zinc-200/50 to-zinc-200/90 text-transparent bg-clip-text animate-gradient",
|
||||
gradientStyle.magicText,
|
||||
)}
|
||||
>
|
||||
human
|
||||
</span>{" "}
|
||||
</h1>
|
||||
<p className="text-white mb-8 text-lg">
|
||||
<p className="text-white mb-8 text-lg tracking-tighter">
|
||||
Write, ideate, and learn with all the wisdom of your bookmarks.
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<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 w-3/4 hover:bg-opacity-90 hover:shadow-lg group`}
|
||||
className={`relative cursor-pointer transition-width z-20 rounded-2xl bg-hero-gradient p-[0.7px] duration-500 ease-in-out fit dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]`}
|
||||
>
|
||||
<form
|
||||
action={async () => {
|
||||
"use server";
|
||||
await signIn("google", {
|
||||
redirectTo: `/home?firstTime=true&${searchParamsAsString}`,
|
||||
redirectTo: "/home?firstTime=true",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
className={`relative text-white transition-width flex justify-between w-full items-center rounded-2xl bg-[#37485E] px-6 py-4 outline-none duration-300 focus:outline-none group-hover:bg-opacity-50 group`}
|
||||
className={`relative text-white transition-width flex gap-3 justify-center w-full items-center rounded-2xl bg-page-gradient hover:opacity-70 duration-500 px-6 py-4 outline-none duration- focus:outline-none `}
|
||||
>
|
||||
<Google />
|
||||
<span className="relative w-full self-start">
|
||||
Continue with Google
|
||||
</span>
|
||||
<span className="relative w-full">Continue with Google</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-slate-100 absolute bottom-4 lg:left-8 lg:-translate-x-0 left-1/2 -translate-x-1/2 ">
|
||||
<Link href="/terms" className="text-slate-300">
|
||||
<div className="text-slate-500 mt-16 z-20">
|
||||
By continuing, you agree to the
|
||||
<Link href="/terms" className="text-slate-200">
|
||||
{" "}
|
||||
Terms of Service
|
||||
</Link>{" "}
|
||||
|
|
||||
<Link href="/privacy" className="text-slate-300">
|
||||
and
|
||||
<Link href="/privacy" className="text-slate-200">
|
||||
{" "}
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/2 hidden lg:flex flex-col items-center justify-center min-h-screen">
|
||||
<span className="text-3xl leading-relaxed italic mb-8">
|
||||
<div className="relative hidden w-0 lg:flex lg:w-1/2 flex-col items-center justify-center min-h-screen bg-page-gradient overflow-hidden">
|
||||
<img
|
||||
className="absolute inset-x-0 -top-20 opacity-15 "
|
||||
src={"/images/landing-hero-left.webp"}
|
||||
width={1000}
|
||||
height={1000}
|
||||
alt="back bg"
|
||||
/>
|
||||
<span className="text-3xl leading-relaxed tracking-tighter mb-8">
|
||||
Ready for your{" "}
|
||||
<span className="text-white font-bold">Second brain</span>?
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<Image
|
||||
className="mx-auto rounded-lg shadow-2xl lg:max-w-none"
|
||||
src={"/images/carousel-illustration-01.png"}
|
||||
className="mx-auto rounded-lg shadow-2xl w-[calc(100%-100px)] md:px-14 lg:px-0 lg:max-w-none"
|
||||
src={"/images/memory.svg"}
|
||||
width={700}
|
||||
height={520}
|
||||
alt="Carousel 01"
|
||||
|
|
|
|||
186
apps/web/app/(landing)/CardPatterns/AnimatedBeam.tsx
Normal file
186
apps/web/app/(landing)/CardPatterns/AnimatedBeam.tsx
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
"use client";
|
||||
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
import { motion } from "framer-motion";
|
||||
import { RefObject, useEffect, useId, useState } from "react";
|
||||
|
||||
export interface AnimatedBeamProps {
|
||||
className?: string;
|
||||
containerRef: RefObject<HTMLElement>; // Container ref
|
||||
fromRef: RefObject<HTMLElement>;
|
||||
toRef: RefObject<HTMLElement>;
|
||||
curvature?: number;
|
||||
reverse?: boolean;
|
||||
pathColor?: string;
|
||||
pathWidth?: number;
|
||||
pathOpacity?: number;
|
||||
gradientStartColor?: string;
|
||||
gradientStopColor?: string;
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
startXOffset?: number;
|
||||
startYOffset?: number;
|
||||
endXOffset?: number;
|
||||
endYOffset?: number;
|
||||
}
|
||||
|
||||
export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
|
||||
className,
|
||||
containerRef,
|
||||
fromRef,
|
||||
toRef,
|
||||
curvature = 0,
|
||||
reverse = false, // Include the reverse prop
|
||||
duration = Math.random() * 3 + 4,
|
||||
delay = 0,
|
||||
pathColor = "gray",
|
||||
pathWidth = 2,
|
||||
pathOpacity = 0.2,
|
||||
gradientStartColor = "#ffaa40",
|
||||
gradientStopColor = "#9c40ff",
|
||||
startXOffset = 0,
|
||||
startYOffset = 0,
|
||||
endXOffset = 0,
|
||||
endYOffset = 0,
|
||||
}) => {
|
||||
const id = useId();
|
||||
const [pathD, setPathD] = useState("");
|
||||
const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
|
||||
|
||||
// Calculate the gradient coordinates based on the reverse prop
|
||||
const gradientCoordinates = reverse
|
||||
? {
|
||||
x1: ["90%", "-10%"],
|
||||
x2: ["100%", "0%"],
|
||||
y1: ["0%", "0%"],
|
||||
y2: ["0%", "0%"],
|
||||
}
|
||||
: {
|
||||
x1: ["10%", "110%"],
|
||||
x2: ["0%", "100%"],
|
||||
y1: ["0%", "0%"],
|
||||
y2: ["0%", "0%"],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const updatePath = () => {
|
||||
if (containerRef.current && fromRef.current && toRef.current) {
|
||||
const containerRect = containerRef.current.getBoundingClientRect();
|
||||
const rectA = fromRef.current.getBoundingClientRect();
|
||||
const rectB = toRef.current.getBoundingClientRect();
|
||||
|
||||
const svgWidth = containerRect.width;
|
||||
const svgHeight = containerRect.height;
|
||||
setSvgDimensions({ width: svgWidth, height: svgHeight });
|
||||
|
||||
const startX =
|
||||
rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
|
||||
const startY =
|
||||
rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
|
||||
const endX =
|
||||
rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
|
||||
const endY =
|
||||
rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
|
||||
|
||||
const controlY = startY - curvature;
|
||||
const d = `M ${startX},${startY} Q ${(startX + endX) / 2
|
||||
},${controlY} ${endX},${endY}`;
|
||||
setPathD(d);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize ResizeObserver
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
// For all entries, recalculate the path
|
||||
for (let entry of entries) {
|
||||
updatePath();
|
||||
}
|
||||
});
|
||||
|
||||
// Observe the container element
|
||||
if (containerRef.current) {
|
||||
resizeObserver.observe(containerRef.current);
|
||||
}
|
||||
|
||||
// Call the updatePath initially to set the initial path
|
||||
updatePath();
|
||||
|
||||
// Clean up the observer on component unmount
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}, [
|
||||
containerRef,
|
||||
fromRef,
|
||||
toRef,
|
||||
curvature,
|
||||
startXOffset,
|
||||
startYOffset,
|
||||
endXOffset,
|
||||
endYOffset,
|
||||
]);
|
||||
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
width={svgDimensions.width}
|
||||
height={svgDimensions.height}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={cn(
|
||||
"pointer-events-none absolute left-0 top-0 transform-gpu stroke-2",
|
||||
className,
|
||||
)}
|
||||
viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
|
||||
>
|
||||
<path
|
||||
d={pathD}
|
||||
stroke={pathColor}
|
||||
strokeWidth={pathWidth}
|
||||
strokeOpacity={pathOpacity}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d={pathD}
|
||||
strokeWidth={pathWidth}
|
||||
stroke={`url(#${id})`}
|
||||
strokeOpacity="1"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<motion.linearGradient
|
||||
className="transform-gpu"
|
||||
id={id}
|
||||
gradientUnits={"userSpaceOnUse"}
|
||||
initial={{
|
||||
x1: "0%",
|
||||
x2: "0%",
|
||||
y1: "0%",
|
||||
y2: "0%",
|
||||
}}
|
||||
animate={{
|
||||
x1: gradientCoordinates.x1,
|
||||
x2: gradientCoordinates.x2,
|
||||
y1: gradientCoordinates.y1,
|
||||
y2: gradientCoordinates.y2,
|
||||
}}
|
||||
transition={{
|
||||
delay,
|
||||
duration,
|
||||
ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo
|
||||
repeat: Infinity,
|
||||
repeatDelay: 0,
|
||||
}}
|
||||
>
|
||||
<stop stopColor={gradientStartColor} stopOpacity="0"></stop>
|
||||
<stop stopColor={gradientStartColor}></stop>
|
||||
<stop offset="32.5%" stopColor={gradientStopColor}></stop>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor={gradientStopColor}
|
||||
stopOpacity="0"
|
||||
></stop>
|
||||
</motion.linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
494
apps/web/app/(landing)/CardPatterns/AnimatedBeamWithOutput.tsx
Normal file
494
apps/web/app/(landing)/CardPatterns/AnimatedBeamWithOutput.tsx
Normal file
|
|
@ -0,0 +1,494 @@
|
|||
"use client";
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
import { AnimatedBeam } from "./AnimatedBeam";
|
||||
import React, { forwardRef, useRef } from "react";
|
||||
import Logo from "../../../public/logo.svg";
|
||||
import Image from "next/image";
|
||||
const Circle = forwardRef<
|
||||
HTMLDivElement,
|
||||
{ className?: string; children?: React.ReactNode }
|
||||
>(({ className, children }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export function AnimatedBeamShow() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const div1Ref = useRef<HTMLDivElement>(null);
|
||||
const div2Ref = useRef<HTMLDivElement>(null);
|
||||
const div3Ref = useRef<HTMLDivElement>(null);
|
||||
const div4Ref = useRef<HTMLDivElement>(null);
|
||||
const div5Ref = useRef<HTMLDivElement>(null);
|
||||
const div6Ref = useRef<HTMLDivElement>(null);
|
||||
const div7Ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex overflow-hidden relative justify-center items-center p-10 px-10 w-full max-w-full bg-transparent"
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className="flex flex-col gap-10 justify-between items-stretch w-full h-full">
|
||||
<div className="flex flex-row justify-between items-center">
|
||||
<Circle ref={div1Ref}>
|
||||
<Icons.googleDrive />
|
||||
</Circle>
|
||||
<Circle ref={div5Ref}>
|
||||
<Icons.googleDocs />
|
||||
</Circle>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between items-center">
|
||||
<Circle ref={div2Ref}>
|
||||
<Icons.notion />
|
||||
</Circle>
|
||||
<Circle ref={div4Ref} className="w-16 h-16 bg-page-gradient bg-slate-900 border border-white/20 [box-shadow:0_-20px_80px_-20px_#8686f01f_inset]">
|
||||
<Image src={Logo} className="text-black w-full h-full" alt="logo image" />
|
||||
</Circle>
|
||||
<Circle ref={div6Ref}>
|
||||
<Icons.zapier />
|
||||
</Circle>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between items-center">
|
||||
<Circle ref={div3Ref}>
|
||||
<Icons.whatsapp />
|
||||
</Circle>
|
||||
<Circle ref={div7Ref}>
|
||||
<Icons.messenger />
|
||||
</Circle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AnimatedBeam
|
||||
containerRef={containerRef}
|
||||
fromRef={div1Ref}
|
||||
toRef={div4Ref}
|
||||
curvature={-75}
|
||||
endYOffset={-10}
|
||||
/>
|
||||
<AnimatedBeam
|
||||
containerRef={containerRef}
|
||||
fromRef={div2Ref}
|
||||
toRef={div4Ref}
|
||||
/>
|
||||
<AnimatedBeam
|
||||
containerRef={containerRef}
|
||||
fromRef={div3Ref}
|
||||
toRef={div4Ref}
|
||||
curvature={75}
|
||||
endYOffset={10}
|
||||
/>
|
||||
<AnimatedBeam
|
||||
containerRef={containerRef}
|
||||
fromRef={div5Ref}
|
||||
toRef={div4Ref}
|
||||
curvature={-75}
|
||||
endYOffset={-10}
|
||||
reverse
|
||||
/>
|
||||
<AnimatedBeam
|
||||
containerRef={containerRef}
|
||||
fromRef={div6Ref}
|
||||
toRef={div4Ref}
|
||||
reverse
|
||||
/>
|
||||
<AnimatedBeam
|
||||
containerRef={containerRef}
|
||||
fromRef={div7Ref}
|
||||
toRef={div4Ref}
|
||||
curvature={75}
|
||||
endYOffset={10}
|
||||
reverse
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Icons = {
|
||||
notion: () => (
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
|
||||
fill="#ffffff"
|
||||
/>
|
||||
<path
|
||||
d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
|
||||
fill="#000000"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
openai: () => (
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
|
||||
</svg>
|
||||
),
|
||||
googleDrive: () => (
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 87.3 78"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
|
||||
fill="#0066da"
|
||||
/>
|
||||
<path
|
||||
d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
|
||||
fill="#00ac47"
|
||||
/>
|
||||
<path
|
||||
d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
|
||||
fill="#ea4335"
|
||||
/>
|
||||
<path
|
||||
d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
|
||||
fill="#00832d"
|
||||
/>
|
||||
<path
|
||||
d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
|
||||
fill="#2684fc"
|
||||
/>
|
||||
<path
|
||||
d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
|
||||
fill="#ffba00"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
whatsapp: () => (
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 175.216 175.552"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="b"
|
||||
x1="85.915"
|
||||
x2="86.535"
|
||||
y1="32.567"
|
||||
y2="137.092"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0" stopColor="#57d163" />
|
||||
<stop offset="1" stopColor="#23b33a" />
|
||||
</linearGradient>
|
||||
<filter
|
||||
id="a"
|
||||
width="1.115"
|
||||
height="1.114"
|
||||
x="-.057"
|
||||
y="-.057"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feGaussianBlur stdDeviation="3.531" />
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
|
||||
fill="#b3b3b3"
|
||||
filter="url(#a)"
|
||||
/>
|
||||
<path
|
||||
d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
|
||||
fill="#ffffff"
|
||||
/>
|
||||
<path
|
||||
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
|
||||
fill="url(#linearGradient1780)"
|
||||
/>
|
||||
<path
|
||||
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
|
||||
fill="url(#b)"
|
||||
/>
|
||||
<path
|
||||
d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
|
||||
fill="#ffffff"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
googleDocs: () => (
|
||||
<svg
|
||||
width="47px"
|
||||
height="65px"
|
||||
viewBox="0 0 47 65"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
|
||||
id="path-1"
|
||||
/>
|
||||
<path
|
||||
d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
|
||||
id="path-3"
|
||||
/>
|
||||
<linearGradient
|
||||
x1="50.0053945%"
|
||||
y1="8.58610612%"
|
||||
x2="50.0053945%"
|
||||
y2="100.013939%"
|
||||
id="linearGradient-5"
|
||||
>
|
||||
<stop stopColor="#1A237E" stopOpacity="0.2" offset="0%" />
|
||||
<stop stopColor="#1A237E" stopOpacity="0.02" offset="100%" />
|
||||
</linearGradient>
|
||||
<path
|
||||
d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
|
||||
id="path-6"
|
||||
/>
|
||||
<path
|
||||
d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
|
||||
id="path-8"
|
||||
/>
|
||||
<path
|
||||
d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
|
||||
id="path-10"
|
||||
/>
|
||||
<path
|
||||
d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
|
||||
id="path-12"
|
||||
/>
|
||||
<path
|
||||
d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
|
||||
id="path-14"
|
||||
/>
|
||||
<radialGradient
|
||||
cx="3.16804688%"
|
||||
cy="2.71744318%"
|
||||
fx="3.16804688%"
|
||||
fy="2.71744318%"
|
||||
r="161.248516%"
|
||||
gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.723077),translate(-0.031680,-0.027174)"
|
||||
id="radialGradient-16"
|
||||
>
|
||||
<stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%" />
|
||||
<stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<g
|
||||
id="Page-1"
|
||||
stroke="none"
|
||||
strokeWidth="1"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
>
|
||||
<g transform="translate(-451.000000, -463.000000)">
|
||||
<g id="Hero" transform="translate(0.000000, 63.000000)">
|
||||
<g id="Personal" transform="translate(277.000000, 309.000000)">
|
||||
<g id="Docs-icon" transform="translate(174.000000, 91.000000)">
|
||||
<g id="Group">
|
||||
<g id="Clipped">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlinkHref="#path-1" />
|
||||
</mask>
|
||||
<g id="SVGID_1_" />
|
||||
<path
|
||||
d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L36.71875,10.3409091 L29.375,0 Z"
|
||||
id="Path"
|
||||
fill="#4285F4"
|
||||
fillRule="nonzero"
|
||||
mask="url(#mask-2)"
|
||||
/>
|
||||
</g>
|
||||
<g id="Clipped">
|
||||
<mask id="mask-4" fill="white">
|
||||
<use xlinkHref="#path-3" />
|
||||
</mask>
|
||||
<g id="SVGID_1_" />
|
||||
<polygon
|
||||
id="Path"
|
||||
fill="url(#linearGradient-5)"
|
||||
fillRule="nonzero"
|
||||
mask="url(#mask-4)"
|
||||
points="30.6638281 16.4309659 47 32.8582386 47 17.7272727"
|
||||
></polygon>
|
||||
</g>
|
||||
<g id="Clipped">
|
||||
<mask id="mask-7" fill="white">
|
||||
<use xlinkHref="#path-6" />
|
||||
</mask>
|
||||
<g id="SVGID_1_" />
|
||||
<path
|
||||
d="M11.75,47.2727273 L35.25,47.2727273 L35.25,44.3181818 L11.75,44.3181818 L11.75,47.2727273 Z M11.75,53.1818182 L29.375,53.1818182 L29.375,50.2272727 L11.75,50.2272727 L11.75,53.1818182 Z M11.75,32.5 L11.75,35.4545455 L35.25,35.4545455 L35.25,32.5 L11.75,32.5 Z M11.75,41.3636364 L35.25,41.3636364 L35.25,38.4090909 L11.75,38.4090909 L11.75,41.3636364 Z"
|
||||
id="Shape"
|
||||
fill="#F1F1F1"
|
||||
fillRule="nonzero"
|
||||
mask="url(#mask-7)"
|
||||
/>
|
||||
</g>
|
||||
<g id="Clipped">
|
||||
<mask id="mask-9" fill="white">
|
||||
<use xlinkHref="#path-8" />
|
||||
</mask>
|
||||
<g id="SVGID_1_" />
|
||||
<g id="Group" mask="url(#mask-9)">
|
||||
<g transform="translate(26.437500, -2.954545)">
|
||||
<path
|
||||
d="M2.9375,2.95454545 L2.9375,16.25 C2.9375,18.6985795 4.90929688,20.6818182 7.34375,20.6818182 L20.5625,20.6818182 L2.9375,2.95454545 Z"
|
||||
id="Path"
|
||||
fill="#A1C2FA"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Clipped">
|
||||
<mask id="mask-11" fill="white">
|
||||
<use xlinkHref="#path-10" />
|
||||
</mask>
|
||||
<g id="SVGID_1_" />
|
||||
<path
|
||||
d="M4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,4.80113636 C0,2.36363636 1.9828125,0.369318182 4.40625,0.369318182 L29.375,0.369318182 L29.375,0 L4.40625,0 Z"
|
||||
id="Path"
|
||||
fillOpacity="0.2"
|
||||
fill="#FFFFFF"
|
||||
fillRule="nonzero"
|
||||
mask="url(#mask-11)"
|
||||
/>
|
||||
</g>
|
||||
<g id="Clipped">
|
||||
<mask id="mask-13" fill="white">
|
||||
<use xlinkHref="#path-12" />
|
||||
</mask>
|
||||
<g id="SVGID_1_" />
|
||||
<path
|
||||
d="M42.59375,64.6306818 L4.40625,64.6306818 C1.9828125,64.6306818 0,62.6363636 0,60.1988636 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,60.1988636 C47,62.6363636 45.0171875,64.6306818 42.59375,64.6306818 Z"
|
||||
id="Path"
|
||||
fillOpacity="0.2"
|
||||
fill="#1A237E"
|
||||
fillRule="nonzero"
|
||||
mask="url(#mask-13)"
|
||||
/>
|
||||
</g>
|
||||
<g id="Clipped">
|
||||
<mask id="mask-15" fill="white">
|
||||
<use xlinkHref="#path-14" />
|
||||
</mask>
|
||||
<g id="SVGID_1_" />
|
||||
<path
|
||||
d="M33.78125,17.7272727 C31.3467969,17.7272727 29.375,15.7440341 29.375,13.2954545 L29.375,13.6647727 C29.375,16.1133523 31.3467969,18.0965909 33.78125,18.0965909 L47,18.0965909 L47,17.7272727 L33.78125,17.7272727 Z"
|
||||
id="Path"
|
||||
fillOpacity="0.1"
|
||||
fill="#1A237E"
|
||||
fillRule="nonzero"
|
||||
mask="url(#mask-15)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
d="M29.375,0 L4.40625,0 C1.9828125,0 0,1.99431818 0,4.43181818 L0,60.5681818 C0,63.0056818 1.9828125,65 4.40625,65 L42.59375,65 C45.0171875,65 47,63.0056818 47,60.5681818 L47,17.7272727 L29.375,0 Z"
|
||||
id="Path"
|
||||
fill="url(#radialGradient-16)"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
),
|
||||
zapier: () => (
|
||||
<svg
|
||||
width="105"
|
||||
height="28"
|
||||
viewBox="0 0 244 66"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M57.1877 45.2253L57.1534 45.1166L78.809 25.2914V15.7391H44.0663V25.2914H64.8181L64.8524 25.3829L43.4084 45.2253V54.7775H79.1579V45.2253H57.1877Z"
|
||||
fill="#201515"
|
||||
/>
|
||||
<path
|
||||
d="M100.487 14.8297C96.4797 14.8297 93.2136 15.434 90.6892 16.6429C88.3376 17.6963 86.3568 19.4321 85.0036 21.6249C83.7091 23.8321 82.8962 26.2883 82.6184 28.832L93.1602 30.3135C93.5415 28.0674 94.3042 26.4754 95.4482 25.5373C96.7486 24.5562 98.3511 24.0605 99.9783 24.136C102.118 24.136 103.67 24.7079 104.634 25.8519C105.59 26.9959 106.076 28.5803 106.076 30.6681V31.7091H95.9401C90.7807 31.7091 87.0742 32.8531 84.8206 35.1411C82.5669 37.429 81.442 40.4492 81.4458 44.2014C81.4458 48.0452 82.5707 50.9052 84.8206 52.7813C87.0704 54.6574 89.8999 55.5897 93.3089 55.5783C97.5379 55.5783 100.791 54.1235 103.067 51.214C104.412 49.426 105.372 47.3793 105.887 45.2024H106.27L107.723 54.7546H117.275V30.5651C117.275 25.5659 115.958 21.6936 113.323 18.948C110.688 16.2024 106.409 14.8297 100.487 14.8297ZM103.828 44.6475C102.312 45.9116 100.327 46.5408 97.8562 46.5408C95.8199 46.5408 94.4052 46.1843 93.6121 45.4712C93.2256 45.1338 92.9182 44.7155 92.7116 44.246C92.505 43.7764 92.4043 43.2671 92.4166 42.7543C92.3941 42.2706 92.4702 41.7874 92.6403 41.3341C92.8104 40.8808 93.071 40.4668 93.4062 40.1174C93.7687 39.7774 94.1964 39.5145 94.6633 39.3444C95.1303 39.1743 95.6269 39.1006 96.1231 39.1278H106.093V39.7856C106.113 40.7154 105.919 41.6374 105.527 42.4804C105.134 43.3234 104.553 44.0649 103.828 44.6475Z"
|
||||
fill="#201515"
|
||||
/>
|
||||
<path
|
||||
d="M175.035 15.7391H163.75V54.7833H175.035V15.7391Z"
|
||||
fill="#201515"
|
||||
/>
|
||||
<path
|
||||
d="M241.666 15.7391C238.478 15.7391 235.965 16.864 234.127 19.1139C232.808 20.7307 231.805 23.1197 231.119 26.2809H230.787L229.311 15.7391H219.673V54.7775H230.959V34.7578C230.959 32.2335 231.55 30.2982 232.732 28.9521C233.914 27.606 236.095 26.933 239.275 26.933H243.559V15.7391H241.666Z"
|
||||
fill="#201515"
|
||||
/>
|
||||
<path
|
||||
d="M208.473 17.0147C205.839 15.4474 202.515 14.6657 198.504 14.6695C192.189 14.6695 187.247 16.4675 183.678 20.0634C180.108 23.6593 178.324 28.6166 178.324 34.9352C178.233 38.7553 179.067 42.5407 180.755 45.9689C182.3 49.0238 184.706 51.5592 187.676 53.2618C190.665 54.9892 194.221 55.8548 198.344 55.8586C201.909 55.8586 204.887 55.3095 207.278 54.2113C209.526 53.225 211.483 51.6791 212.964 49.7211C214.373 47.7991 215.42 45.6359 216.052 43.3377L206.329 40.615C205.919 42.1094 205.131 43.4728 204.041 44.5732C202.942 45.6714 201.102 46.2206 198.521 46.2206C195.451 46.2206 193.163 45.3416 191.657 43.5837C190.564 42.3139 189.878 40.5006 189.575 38.1498H216.201C216.31 37.0515 216.367 36.1306 216.367 35.387V32.9561C216.431 29.6903 215.757 26.4522 214.394 23.4839C213.118 20.7799 211.054 18.5248 208.473 17.0147ZM198.178 23.9758C202.754 23.9758 205.348 26.2275 205.962 30.731H189.775C190.032 29.2284 190.655 27.8121 191.588 26.607C193.072 24.8491 195.268 23.972 198.178 23.9758Z"
|
||||
fill="#201515"
|
||||
/>
|
||||
<path
|
||||
d="M169.515 0.00366253C168.666 -0.0252113 167.82 0.116874 167.027 0.421484C166.234 0.726094 165.511 1.187 164.899 1.77682C164.297 2.3723 163.824 3.08658 163.512 3.87431C163.2 4.66204 163.055 5.50601 163.086 6.35275C163.056 7.20497 163.201 8.05433 163.514 8.84781C163.826 9.64129 164.299 10.3619 164.902 10.9646C165.505 11.5673 166.226 12.0392 167.02 12.3509C167.814 12.6626 168.663 12.8074 169.515 12.7762C170.362 12.8082 171.206 12.6635 171.994 12.3514C172.782 12.0392 173.496 11.5664 174.091 10.963C174.682 10.3534 175.142 9.63077 175.446 8.83849C175.75 8.04621 175.89 7.20067 175.859 6.35275C175.898 5.50985 175.761 4.66806 175.456 3.88115C175.151 3.09424 174.686 2.37951 174.09 1.78258C173.493 1.18565 172.779 0.719644 171.992 0.414327C171.206 0.109011 170.364 -0.0288946 169.521 0.00938803L169.515 0.00366253Z"
|
||||
fill="#201515"
|
||||
/>
|
||||
<path
|
||||
d="M146.201 14.6695C142.357 14.6695 139.268 15.8764 136.935 18.2902C135.207 20.0786 133.939 22.7479 133.131 26.2981H132.771L131.295 15.7563H121.657V66H132.942V45.3054H133.354C133.698 46.6852 134.181 48.0267 134.795 49.3093C135.75 51.3986 137.316 53.1496 139.286 54.3314C141.328 55.446 143.629 56.0005 145.955 55.9387C150.68 55.9387 154.277 54.0988 156.748 50.419C159.219 46.7392 160.455 41.6046 160.455 35.0153C160.455 28.6509 159.259 23.6689 156.869 20.0691C154.478 16.4694 150.922 14.6695 146.201 14.6695ZM147.345 42.9602C146.029 44.8668 143.97 45.8201 141.167 45.8201C140.012 45.8735 138.86 45.6507 137.808 45.1703C136.755 44.6898 135.832 43.9656 135.116 43.0574C133.655 41.2233 132.927 38.7122 132.931 35.5243V34.7807C132.931 31.5432 133.659 29.0646 135.116 27.3448C136.572 25.625 138.59 24.7747 141.167 24.7937C144.02 24.7937 146.092 25.6994 147.385 27.5107C148.678 29.322 149.324 31.8483 149.324 35.0896C149.332 38.4414 148.676 41.065 147.356 42.9602H147.345Z"
|
||||
fill="#201515"
|
||||
/>
|
||||
<path d="M39.0441 45.2253H0V54.789H39.0441V45.2253Z" fill="#FF4F00" />
|
||||
</svg>
|
||||
),
|
||||
messenger: () => (
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 48 48"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<radialGradient
|
||||
id="8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1"
|
||||
cx="11.087"
|
||||
cy="7.022"
|
||||
r="47.612"
|
||||
gradientTransform="matrix(1 0 0 -1 0 50)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0" stopColor="#1292ff"></stop>
|
||||
<stop offset=".079" stopColor="#2982ff"></stop>
|
||||
<stop offset=".23" stopColor="#4e69ff"></stop>
|
||||
<stop offset=".351" stopColor="#6559ff"></stop>
|
||||
<stop offset=".428" stopColor="#6d53ff"></stop>
|
||||
<stop offset=".754" stopColor="#df47aa"></stop>
|
||||
<stop offset=".946" stopColor="#ff6257"></stop>
|
||||
</radialGradient>
|
||||
<path
|
||||
fill="url(#8O3wK6b5ASW2Wn6hRCB5xa_YFbzdUk7Q3F8_gr1)"
|
||||
d="M44,23.5C44,34.27,35.05,43,24,43c-1.651,0-3.25-0.194-4.784-0.564 c-0.465-0.112-0.951-0.069-1.379,0.145L13.46,44.77C12.33,45.335,11,44.513,11,43.249v-4.025c0-0.575-0.257-1.111-0.681-1.499 C6.425,34.165,4,29.11,4,23.5C4,12.73,12.95,4,24,4S44,12.73,44,23.5z"
|
||||
/>
|
||||
<path
|
||||
d="M34.992,17.292c-0.428,0-0.843,0.142-1.2,0.411l-5.694,4.215 c-0.133,0.1-0.28,0.15-0.435,0.15c-0.15,0-0.291-0.047-0.41-0.136l-3.972-2.99c-0.808-0.601-1.76-0.918-2.757-0.918 c-1.576,0-3.025,0.791-3.876,2.116l-1.211,1.891l-4.12,6.695c-0.392,0.614-0.422,1.372-0.071,2.014 c0.358,0.654,1.034,1.06,1.764,1.06c0.428,0,0.843-0.142,1.2-0.411l5.694-4.215c0.133-0.1,0.28-0.15,0.435-0.15 c0.15,0,0.291,0.047,0.41,0.136l3.972,2.99c0.809,0.602,1.76,0.918,2.757,0.918c1.576,0,3.025-0.791,3.876-2.116l1.211-1.891 l4.12-6.695c0.392-0.614,0.422-1.372,0.071-2.014C36.398,17.698,35.722,17.292,34.992,17.292L34.992,17.292z"
|
||||
opacity=".05"
|
||||
/>
|
||||
<path
|
||||
d="M34.992,17.792c-0.319,0-0.63,0.107-0.899,0.31l-5.697,4.218 c-0.216,0.163-0.468,0.248-0.732,0.248c-0.259,0-0.504-0.082-0.71-0.236l-3.973-2.991c-0.719-0.535-1.568-0.817-2.457-0.817 c-1.405,0-2.696,0.705-3.455,1.887l-1.21,1.891l-4.115,6.688c-0.297,0.465-0.32,1.033-0.058,1.511c0.266,0.486,0.787,0.8,1.325,0.8 c0.319,0,0.63-0.107,0.899-0.31l5.697-4.218c0.216-0.163,0.468-0.248,0.732-0.248c0.259,0,0.504,0.082,0.71,0.236l3.973,2.991 c0.719,0.535,1.568,0.817,2.457,0.817c1.405,0,2.696-0.705,3.455-1.887l1.21-1.891l4.115-6.688c0.297-0.465,0.32-1.033,0.058-1.511 C36.051,18.106,35.531,17.792,34.992,17.792L34.992,17.792z"
|
||||
opacity=".07"
|
||||
/>
|
||||
<path
|
||||
fill="#ffffff"
|
||||
d="M34.394,18.501l-5.7,4.22c-0.61,0.46-1.44,0.46-2.04,0.01L22.68,19.74 c-1.68-1.25-4.06-0.82-5.19,0.94l-1.21,1.89l-4.11,6.68c-0.6,0.94,0.55,2.01,1.44,1.34l5.7-4.22c0.61-0.46,1.44-0.46,2.04-0.01 l3.974,2.991c1.68,1.25,4.06,0.82,5.19-0.94l1.21-1.89l4.11-6.68C36.434,18.901,35.284,17.831,34.394,18.501z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
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;
|
||||
139
apps/web/app/(landing)/CardPatterns/Glare.tsx
Normal file
139
apps/web/app/(landing)/CardPatterns/Glare.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
"use client";
|
||||
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
import { useRef } from "react";
|
||||
|
||||
export const GlareCard = ({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) => {
|
||||
const isPointerInside = useRef(false);
|
||||
const refElement = useRef<HTMLDivElement>(null);
|
||||
const state = useRef({
|
||||
glare: {
|
||||
x: 50,
|
||||
y: 50,
|
||||
},
|
||||
background: {
|
||||
x: 50,
|
||||
y: 50,
|
||||
},
|
||||
rotate: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
});
|
||||
const containerStyle = {
|
||||
"--m-x": "50%",
|
||||
"--m-y": "50%",
|
||||
"--r-x": "0deg",
|
||||
"--r-y": "0deg",
|
||||
"--bg-x": "50%",
|
||||
"--bg-y": "50%",
|
||||
"--duration": "300ms",
|
||||
"--foil-size": "100%",
|
||||
"--opacity": "0",
|
||||
"--radius": "23px",
|
||||
"--easing": "ease",
|
||||
"--transition": "var(--duration) var(--easing)",
|
||||
} as any;
|
||||
|
||||
const backgroundStyle = {
|
||||
"--step": "5%",
|
||||
"--foil-svg": `url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' stroke-width='5' stroke-miterlimit='3.86874' stroke-linecap='round' style='mix-blend-mode:darken'/%3E%3C/svg%3E")`,
|
||||
"--pattern": "var(--foil-svg) center/100% no-repeat",
|
||||
"--rainbow":
|
||||
"repeating-linear-gradient( 0deg,rgb(255,119,115) calc(var(--step) * 1),rgba(255,237,95,1) calc(var(--step) * 2),rgba(168,255,95,1) calc(var(--step) * 3),rgba(131,255,247,1) calc(var(--step) * 4),rgba(120,148,255,1) calc(var(--step) * 5),rgb(216,117,255) calc(var(--step) * 6),rgb(255,119,115) calc(var(--step) * 7) ) 0% var(--bg-y)/200% 700% no-repeat",
|
||||
"--diagonal":
|
||||
"repeating-linear-gradient( 128deg,#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,10%,60%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12% ) var(--bg-x) var(--bg-y)/300% no-repeat",
|
||||
"--shade":
|
||||
"radial-gradient( farthest-corner circle at var(--m-x) var(--m-y),rgba(255,255,255,0.1) 12%,rgba(255,255,255,0.15) 20%,rgba(255,255,255,0.25) 120% ) var(--bg-x) var(--bg-y)/300% no-repeat",
|
||||
"--hero-gradient":
|
||||
'radial-gradient(ellipse 50% 80% at 20% 40%, rgba(93, 52, 221, 0.1), transparent), radial-gradient(ellipse 50% 80% at 80% 50%, rgba(120, 119, 198, 0.15),transparent)',
|
||||
|
||||
backgroundBlendMode: "hue, hue, hue, overlay",
|
||||
};
|
||||
|
||||
const updateStyles = () => {
|
||||
if (refElement.current) {
|
||||
console.log(state.current);
|
||||
const { background, rotate, glare } = state.current;
|
||||
refElement.current?.style.setProperty("--m-x", `${glare.x}%`);
|
||||
refElement.current?.style.setProperty("--m-y", `${glare.y}%`);
|
||||
refElement.current?.style.setProperty("--r-x", `${rotate.x}deg`);
|
||||
refElement.current?.style.setProperty("--r-y", `${rotate.y}deg`);
|
||||
refElement.current?.style.setProperty("--bg-x", `${background.x}%`);
|
||||
refElement.current?.style.setProperty("--bg-y", `${background.y}%`);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={containerStyle}
|
||||
className="relative isolate [contain:layout_style] [perspective:600px] transition-transform duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-transform w-full h-full"
|
||||
ref={refElement}
|
||||
onPointerMove={(event) => {
|
||||
const rotateFactor = 0.4;
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const position = {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top,
|
||||
};
|
||||
const percentage = {
|
||||
x: (100 / rect.width) * position.x,
|
||||
y: (100 / rect.height) * position.y,
|
||||
};
|
||||
const delta = {
|
||||
x: percentage.x - 50,
|
||||
y: percentage.y - 50,
|
||||
};
|
||||
|
||||
const { background, rotate, glare } = state.current;
|
||||
background.x = 50 + percentage.x / 4 - 12.5;
|
||||
background.y = 50 + percentage.y / 3 - 16.67;
|
||||
rotate.x = -(delta.x / 3.5);
|
||||
rotate.y = delta.y / 2;
|
||||
rotate.x *= rotateFactor;
|
||||
rotate.y *= rotateFactor;
|
||||
glare.x = percentage.x;
|
||||
glare.y = percentage.y;
|
||||
|
||||
updateStyles();
|
||||
}}
|
||||
onPointerEnter={() => {
|
||||
isPointerInside.current = true;
|
||||
if (refElement.current) {
|
||||
setTimeout(() => {
|
||||
if (isPointerInside.current) {
|
||||
refElement.current?.style.setProperty("--duration", "0s");
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
}}
|
||||
onPointerLeave={() => {
|
||||
isPointerInside.current = false;
|
||||
if (refElement.current) {
|
||||
refElement.current.style.removeProperty("--duration");
|
||||
refElement.current?.style.setProperty("--r-x", `0deg`);
|
||||
refElement.current?.style.setProperty("--r-y", `0deg`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="h-full Bg-transparent border-[0.1px] border-white/20 dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] grid will-change-transform origin-center transition-transform duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] [transform:rotateY(var(--r-x))_rotateX(var(--r-y))] rounded-[var(--radius)] hover:[--opacity:0.12] hover:[--duration:200ms] hover:[--easing:linear] hover:filter-none overflow-hidden">
|
||||
<div className="w-full h-full grid [grid-area:1/1] mix-blend-soft-light [clip-path:inset(0_0_0_0_round_var(--radius))]">
|
||||
<div className={cn("h-full w-full bg-hero-gradient", className)}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
<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':"10%"}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import EmailInput from "./EmailInput";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
|
||||
function Cta() {
|
||||
return (
|
||||
<section
|
||||
id="try"
|
||||
className="relative mb-44 mt-60 flex w-full flex-col items-center justify-center gap-8"
|
||||
id="waitlist"
|
||||
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-32 mb-28 w-full md:w-3/4 rounded-3xl py-10 px-3 md: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 top-0 z-0 w-screen right-0 mx-auto h-[500px] 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 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 +20,21 @@ function Cta() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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-background md:block lg:w-[80%]"
|
||||
/>
|
||||
<h1 className="z-20 mt-4 text-center text-5xl font-medium tracking-tight text-white">
|
||||
<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-4xl sm:text-5xl md:text-6xl lg:text-7xl text-center text-transparent bg-clip-text bg-gradient-to-tr from-zinc-400/50 to-white/60 via-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-md md:text-lg">
|
||||
Sign up for the waitlist and be the first to try Supermemory
|
||||
</p>
|
||||
<EmailInput />
|
||||
<div className="w-full lg:w-3/4 mx-auto">
|
||||
<EmailInput />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,18 @@
|
|||
import { FormEvent, useState } from "react";
|
||||
import formSubmitAction from "./formSubmitAction";
|
||||
import { useToast } from "@repo/ui/shadcn/use-toast";
|
||||
import { Loader } from "lucide-react";
|
||||
|
||||
function EmailInput() {
|
||||
const [email, setEmail] = useState("");
|
||||
const { toast } = useToast();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true);
|
||||
const value = await formSubmitAction(email, "token" as string);
|
||||
|
||||
if (value.success) {
|
||||
|
|
@ -30,16 +32,17 @@ function EmailInput() {
|
|||
description: `${value.value}`,
|
||||
});
|
||||
}
|
||||
setLoading(false);
|
||||
}}
|
||||
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-glass-gradient backdrop-blur-sm dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] border-[1px] border-white/5 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 flex w-full items-center rounded-2xl bg-[#37485E] px-4 py-2 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-transparent px-4 outline-none duration-300 focus:outline-none`}
|
||||
placeholder="Enter your email"
|
||||
value={email}
|
||||
required
|
||||
|
|
@ -53,22 +56,26 @@ function EmailInput() {
|
|||
{email && (
|
||||
<button
|
||||
type="submit"
|
||||
className="transition-width rounded-xl bg-gray-700 p-2 text-white duration-300"
|
||||
className="transition-width rounded-xl z-20 bg-gray-700 p-4 text-white duration-300"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="h-6 w-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
|
||||
/>
|
||||
</svg>
|
||||
{loading ? (
|
||||
<Loader className="h-6 w-6 animate-spin" />
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="h-6 w-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
|
|
|
|||
102
apps/web/app/(landing)/FeatureCardContent.tsx
Normal file
102
apps/web/app/(landing)/FeatureCardContent.tsx
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import { Twitter } from "@repo/ui/components/icons";
|
||||
import { GlareCard } from "./CardPatterns/Glare";
|
||||
import React from "react";
|
||||
import { MessageCircle, Search } from "lucide-react";
|
||||
|
||||
export default function FUIFeatureSectionWithCards() {
|
||||
const features = [
|
||||
{
|
||||
icon: <Twitter className="w-5 h-5" />,
|
||||
title: "Twitter Bookmarks",
|
||||
desc: "Use all the knowledge you've saved on Twitter to train your own supermemory..",
|
||||
},
|
||||
{
|
||||
icon: <Search className="w-5 h-5" />,
|
||||
title: "Powerful search",
|
||||
desc: "Look up anything you've saved in your supermemory, and get the information you need in seconds.",
|
||||
},
|
||||
{
|
||||
icon: <MessageCircle className="w-5 h-5" />,
|
||||
title: "Chat with collections",
|
||||
desc: "Use collections to talk to specific knowledgebases like 'My twitter bookmarks', or 'Learning web development'",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="14" height="16">
|
||||
<path d="M13 0H1C.4 0 0 .4 0 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1ZM2 2h10v8H8v4H2V2Z" />
|
||||
</svg>
|
||||
),
|
||||
title: "Knowledge canvas",
|
||||
desc: " Arrange your saved information in a way that makes sense to youin a 2d canvas.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M14.6.085 8 2.885 1.4.085c-.5-.2-1.4-.1-1.4.9v11c0 .4.2.8.6.9l7 3c.3.1.5.1.8 0l7-3c.4-.2.6-.5.6-.9v-11c0-1-.9-1.1-1.4-.9ZM2 2.485l5 2.1v8.8l-5-2.1v-8.8Zm12 8.8-5 2.1v-8.7l5-2.1v8.7Z" />
|
||||
</svg>
|
||||
),
|
||||
title: "Just... bookmarks",
|
||||
desc: "AI is cool, but sometimes you just need a place to save your stuff. Supermemory is that place.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="w-5 h-"
|
||||
>
|
||||
<path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
|
||||
</svg>
|
||||
),
|
||||
title: "Writing assistant",
|
||||
desc: " Use our markdown editor to write content based on your saved data, with the help of AI.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative z-20 pb-14">
|
||||
<div className="px-4 mx-auto max-w-screen-xl text-gray-400 md:px-8 lg:px-0">
|
||||
<div className="relative mx-auto max-w-2xl sm:text-center">
|
||||
<div className="relative z-10">
|
||||
<h3 className="mt-4 text-3xl font-normal tracking-tighter text-gray-200 sm:text-4xl md:text-5xl font-geist">
|
||||
</h3>
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="absolute inset-0 mx-auto max-w-xs 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>
|
||||
<div className="relative z-20 mt-[4rem]">
|
||||
<ul className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{features.map((item, idx) => (
|
||||
<GlareCard key={idx}>
|
||||
<li
|
||||
key={idx}
|
||||
className="z-20 transform-gpu space-y-3 rounded-xl border border-white/10 bg-transparent/20 p-4 [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
|
||||
>
|
||||
<div className="w-fit transform-gpu rounded-full p-4 text-purple-600 dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]">
|
||||
{item.icon}
|
||||
</div>
|
||||
<h4 className="text-lg font-bold tracking-tighter text-gray-300 font-geist">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-gray-500">{item.desc}</p>
|
||||
</li>
|
||||
</GlareCard>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,11 +1,8 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { X } from "@repo/ui/components/icons";
|
||||
|
||||
import { features } from "./FeatureContent";
|
||||
import { CardClick } from "@repo/ui/components/cardClick";
|
||||
import FUIFeatureSectionWithCards from "./FeatureCardContent";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Features() {
|
||||
const [tab, setTab] = useState<number>(0);
|
||||
|
|
@ -26,223 +23,43 @@ export default function Features() {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<section className="relative w-full overflow-hidden max-lg:after:hidden">
|
||||
<div className="py-12 md:pb-32">
|
||||
{/* Carousel */}
|
||||
<div
|
||||
id="use-cases"
|
||||
className="mx-auto max-w-xl px-4 sm:px-6 md:pt-40 lg:max-w-6xl"
|
||||
>
|
||||
<div className="space-y-12 lg:flex lg:space-x-12 lg:space-y-0 xl:space-x-24">
|
||||
{/* Content */}
|
||||
<div className="lg:min-w-[524px] lg:max-w-none">
|
||||
<div className="mb-8">
|
||||
<div className="mb-4 inline-flex rounded-full border border-transparent px-4 py-0.5 text-sm font-medium text-zinc-400 [background:linear-gradient(theme(colors.zinc.800),theme(colors.zinc.800))_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]">
|
||||
Use cases
|
||||
</div>
|
||||
<h3 className="font-inter-tight mb-4 text-3xl font-bold text-zinc-200">
|
||||
Save time and keep things organised
|
||||
</h3>
|
||||
<p className="text-lg text-zinc-500">
|
||||
With Supermemory, it's really easy to save information from
|
||||
all over the internet, while training your own AI to help you
|
||||
do more with it.
|
||||
</p>
|
||||
</div>
|
||||
{/* Tabs buttons */}
|
||||
<div className="mb-8 space-y-2 md:mb-0">
|
||||
<CardClick
|
||||
tab={tab}
|
||||
items={features}
|
||||
handleClickIndex={handleClickIndex}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<section
|
||||
id="features"
|
||||
className="overflow-hidden relative w-full max-lg:after:hidden mt-10"
|
||||
>
|
||||
<img
|
||||
src="/images/tailwind-bg-gradient.avif"
|
||||
className="absolute -top-0 left-10 opacity-40 z-2"
|
||||
/>
|
||||
<div className="relative ">
|
||||
<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 "Second brain" made for you... or your team
|
||||
</h2>
|
||||
|
||||
{/* Tabs items */}
|
||||
<div className="relative lg:max-w-none">
|
||||
<div className="relative flex flex-col" ref={tabs}>
|
||||
{/* Item 1 */}
|
||||
<div
|
||||
className="transition-all duration-700 transform order-first"
|
||||
style={{
|
||||
height: tab === 0 ? "auto" : 0,
|
||||
opacity: tab === 0 ? 1 : 0,
|
||||
// transform: tab === 0 ? 'translateY(0)' : 'translateY(4rem)',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
className="mx-auto rounded-lg shadow-2xl lg:max-w-none"
|
||||
src={"/images/carousel-illustration-01.png"}
|
||||
width={700}
|
||||
height={520}
|
||||
alt="Carousel 01"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Item 2 */}
|
||||
<div
|
||||
className="transition-all duration-700 transform order-first"
|
||||
style={{
|
||||
height: tab === 1 ? "auto" : 0,
|
||||
opacity: tab === 1 ? 1 : 0,
|
||||
transform: tab === 1 ? "translateY(0)" : "translateY(4rem)",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
className="mx-auto rounded-lg shadow-2xl lg:max-w-none"
|
||||
src={"/images/carousel-illustration-01.png"}
|
||||
width={700}
|
||||
height={520}
|
||||
alt="Carousel 02"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Item 3 */}
|
||||
<div
|
||||
className="transition-all duration-700 transform order-first"
|
||||
style={{
|
||||
height: tab === 2 ? "auto" : 0,
|
||||
opacity: tab === 2 ? 1 : 0,
|
||||
transform: tab === 2 ? "translateY(0)" : "translateY(4rem)",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
className="mx-auto rounded-lg shadow-2xl lg:max-w-none"
|
||||
src={"/images/carousel-illustration-01.png"}
|
||||
width={700}
|
||||
height={520}
|
||||
alt="Carousel 03"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-zinc-400">
|
||||
Supermemory offers all the vital building blocks you need to
|
||||
transform your gold mine of content into a powerful knowledgebase
|
||||
for yourself, your team or even a group of friends!
|
||||
</p>
|
||||
<Link
|
||||
href="/signin"
|
||||
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" />
|
||||
<ArrowUpRight className="absolute transition-all duration-500 -translate-x-4 -translate-y-5 group-hover:translate-x-0 group-hover:translate-y-0" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features blocks */}
|
||||
<div
|
||||
id="features"
|
||||
className="mx-auto mt-24 max-w-6xl px-4 sm:px-6 md:pt-40"
|
||||
>
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-16">
|
||||
{/* Block #1 */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center">
|
||||
<X className="mr-2" />
|
||||
<h3 className="font-inter-tight font-semibold text-zinc-200">
|
||||
Import all your Twitter bookmarks
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Use all the knowledge you've saved on Twitter to train your own
|
||||
supermemory.
|
||||
</p>
|
||||
</div>
|
||||
{/* Block #2 */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center">
|
||||
<svg
|
||||
className="mr-2 fill-zinc-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M13 16c-.153 0-.306-.035-.447-.105l-3.851-1.926c-.231.02-.465.031-.702.031-4.411 0-8-3.14-8-7s3.589-7 8-7 8 3.14 8 7c0 1.723-.707 3.351-2 4.63V15a1.003 1.003 0 0 1-1 1Zm-4.108-4.054c.155 0 .308.036.447.105L12 13.382v-2.187c0-.288.125-.562.341-.752C13.411 9.506 14 8.284 14 7c0-2.757-2.691-5-6-5S2 4.243 2 7s2.691 5 6 5c.266 0 .526-.02.783-.048a1.01 1.01 0 0 1 .109-.006Z" />
|
||||
</svg>
|
||||
<h3 className="font-inter-tight font-semibold text-zinc-200">
|
||||
Chat with collections
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Use collections to talk to specific knowledgebases like 'My
|
||||
twitter bookmarks', or 'Learning web development'
|
||||
</p>
|
||||
</div>
|
||||
{/* Block #3 */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center">
|
||||
<svg
|
||||
className="mr-2 fill-zinc-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7ZM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm8.707 12.293a.999.999 0 1 1-1.414 1.414L11.9 13.314a8.019 8.019 0 0 0 1.414-1.414l2.393 2.393Z" />
|
||||
</svg>
|
||||
<h3 className="font-inter-tight font-semibold text-zinc-200">
|
||||
Powerful search
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Look up anything you've saved in your supermemory, and get the
|
||||
information you need in seconds.
|
||||
</p>
|
||||
</div>
|
||||
{/* Block #4 */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center">
|
||||
<svg
|
||||
className="mr-2 fill-zinc-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="16"
|
||||
>
|
||||
<path d="M13 0H1C.4 0 0 .4 0 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1ZM2 2h10v8H8v4H2V2Z" />
|
||||
</svg>
|
||||
<h3 className="font-inter-tight font-semibold text-zinc-200">
|
||||
Knowledge canvas
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Arrange your saved information in a way that makes sense to you
|
||||
in a 2d canvas.
|
||||
</p>
|
||||
</div>
|
||||
{/* Block #5 */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center">
|
||||
<svg
|
||||
className="mr-2 fill-zinc-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M14.6.085 8 2.885 1.4.085c-.5-.2-1.4-.1-1.4.9v11c0 .4.2.8.6.9l7 3c.3.1.5.1.8 0l7-3c.4-.2.6-.5.6-.9v-11c0-1-.9-1.1-1.4-.9ZM2 2.485l5 2.1v8.8l-5-2.1v-8.8Zm12 8.8-5 2.1v-8.7l5-2.1v8.7Z" />
|
||||
</svg>
|
||||
<h3 className="font-inter-tight font-semibold text-zinc-200">
|
||||
Just... bookmarks
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
AI is cool, but sometimes you just need a place to save your
|
||||
stuff. Supermemory is that place.
|
||||
</p>
|
||||
</div>
|
||||
{/* Block #6 */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="mr-2 h-5 w-5 fill-zinc-400"
|
||||
>
|
||||
<path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
|
||||
</svg>
|
||||
<h3 className="font-inter-tight font-semibold text-zinc-200">
|
||||
Writing assistant
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Use our markdown editor to write content based on your saved
|
||||
data, with the help of AI.
|
||||
</p>
|
||||
</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-20 blur-[337.4px]"
|
||||
style={{ transform: "rotate(-30deg)" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
17
apps/web/app/(landing)/Features/chatbubble.tsx
Normal file
17
apps/web/app/(landing)/Features/chatbubble.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
const ChatBubbleWing = ({ className, pathClassName }: {className?:string , pathClassName?:string}) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className || ""}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="26"
|
||||
height="37"
|
||||
>
|
||||
<path
|
||||
className={`${pathClassName || ""}`}
|
||||
d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatBubbleWing;
|
||||
19
apps/web/app/(landing)/Features/features.tsx
Normal file
19
apps/web/app/(landing)/Features/features.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { cn } from "@repo/ui/lib/utils";
|
||||
|
||||
export const Gradient = ({ opacity = 50 }: { opacity?: number }) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-0 -left-[10rem] w-[56.625rem] h-[56.625rem] mix-blend-color-dodge pointer-events-none",
|
||||
`opacity-${opacity}`
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="top-0 -left-[10rem] w-[56.625rem] h-[56.625rem] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-40 blur-[337.4px]"
|
||||
style={{ transform: "rotate(-30deg)" }}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
16
apps/web/app/(landing)/Features/generating.tsx
Normal file
16
apps/web/app/(landing)/Features/generating.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { Loader, Loader2 } from "lucide-react";
|
||||
|
||||
const Generating = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center h-[3.5rem] px-6 bg-n-8/80 rounded-[1.7rem] ${
|
||||
className || ""
|
||||
} text-base`}
|
||||
>
|
||||
<Loader2 className="w-5 h-5 mr-2" />
|
||||
Searching your second brain...
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Generating;
|
||||
229
apps/web/app/(landing)/Features/index.tsx
Normal file
229
apps/web/app/(landing)/Features/index.tsx
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
import { CheckIcon, ChevronRight, GithubIcon } from "lucide-react";
|
||||
import { Gradient } from "./features";
|
||||
import Generating from "./generating";
|
||||
import Image from "next/image";
|
||||
import { AnimatedBeamShow } from "../CardPatterns/AnimatedBeamWithOutput";
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<div id="how-to-use">
|
||||
<div className="container">
|
||||
<div className="mr-auto max-w-5xl">
|
||||
<h1 className="mr-auto text-left font-geistSans tracking-tighter text-4xl md:text-5xl lg:text-6xl text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
|
||||
Sounds super cool? There's more.
|
||||
</h1>
|
||||
<p className="mb-10 ml-auto text-lg tracking-tight text-left font-nomral"></p>
|
||||
</div>
|
||||
|
||||
<div className="relative bg-page-gradient">
|
||||
<div className="flex overflow-hidden relative items-center p-8 mb-5 rounded-3xl border lg:p-20 z-1 h-[39rem] border-white/20 xl:h-[46rem]">
|
||||
<img
|
||||
src="/images/tailwind-bg-gradient.avif"
|
||||
className="absolute top-0 right-0 opacity-100 z-2"
|
||||
/>
|
||||
<img
|
||||
src="/images/tailwind-bg-gradient.avif"
|
||||
className="absolute top-0 right-0 opacity-100 z-2"
|
||||
/>
|
||||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none md:w-3/5 xl:w-auto">
|
||||
<img
|
||||
className="object-cover w-full h-full md:object-right"
|
||||
width={800}
|
||||
alt="Smartest AI"
|
||||
height={730}
|
||||
src={"/images/service-1.png"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative ml-auto z-1 max-w-[17rem]">
|
||||
<h4 className="mb-4 text-3xl md:text-4xl">
|
||||
We paid attention to details.
|
||||
</h4>
|
||||
<p className="body-2 mb-[3rem] text-n-3">
|
||||
a small team of 4 student developers who have one mission.{" "}
|
||||
<br />
|
||||
Make the best second brain for everyone.
|
||||
</p>
|
||||
<ul className="text-lg">
|
||||
{supermemoryPoints.map((item, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-start py-4 border-t border-white/20"
|
||||
>
|
||||
<CheckIcon className="inline-flex justify-center items-center mt-2 ml-2 w-4 h-4 rounded-full text-slate-200 size-4" />
|
||||
{/* <img width={24} height={24} src={check} /> */}
|
||||
<p className="ml-4">{item}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Generating className="absolute right-4 bottom-4 left-4 border lg:bottom-8 lg-right-auto lg:left-1/2 lg:-translate-x-1/2 border-n-1/10" />
|
||||
</div>
|
||||
|
||||
<div className="grid relative gap-5 lg:grid-cols-2 z-1">
|
||||
<div className="overflow-hidden flex flex-col md:flex-row md:block relative rounded-3xl border min-h-[34rem] bg-hero-gradient bg-slate-950/10 border-white/10">
|
||||
<div className="md:absolute inset-0">
|
||||
<div className="absolute -z-1 inset-0 h-[600px] w-full bg-transparent opacity-5 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>
|
||||
|
||||
<Image
|
||||
src="/images/landing_integrations.png"
|
||||
className="object-contain w-full h-full"
|
||||
width={630}
|
||||
height={750}
|
||||
alt="robot"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex md:absolute md:mt-4 lg:-mt-20 inset-0 flex-col md:justify-end justify-center -translate-y-16 md:translate-y-0 items-center md:items-start p-8 bg-glass-gradient">
|
||||
<h4 className="text-3xl tracking-tight mb-2 text-center text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
|
||||
Supermemory works everywhere you are.
|
||||
</h4>
|
||||
<p className="max-w-lg text-lg font-normal tracking-tighter text-gray-400 mb-[3rem]">
|
||||
We already have integrations for Telegram and Twitter (X),
|
||||
with whatsapp and SMS coming soon. So you can add and query
|
||||
data in a private manner, from anywhere.
|
||||
</p>
|
||||
<a
|
||||
href="/components"
|
||||
className="inline-flex justify-center items-center py-4 px-10 w-full text-center bg-transparent bg-gradient-to-tr to-transparent rounded-xl transition-colors sm:w-auto mt-[-20px] bg-glass-gradient group from-zinc-300/5 via-gray-400/5 border-white/10 border-[1px] hover:bg-transparent/10"
|
||||
>
|
||||
Get started
|
||||
<ChevronRight className="ml-2 w-4 h-4 duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.3) 60.92%, rgba(140, 121, 249, 0) 80.35%)",
|
||||
}}
|
||||
className="overflow-hidden relative py-4 rounded-3xl group bg-glass-gradient lg:min-h-[30rem]"
|
||||
>
|
||||
<div className="relative py-12 px-4 xl:px-8">
|
||||
<h4 className="text-3xl tracking-tight mb-2 text-left text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
|
||||
Privacy First
|
||||
</h4>
|
||||
<p className="text-lg text-gray-400 body-2 mb-[2rem]">
|
||||
We use state-of-the art technology and providers to make sure
|
||||
that your data is completely safe and secure, and only store
|
||||
what's absolutely needed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden relative rounded-xl h-[20rem] md:h-[25rem]">
|
||||
<img
|
||||
src={"/images/landing_vault.png"}
|
||||
className="object-cover w-full h-full transition-all duration-500 ease-linear transform group-hover:rotate-3"
|
||||
width={520}
|
||||
height={400}
|
||||
alt="vault image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Gradient opacity={5} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
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-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="/images/tailwind-bg-gradient.avif"
|
||||
className="absolute top-0 right-0 opacity-60 z-2"
|
||||
/>
|
||||
|
||||
<div className="absolute top-0 right-0 left-0 mx-auto w-full h-full pointer-events-none xl:w-auto">
|
||||
<img
|
||||
className="object-cover z-40 w-full h-full border-r-2 md:scale-110 border-r-white/5"
|
||||
width={800}
|
||||
alt="Github"
|
||||
height={730}
|
||||
src={"/images/github.webp"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="absolute right-0 left-0 bottom-5 mx-auto mt-20 text-center z-1 p-8">
|
||||
<h4 className="mb-4 text-4xl tracking-tighter text-white lg:text-5xl">
|
||||
Proudly <br /> Open Source
|
||||
</h4>
|
||||
<p className="text-lg body-2 mb-[3rem] ">
|
||||
You dont even need to trust us. Just deploy it yourself and
|
||||
enjoy the benefits.
|
||||
</p>
|
||||
<a
|
||||
href="/components"
|
||||
className="inline-flex gap-x-1 justify-center items-center py-4 px-10 text-center bg-transparent bg-gradient-to-tr to-transparent rounded-xl transition-colors sm:w-auto w-fit mt-[-20px] bg-glass-gradient group from-zinc-300/5 via-gray-400/5 border-white/10 border-[1px] hover:bg-transparent/10"
|
||||
>
|
||||
<GithubIcon className="inline-flex justify-center items-center w-5 h-5" />{" "}
|
||||
Star us on Github
|
||||
<ChevronRight className="ml-2 w-4 h-4 duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid relative gap-5 lg:grid-cols-2 z-1">
|
||||
<div className="overflow-hidden relative rounded-3xl border max-h-[20rem] min-h-[33rem] bg-hero-gradient bg-slate-950/10 border-white/10">
|
||||
<div className="absolute inset-0">
|
||||
<AnimatedBeamShow />
|
||||
</div>
|
||||
|
||||
<div className="flex absolute inset-0 flex-col justify-end items-start p-8 pl-10 mt-4 lg:-mt-20 bg-glass-gradient">
|
||||
<h4 className="text-3xl tracking-tight mb-2 text-center text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
|
||||
Bringing content in is easy.
|
||||
</h4>
|
||||
<p className="max-w-lg text-lg font-normal tracking-tighter text-gray-400 mb-[3rem]">
|
||||
You can use our chrome extension, iOS shortcut, or our API to
|
||||
send content to supermemory.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden bg-page-gradient relative py-4 rounded-3xl max-h-[33rem] group lg:min-h-[30rem]">
|
||||
<div className="absolute -z-1 inset-0 h-[600px] w-full bg-transparent opacity-5 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="relative py-12 px-4 xl:px-8">
|
||||
<h4 className="text-3xl tracking-tight mb-2 text-left text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
|
||||
Self hostable
|
||||
</h4>
|
||||
<p className="text-lg text-gray-400 body-2 mb-[2rem]">
|
||||
All the code is open source and self hostable for
|
||||
non-commercial use.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden relative mt-[-50px] mb-10 rounded-xl h-[20rem] md:h-[25rem]">
|
||||
<img
|
||||
src={
|
||||
"https://www.koyeb.com/_next/image?url=%2Fimages%2Fillustrations%2Fhome-scale-mesh.webp&w=384&q=75"
|
||||
}
|
||||
className="object-cover w-full h-full transition-all duration-500 ease-linear transform group-hover:rotate-3"
|
||||
width={1000}
|
||||
height={1000}
|
||||
alt="Scary robot"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Gradient opacity={5} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Gradient />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
const supermemoryPoints = [
|
||||
"Privacy focused",
|
||||
"Works everywhere you are",
|
||||
"Self hostable",
|
||||
"Super affordable, with a generous free tier",
|
||||
];
|
||||
45
apps/web/app/(landing)/GridPatterns/PlusGrid.tsx
Normal file
45
apps/web/app/(landing)/GridPatterns/PlusGrid.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
interface PlusPatternBackgroundProps {
|
||||
plusSize?: number;
|
||||
plusColor?: string;
|
||||
backgroundColor?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
fade?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export const BackgroundPlus: React.FC<PlusPatternBackgroundProps> = ({
|
||||
plusColor = "#6b6b6b",
|
||||
backgroundColor = "transparent",
|
||||
plusSize = 60,
|
||||
className,
|
||||
fade = true,
|
||||
style,
|
||||
...props
|
||||
}) => {
|
||||
const encodedPlusColor = encodeURIComponent(plusColor);
|
||||
|
||||
const maskStyle: React.CSSProperties = fade
|
||||
? {
|
||||
maskImage: "radial-gradient(circle, white 10%, transparent 90%)",
|
||||
WebkitMaskImage: "radial-gradient(circle, white 10%, transparent 90%)",
|
||||
}
|
||||
: {};
|
||||
|
||||
const backgroundStyle: React.CSSProperties = {
|
||||
backgroundColor,
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='${plusSize}' height='${plusSize}' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='${encodedPlusColor}' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
||||
...maskStyle,
|
||||
...style,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`absolute inset-0 h-full w-full ${className}`}
|
||||
style={backgroundStyle}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackgroundPlus;
|
||||
120
apps/web/app/(landing)/Headers/Navbar.tsx
Normal file
120
apps/web/app/(landing)/Headers/Navbar.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import React, { useRef, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import Logo from "../../../public/logo.svg";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
export const SlideNavTabs = () => {
|
||||
return (
|
||||
<div className="fixed right-0 left-0 top-5 z-30 mx-auto text-white bg-transparent">
|
||||
<SlideTabs />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SlideTabs = () => {
|
||||
const [position, setPosition] = useState({
|
||||
left: 0,
|
||||
width: 0,
|
||||
opacity: 0,
|
||||
});
|
||||
|
||||
return (
|
||||
<ul
|
||||
onMouseLeave={() => {
|
||||
setPosition((pv) => ({
|
||||
...pv,
|
||||
opacity: 0,
|
||||
}));
|
||||
}}
|
||||
className="flex relative items-center py-3 px-5 mx-auto text-sm text-gray-200 bg-gradient-to-tr to-transparent rounded-full border-2 w-fit border-white/5 from-zinc-300/5 via-gray-400/5 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] backdrop-blur-lg backdrop-filter"
|
||||
>
|
||||
<Link href={"/"} className="flex items-start mr-4 opacity-50 h-fit">
|
||||
<Image src={Logo} alt="Supermemory logo" width={40} height={40} />
|
||||
</Link>
|
||||
|
||||
<Tab key={0} setPosition={setPosition}>
|
||||
<Link className="w-full h-full" href={"/home"}>
|
||||
Home
|
||||
</Link>
|
||||
</Tab>
|
||||
<Tab setPosition={setPosition}>
|
||||
<Link className="w-full h-full" href={"/#use-cases"}>
|
||||
Use cases
|
||||
</Link>
|
||||
</Tab>
|
||||
<Tab setPosition={setPosition}>
|
||||
<Link className="w-full h-full" href={"/#features"}>
|
||||
Features
|
||||
</Link>
|
||||
</Tab>
|
||||
<Tab setPosition={setPosition}>
|
||||
<Link
|
||||
className="w-full h-full"
|
||||
href={"https://github.com/Dhravya/supermemory/graphs/contributors"}
|
||||
>
|
||||
Team
|
||||
</Link>
|
||||
</Tab>
|
||||
|
||||
<Link
|
||||
href="/#waitlist"
|
||||
className="inline-flex gap-x-2 justify-start items-start py-3 px-5 ml-3 w-full rounded-3xl border duration-200 sm:w-auto group bg-page-gradient border-white/30 text-md font-geistSans hover:border-zinc-600 hover:bg-transparent/10 hover:text-zinc-100"
|
||||
>
|
||||
Join waitlist
|
||||
<div className="flex overflow-hidden relative justify-center items-center ml-1 w-5 h-5">
|
||||
<ArrowUpRight className="absolute transition-all duration-500 group-hover:translate-x-4 group-hover:-translate-y-5" />
|
||||
<ArrowUpRight className="absolute transition-all duration-500 -translate-x-4 -translate-y-5 group-hover:translate-x-0 group-hover:translate-y-0" />
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Cursor position={position} />
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
const Tab = ({
|
||||
children,
|
||||
setPosition,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
setPosition: ({
|
||||
left,
|
||||
width,
|
||||
opacity,
|
||||
}: {
|
||||
left: number;
|
||||
width: number;
|
||||
opacity: number;
|
||||
}) => void;
|
||||
}) => {
|
||||
const ref = useRef<HTMLLIElement>(null);
|
||||
|
||||
return (
|
||||
<li
|
||||
ref={ref}
|
||||
onMouseEnter={() => {
|
||||
if (!ref?.current) return;
|
||||
const { width } = ref.current.getBoundingClientRect();
|
||||
setPosition({
|
||||
left: ref.current.offsetLeft,
|
||||
width,
|
||||
opacity: 1,
|
||||
});
|
||||
}}
|
||||
className="block relative z-10 py-2.5 px-3 text-xs text-white uppercase cursor-pointer md:py-2 md:px-5 md:text-base mix-blend-difference"
|
||||
>
|
||||
{children}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
// @ts-ignore
|
||||
const Cursor = ({ position }) => {
|
||||
return (
|
||||
<motion.li
|
||||
animate={{
|
||||
...position,
|
||||
}}
|
||||
className="absolute z-0 h-7 bg-glass-gradient bg-transparent rounded-full md:h-10 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] backdrop-blur-lg backdrop-filter"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -5,6 +5,7 @@ import { Twitter } from "@repo/ui/components/icons";
|
|||
import EmailInput from "./EmailInput";
|
||||
import LinkArrow from "./linkArrow";
|
||||
import { TwitterBorder } from "./twitterLink";
|
||||
import AnimatedLogoCloud from "./ImageSliders";
|
||||
|
||||
const slap = {
|
||||
initial: {
|
||||
|
|
@ -22,41 +23,54 @@ const slap = {
|
|||
function Hero() {
|
||||
return (
|
||||
<>
|
||||
<section className="mt-24 flex max-w-xl flex-col items-center justify-center gap-10 md:mt-56">
|
||||
<section className="flex relative flex-col gap-5 justify-center items-center mt-24 max-w-xl md:mt-32 md:max-w-2xl lg:max-w-3xl">
|
||||
<TwitterBorder />
|
||||
<motion.h1
|
||||
{...{
|
||||
...slap,
|
||||
transition: { ...slap.transition, delay: 0.2 },
|
||||
}}
|
||||
className="text-center text-4xl font-semibold tracking-tight text-white/95 md:text-5xl"
|
||||
className="text-center 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"
|
||||
>
|
||||
Build your own second brain with Supermemory
|
||||
Unlock your{" "}
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r to-blue-200 from-zinc-300">
|
||||
digital brain
|
||||
</span>{" "}
|
||||
with supermemory
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
{...{
|
||||
...slap,
|
||||
transition: { ...slap.transition, delay: 0.3 },
|
||||
}}
|
||||
className="text-soft-foreground-text text-center"
|
||||
className="text-lg text-center text-soft-foreground-text"
|
||||
>
|
||||
Bring saved information from all over the internet into one place
|
||||
where you can connect it, and ask AI about it
|
||||
Supermemory is your ultimate hub for organizing, searching, and
|
||||
utilizing saved information with powerful tools like a search engine,
|
||||
writing assistant, and canvas.
|
||||
</motion.p>
|
||||
<EmailInput />
|
||||
</section>
|
||||
<motion.img
|
||||
{...{
|
||||
...slap,
|
||||
transition: { ...slap.transition, delay: 0.35 },
|
||||
}}
|
||||
src="/landing-ui.svg"
|
||||
alt="Landing page background"
|
||||
width={1512}
|
||||
height={1405}
|
||||
draggable="false"
|
||||
className="z-[-2] mt-28 h-full w-[80%] select-none"
|
||||
/>
|
||||
|
||||
<AnimatedLogoCloud />
|
||||
<div className="relative z-20">
|
||||
<motion.img
|
||||
{...{
|
||||
...slap,
|
||||
transition: { ...slap.transition, delay: 0.35 },
|
||||
}}
|
||||
src="/landing-ui.svg"
|
||||
alt="Landing page background"
|
||||
width={1512}
|
||||
height={1405}
|
||||
draggable="false"
|
||||
className="z-40 md:mt-[-40px] hidden sm:block h-full w-[80%] mx-auto md:w-full select-none px-5"
|
||||
/>
|
||||
<div
|
||||
className="absolute -z-10 left-0 top-[10%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-100 blur-[337.4px]"
|
||||
style={{ transform: "rotate(-30deg)" }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
210
apps/web/app/(landing)/ImageSliders.tsx
Normal file
210
apps/web/app/(landing)/ImageSliders.tsx
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
import {
|
||||
// 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: "Github",
|
||||
url: <Github className="w-32 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Medium",
|
||||
url: <MediumText className="w-52 h brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Notion",
|
||||
url: <NotionText className="w-52 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Reddit",
|
||||
url: <Reddit className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Twitter",
|
||||
url: <Twitter className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
];
|
||||
|
||||
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-4">
|
||||
Works perfectly with the apps you love.
|
||||
</p>
|
||||
{/* <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>
|
||||
<div className="px-4 mx-auto w-full md:px-8 relative ">
|
||||
<div
|
||||
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%)",
|
||||
}}
|
||||
>
|
||||
{Array(5)
|
||||
.fill(null)
|
||||
.map((index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-row gap-5 justify-around items-center animate-logo-cloud shrink-0"
|
||||
>
|
||||
{logos.map((logo, key) => (
|
||||
<>{logo.url}</>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnimatedLogoCloud;
|
||||
|
|
@ -12,31 +12,12 @@ import {
|
|||
useScroll,
|
||||
useMotionValueEvent,
|
||||
} from "framer-motion";
|
||||
import { SlideNavTabs } from "./Headers/Navbar";
|
||||
|
||||
function NavbarContent() {
|
||||
return (
|
||||
<div className="flex w-full flex-row justify-between rounded-2xl bg-white/10 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] backdrop-blur-lg backdrop-filter">
|
||||
<Link href={"/"} className="flex items-center p-3 opacity-50">
|
||||
<Image src={Logo} alt="Supermemory logo" width={40} height={40} />
|
||||
</Link>
|
||||
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-8 p-3">
|
||||
<Link href={"#use-cases"} className="text-soft-foreground-text">
|
||||
Use cases
|
||||
</Link>
|
||||
<Link href={"#features"} className="text-soft-foreground-text">
|
||||
Features
|
||||
</Link>
|
||||
<Link href={"#try"} className="text-soft-foreground-text">
|
||||
Try supermemory
|
||||
</Link>
|
||||
</div>
|
||||
<Link
|
||||
href="/signin"
|
||||
className="m-2 flex items-center gap-3 rounded-xl bg-white/20 px-4 text-center text-white group"
|
||||
>
|
||||
Login
|
||||
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 duration-100 ease-in-out" />
|
||||
</Link>
|
||||
<div className="">
|
||||
<SlideNavTabs />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,14 +30,19 @@ const icons = [
|
|||
|
||||
const RotatingIcons: React.FC = () => {
|
||||
return (
|
||||
<div className="relative flex w-full flex-col items-center justify-center gap-8 px-4 sm:px-6">
|
||||
<h3 className="font-inter-tight mb-4 mt-8 text-center text-3xl font-bold text-zinc-200">
|
||||
Collect data from <br />{" "}
|
||||
<span className="bg-gradient-to-r from-blue-500 to-blue-300 bg-clip-text italic text-transparent ">
|
||||
any website{" "}
|
||||
</span>{" "}
|
||||
on the internet
|
||||
</h3>
|
||||
<div className="relative flex w-full flex-col items-center justify-center gap-8 px-4 sm:px-6 mt-10">
|
||||
<motion.h1
|
||||
{...{
|
||||
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-5xl lg:text-6xl"
|
||||
>
|
||||
Collect any data{" "}
|
||||
<span className="bg-gradient-to-r from-zinc-300 to-blue-200 bg-clip-text text-transparent">
|
||||
any website on the internet
|
||||
|
||||
</span>
|
||||
</motion.h1>
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="relative m-2 mx-auto h-96 w-96 scale-[70%] md:scale-100 ">
|
||||
<div className="relative h-full w-full rounded-full border border-gray-800">
|
||||
|
|
|
|||
280
apps/web/app/(landing)/Showcase.tsx
Normal file
280
apps/web/app/(landing)/Showcase.tsx
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
"use client";
|
||||
|
||||
import { useId } from "react";
|
||||
import Image, { type ImageProps } from "next/image";
|
||||
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
import TestImg from "../../public/images/carousel-illustration-01.png";
|
||||
import Search from "../../public/images/search.svg";
|
||||
import Memroy from "../../public/images/memory.svg";
|
||||
interface Feature {
|
||||
name: React.ReactNode;
|
||||
summary: string;
|
||||
description: string;
|
||||
image: ImageProps["src"];
|
||||
icon: React.ComponentType;
|
||||
}
|
||||
|
||||
// TODO: This features section will be more for "use-cases"
|
||||
const features: Array<Feature> = [
|
||||
{
|
||||
name: "Ideation",
|
||||
summary:
|
||||
"Never lose a great idea again - instead of saving it in your head, save it in supermemory.",
|
||||
description:
|
||||
"The internet is full of great ideas, but there's a problem. They are ephemeral. They come and go. ",
|
||||
image: "search.svg",
|
||||
icon: function ReportingIcon() {
|
||||
let id = useId();
|
||||
return (
|
||||
<>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={id}
|
||||
x1="11.5"
|
||||
y1={18}
|
||||
x2={36}
|
||||
y2="15.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset=".194" stopColor="#fff" />
|
||||
<stop offset={1} stopColor="#6692F1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="m30 15-4 5-4-11-4 18-4-11-4 7-4-5"
|
||||
stroke={`url(#${id})`}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Bookmarks",
|
||||
summary: "Simply great bookmarking tool.",
|
||||
description:
|
||||
"Good bookmarking tools have ways to import and organise your bookmarks. Great bookmarking tool resurfaces them when you need them.",
|
||||
image: "memory.svg",
|
||||
icon: function InventoryIcon() {
|
||||
return (
|
||||
<>
|
||||
<path
|
||||
opacity=".5"
|
||||
d="M8 17a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
opacity=".3"
|
||||
d="M8 24a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="M8 10a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Contacts",
|
||||
summary: "Life is all about the people you know.",
|
||||
description:
|
||||
"Tell supermemory about people you know, and when you forget, you know where to look.",
|
||||
image: "search.svg",
|
||||
icon: function ContactsIcon() {
|
||||
return (
|
||||
<>
|
||||
<path
|
||||
opacity=".5"
|
||||
d="M25.778 25.778c.39.39 1.027.393 1.384-.028A11.952 11.952 0 0 0 30 18c0-6.627-5.373-12-12-12S6 11.373 6 18c0 2.954 1.067 5.659 2.838 7.75.357.421.993.419 1.384.028.39-.39.386-1.02.036-1.448A9.959 9.959 0 0 1 8 18c0-5.523 4.477-10 10-10s10 4.477 10 10a9.959 9.959 0 0 1-2.258 6.33c-.35.427-.354 1.058.036 1.448Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="M12 28.395V28a6 6 0 0 1 12 0v.395A11.945 11.945 0 0 1 18 30c-2.186 0-4.235-.584-6-1.605ZM21 16.5c0-1.933-.5-3.5-3-3.5s-3 1.567-3 3.5 1.343 3.5 3 3.5 3-1.567 3-3.5Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({
|
||||
feature,
|
||||
isActive,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"div"> & {
|
||||
feature: Feature;
|
||||
isActive: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(className, !isActive && "opacity-75 hover:opacity-100")}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-9 rounded-lg",
|
||||
isActive ? "bg-blue-600" : "bg-slate-500",
|
||||
)}
|
||||
>
|
||||
<svg aria-hidden="true" className="h-9 w-9" fill="none">
|
||||
<feature.icon />
|
||||
</svg>
|
||||
</div>
|
||||
<h3
|
||||
className={clsx(
|
||||
"mt-6 text-sm font-medium",
|
||||
isActive ? "text-blue-600" : "text-gray-300",
|
||||
)}
|
||||
>
|
||||
{feature.name}
|
||||
</h3>
|
||||
<p className="mt-2 font-display text-xl text-gray-200">
|
||||
{feature.summary}
|
||||
</p>
|
||||
<p className="mt-4 text-sm text-gray-300">{feature.description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeaturesMobile() {
|
||||
return (
|
||||
<div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.summary}>
|
||||
<Feature feature={feature} className="mx-auto max-w-2xl" isActive />
|
||||
<div className="relative mt-10 pb-10">
|
||||
<div className="absolute -inset-x-4 bottom-0 top-8 bg-page-gradient sm:-inset-x-6" />
|
||||
<div className="relative mx-auto w-[52.75rem] overflow-hidden rounded-xl bg-glass-gradient shadow-lg shadow-gray-200/5 ring-1 ring-slate-500/10">
|
||||
<img
|
||||
className="w-full"
|
||||
src={`/images/${feature.image}`}
|
||||
alt=""
|
||||
sizes="52.75rem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeaturesDesktop() {
|
||||
return (
|
||||
<TabGroup className="hidden lg:mt-20 lg:block">
|
||||
{({ selectedIndex }) => (
|
||||
<>
|
||||
<TabList className="grid grid-cols-3 gap-x-8">
|
||||
{features.map((feature, featureIndex) => (
|
||||
<Feature
|
||||
key={feature.summary}
|
||||
feature={{
|
||||
...feature,
|
||||
name: (
|
||||
<Tab className="ui-not-focus-visible:outline-none">
|
||||
<span className="absolute inset-0" />
|
||||
{feature.name}
|
||||
</Tab>
|
||||
),
|
||||
}}
|
||||
isActive={featureIndex === selectedIndex}
|
||||
className="relative"
|
||||
/>
|
||||
))}
|
||||
</TabList>
|
||||
<TabPanels className="relative mt-20 overflow-hidden rounded-3xl bg-page-gradient px-14 py-16 xl:px-16">
|
||||
<div className="-mx-5 flex">
|
||||
{features.map((feature, featureIndex) => (
|
||||
<TabPanel
|
||||
static
|
||||
key={feature.summary}
|
||||
className={clsx(
|
||||
"px-5 transition duration-500 ease-in-out ui-not-focus-visible:outline-none",
|
||||
featureIndex !== selectedIndex && "opacity-60",
|
||||
)}
|
||||
style={{ transform: `translateX(-${selectedIndex * 100}%)` }}
|
||||
aria-hidden={featureIndex !== selectedIndex}
|
||||
>
|
||||
<div className="w-[52.75rem] overflow-hidden rounded-xl bg-page-gradient shadow-lg shadow-gray-200/5 ring-1 ring-slate-500/10">
|
||||
<img
|
||||
className="max-w-full"
|
||||
src={`/images/${feature.image}`}
|
||||
alt=""
|
||||
sizes="52.75rem"
|
||||
/>
|
||||
</div>
|
||||
</TabPanel>
|
||||
))}
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-4xl ring-1 ring-inset ring-gray-200/10" />
|
||||
</TabPanels>
|
||||
</>
|
||||
)}
|
||||
</TabGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export function Showcases() {
|
||||
return (
|
||||
<section
|
||||
id="use-cases"
|
||||
className=" bg-page-gradient bg-opacity-0 relative pb-14 pt-20 sm:pb-20 sm:pt-32 lg:pb-32 w-full mt-10"
|
||||
>
|
||||
<Container>
|
||||
<div className="-z-1 absolute inset-x-0 -top-0 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] opacity-10 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
||||
<div
|
||||
className="h-fukl absolute inset-0 rotate-180 blur-xl"
|
||||
// style={{
|
||||
// background:
|
||||
// "linear-gradient(143.6deg, rgba(52, 103, 235, 0) 20.79%, rgba(120,119,198, 0.26) 40.92%, rgba(120,119,198, 0) 70.35%)",
|
||||
// }}
|
||||
></div>
|
||||
{/* <img
|
||||
className="absolute inset-x-0 -top-0 opacity-75 "
|
||||
src={
|
||||
"/images/landing-hero-left.webp"
|
||||
}
|
||||
width={1000}
|
||||
height={1000}
|
||||
alt="back bg"
|
||||
/> */}
|
||||
<div className="mr-auto relative max-w-3xl md:text-start">
|
||||
<h2 className="font-display text-4xl tracking-tight text-gray-200 sm:text-7xl">
|
||||
<span className="bg-gradient-to-br from-indigo-400 via-indigo-300 to-indigo-700 bg-clip-text text-transparent">
|
||||
Supermemory <br />
|
||||
</span>{" "}
|
||||
remembers everything.
|
||||
</h2>
|
||||
<p className="mt-4 text-lg tracking-tight text-gray-100">
|
||||
... so you don't have to. Whether you're a student, a professional,
|
||||
or just a person on the the internet. we got you covered.
|
||||
</p>
|
||||
<div className="overflow-x-hidden overflow-y-hidden">
|
||||
<div className="absolute right-0 z-20 top-[0%] h-40 w-[17%] overflow-x-hidden bg-[#369DFD] bg-opacity-20 blur-[110px]" />
|
||||
</div>
|
||||
</div>
|
||||
<FeaturesMobile />
|
||||
<FeaturesDesktop />
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function Container({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"div">) {
|
||||
return (
|
||||
<div
|
||||
className={clsx("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import LinkArrow from "./linkArrow";
|
|||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="mt-20 flex w-full items-center justify-between gap-4 px-8 py-8 text-sm text-zinc-500">
|
||||
<footer className="mt-20 flex w-full overflow-y-hidden items-center justify-between gap-4 px-8 py-8 text-sm text-zinc-500 overflow-hidden">
|
||||
<p>© 2024 Supermemory.ai</p>
|
||||
<div className="flex gap-5">
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@ import Cta from "./Cta";
|
|||
import { Toaster } from "@repo/ui/shadcn/toaster";
|
||||
import Features from "./Features";
|
||||
import Footer from "./footer";
|
||||
import { auth } from "../../server/auth";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/server/auth";
|
||||
import Services from "./Features/index";
|
||||
import { Showcases } from "./Showcase";
|
||||
import BackgroundPlus from "./GridPatterns/PlusGrid";
|
||||
|
||||
export const runtime = "edge";
|
||||
|
||||
|
|
@ -16,48 +18,53 @@ export default async function Home() {
|
|||
console.log(user);
|
||||
|
||||
if (user) {
|
||||
await redirect("/home");
|
||||
// await redirect("/home")
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0">
|
||||
<Navbar />
|
||||
<>
|
||||
<BackgroundPlus />
|
||||
<main className="flex overflow-x-hidden relative flex-col items-center px-2 min-h-screen md:px-0 font-geistSans bg-hero-gradient">
|
||||
<div className="absolute top-0 z-10 min-h-screen w-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>
|
||||
|
||||
{/* Background gradients */}
|
||||
<div className="absolute left-0 top-0 z-[-1] h-full w-full">
|
||||
<div className="overflow-x-hidden">
|
||||
<Navbar />
|
||||
|
||||
{/* Background gradients */}
|
||||
<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]"
|
||||
style={{ transform: "rotate(-30deg)" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
|
||||
{/* <div className="overflow-x-hidden overflow-y-hidden">
|
||||
<div
|
||||
className="absolute left-0 h-32 w-[95%] overflow-x-hidden bg-[#369DFD] bg-opacity-70 blur-[337.4px]"
|
||||
className="absolute left-0 top-[100%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-40 blur-[337.4px]"
|
||||
style={{ transform: "rotate(-30deg)" }}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
|
||||
<div className="overflow-x-hidden">
|
||||
<div
|
||||
className="absolute left-0 top-[100%] h-32 w-[90%] overflow-x-hidden bg-[#369DFD] bg-opacity-40 blur-[337.4px]"
|
||||
style={{ transform: "rotate(-30deg)" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-hidden">
|
||||
{/* <div className="overflow-x-hidden overflow-y-hidden">
|
||||
<div className="absolute right-0 top-[145%] h-40 w-[17%] overflow-x-hidden bg-[#369DFD] bg-opacity-20 blur-[110px]" />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero section */}
|
||||
<Hero />
|
||||
{/* Hero section */}
|
||||
<Hero />
|
||||
<Showcases />
|
||||
<Services />
|
||||
|
||||
{/* Features section */}
|
||||
<Features />
|
||||
{/* Features section */}
|
||||
<Features />
|
||||
|
||||
<RotatingIcons />
|
||||
<RotatingIcons />
|
||||
<Cta />
|
||||
|
||||
<Cta />
|
||||
|
||||
<Toaster />
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
<Toaster />
|
||||
<Footer />
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ import LinkArrow from "./linkArrow";
|
|||
|
||||
export function TwitterBorder() {
|
||||
return (
|
||||
<a href="https://twitter.com/supermemoryai" target="_blank">
|
||||
<a href="https://x.com/supermemoryai" target="_blank">
|
||||
<HoverBorderGradient
|
||||
containerClassName="rounded-full"
|
||||
className="group/anchor pl-10 pr-6 flex items-center justify-center gap-4 rounded-full text-white/80 bg-white/5 py-2 text-sm"
|
||||
className="group/anchor z-20 pl-10 pr- flex items-center justify-center gap-4 rounded-full text-white/80 bg-white/5 py-2 text-sm"
|
||||
>
|
||||
<Twitter className="h-4 w-4" />
|
||||
<div className="flex">
|
||||
|
|
@ -87,7 +87,7 @@ export function HoverBorderGradient({
|
|||
}}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
className={cn(
|
||||
"relative h-min w-fit transition duration-500 group/anchor flex items-center justify-center gap-4 rounded-full text-white/80 bg-white/5 text-sm",
|
||||
"relative h-min w-fit mt-10 transition duration-500 group/anchor flex items-center justify-center gap-4 rounded-full text-white/80 bg-white/5 text-sm",
|
||||
containerClassName,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,11 @@ import "@repo/tailwind-config/globals.css";
|
|||
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { GeistSans } from "geist/font/sans";
|
||||
import { GeistMono } from "geist/font/mono";
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
import BackgroundPlus from "./(landing)/GridPatterns/PlusGrid";
|
||||
import { Toaster } from "@repo/ui/shadcn/toaster";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const runtime = "edge";
|
||||
|
|
@ -62,12 +65,18 @@ export default function RootLayout({
|
|||
children: React.ReactNode;
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" className="overflow-x-hidden" suppressHydrationWarning>
|
||||
{/* <head>
|
||||
<ThemeScript />
|
||||
</head> */}
|
||||
{/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
|
||||
<body className={`${inter.className} dark`}>
|
||||
<body
|
||||
className={cn(
|
||||
`${inter.className} dark`,
|
||||
GeistMono.variable,
|
||||
GeistSans.variable,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
<Toaster />
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -105,4 +105,4 @@ CREATE INDEX `spaces_user_idx` ON `space` (`user`);--> statement-breakpoint
|
|||
CREATE INDEX `storedContent_url_idx` ON `storedContent` (`url`);--> statement-breakpoint
|
||||
CREATE INDEX `storedContent_savedAt_idx` ON `storedContent` (`savedAt`);--> statement-breakpoint
|
||||
CREATE INDEX `storedContent_title_idx` ON `storedContent` (`title`);--> statement-breakpoint
|
||||
CREATE INDEX `storedContent_user_idx` ON `storedContent` (`user`);
|
||||
CREATE INDEX `storedContent_user_idx` ON `storedContent` (`user`);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
"@million/lint": "^1.0.0-rc.11",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
"@radix-ui/react-popover": "^1.0.7",
|
||||
"@repo/ui": "*",
|
||||
"cmdk": "^1.0.0",
|
||||
"lowlight": "^3.1.0",
|
||||
"million": "^3.1.6",
|
||||
|
|
|
|||
BIN
apps/web/public/images/github.webp
Normal file
BIN
apps/web/public/images/github.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
apps/web/public/images/gradient.png
Normal file
BIN
apps/web/public/images/gradient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
apps/web/public/images/landing-hero-left.webp
Normal file
BIN
apps/web/public/images/landing-hero-left.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
apps/web/public/images/landing_integrations.png
Normal file
BIN
apps/web/public/images/landing_integrations.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
BIN
apps/web/public/images/landing_vault.png
Normal file
BIN
apps/web/public/images/landing_vault.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
68
apps/web/public/images/memory.svg
Normal file
68
apps/web/public/images/memory.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 252 KiB |
BIN
apps/web/public/images/privacy.png
Normal file
BIN
apps/web/public/images/privacy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
53
apps/web/public/images/search.svg
Normal file
53
apps/web/public/images/search.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 327 KiB |
BIN
apps/web/public/images/service-1.png
Normal file
BIN
apps/web/public/images/service-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
apps/web/public/images/tailwind-bg-gradient.avif
Normal file
BIN
apps/web/public/images/tailwind-bg-gradient.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="42" height="42" viewBox="0 0 42 42" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.0357 8C20.5531 8 21 9.27461 21 10.8438V16.3281H23.5536V14.2212C23.5536 13.1976 23.9468 12.216 24.6467 11.4922L25.0529 11.0721C24.9729 10.8772 24.9286 10.6627 24.9286 10.4375C24.9286 9.54004 25.6321 8.8125 26.5 8.8125C27.3679 8.8125 28.0714 9.54004 28.0714 10.4375C28.0714 11.335 27.3679 12.0625 26.5 12.0625C26.2822 12.0625 26.0748 12.0167 25.8863 11.9339L25.4801 12.354C25.0012 12.8492 24.7321 13.5209 24.7321 14.2212V16.3281H28.9714C29.2045 15.7326 29.7691 15.3125 30.4286 15.3125C31.2964 15.3125 32 16.04 32 16.9375C32 17.835 31.2964 18.5625 30.4286 18.5625C29.7691 18.5625 29.2045 18.1424 28.9714 17.5469H21V21.2031H25.0428C25.2759 20.6076 25.8405 20.1875 26.5 20.1875C27.3679 20.1875 28.0714 20.915 28.0714 21.8125C28.0714 22.71 27.3679 23.4375 26.5 23.4375C25.8405 23.4375 25.2759 23.0174 25.0428 22.4219H21V26.0781H24.4125C25.4023 26.0781 26.3516 26.4847 27.0515 27.2085L29.0292 29.2536C29.2177 29.1708 29.4251 29.125 29.6429 29.125C30.5107 29.125 31.2143 29.8525 31.2143 30.75C31.2143 31.6475 30.5107 32.375 29.6429 32.375C28.775 32.375 28.0714 31.6475 28.0714 30.75C28.0714 30.5248 28.1157 30.3103 28.1958 30.1154L26.2181 28.0703C25.7392 27.5751 25.0897 27.2969 24.4125 27.2969H21V31.1562C21 32.7254 20.5531 34 19.0357 34C17.6165 34 16.4478 32.8879 16.3004 31.4559C16.0451 31.527 15.775 31.5625 15.5 31.5625C13.7665 31.5625 12.3571 30.1051 12.3571 28.3125C12.3571 27.9367 12.421 27.5711 12.5339 27.2359C11.0509 26.657 10 25.1742 10 23.4375C10 21.8176 10.9183 20.416 12.2491 19.766C11.8219 19.2125 11.5714 18.5117 11.5714 17.75C11.5714 16.191 12.6321 14.891 14.0464 14.5711C13.9679 14.2918 13.9286 13.9922 13.9286 13.6875C13.9286 12.1691 14.9402 10.8895 16.3004 10.534C16.4478 9.11211 17.6165 8 19.0357 8Z"
|
||||
fill="#545B62"/>
|
||||
fill="#fff"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1 +1,2 @@
|
|||
module.exports = require("@repo/tailwind-config/tailwind.config");
|
||||
|
||||
|
|
@ -74,6 +74,7 @@
|
|||
"compromise": "^14.13.0",
|
||||
"drizzle-orm": "^0.31.2",
|
||||
"framer-motion": "^11.2.6",
|
||||
"geist": "^1.3.0",
|
||||
"grammy": "^1.25.1",
|
||||
"katex": "^0.16.10",
|
||||
"lucide-react": "^0.379.0",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.378.0",
|
||||
"tailwind-merge": "^2.3.0",
|
||||
"tailwind-scrollbar": "^3.1.0",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ const config = {
|
|||
},
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
geistSans: ["var(--font-geist-sans)"],
|
||||
geistMono: ["var(--font-geist-mono)"],
|
||||
},
|
||||
colors: {
|
||||
foreground: "var(--foreground)",
|
||||
"foreground-menu": "var(--foreground-menu)",
|
||||
|
|
@ -56,10 +60,27 @@ const config = {
|
|||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
gradient: {
|
||||
to: {
|
||||
backgroundPosition: "var(--bg-size) 0",
|
||||
},
|
||||
},
|
||||
"background-shine": {
|
||||
from: {
|
||||
backgroundPosition: "0 0",
|
||||
},
|
||||
to: {
|
||||
backgroundPosition: "-200% 0",
|
||||
},
|
||||
},
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"logo-cloud": {
|
||||
from: { transform: "translateX(0)" },
|
||||
to: { transform: "translateX(calc(-100% - 1rem))" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
|
|
@ -68,6 +89,25 @@ const config = {
|
|||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
"logo-cloud": "logo-cloud 30s linear infinite",
|
||||
"background-shine": "background-shine 5s linear infinite",
|
||||
gradient: "gradient 8s linear infinite",
|
||||
},
|
||||
backgroundImage: {
|
||||
"glass-gradient":
|
||||
"linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 100%)",
|
||||
"glow-lines":
|
||||
"linear-gradient(var(--direction), #9d9bf2 0.43%, #7877c6 14.11%, rgba(120, 119, 198, 0) 62.95%)",
|
||||
"hero-glow":
|
||||
"conic-gradient(from 230.29deg at 51.63% 52.16%, rgb(36, 0, 255) 0deg, rgb(0, 135, 255) 67.5deg, rgb(108, 39, 157) 198.75deg, rgb(24, 38, 163) 251.25deg, rgb(54, 103, 196) 301.88deg, rgb(105, 30, 255) 360deg)",
|
||||
"hero-gradient":
|
||||
"radial-gradient(ellipse 50% 80% at 20% 40%, rgba(93, 52, 221, 0.1), transparent), radial-gradient(ellipse 50% 80% at 80% 50%, rgba(120, 119, 198, 0.15),transparent)",
|
||||
"page-gradient":
|
||||
"radial-gradient(ellipse 80% 50% at 50% -20%,rgba(120, 119, 198, 0.3), transparent)",
|
||||
"primary-gradient":
|
||||
"linear-gradient(92.88deg, rgb(69, 94, 181) 9.16%, rgb(86, 67, 204) 43.89%, rgb(103, 63, 215) 64.72%)",
|
||||
"radial-faded":
|
||||
"radial-gradient(circle at bottom center, var(--color), transparent 70%)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
import React from "react";
|
||||
import Divider from "../shadcn/divider";
|
||||
import { ArrowRightIcon } from "../icons";
|
||||
import Image from "next/image";
|
||||
|
||||
function QueryInput() {
|
||||
return (
|
||||
<div>
|
||||
<div className="bg-secondary rounded-[20px] h-[68 px]">
|
||||
{/* input and action button */}
|
||||
<form className="flex gap-4 p-2.5">
|
||||
<textarea
|
||||
name="q"
|
||||
cols={30}
|
||||
rows={4}
|
||||
className="bg-transparent h-12 focus:h-[128px] no-scrollbar pt-3 px-2 text-base placeholder:text-[#5D6165] text-[#9DA0A4] focus:text-white duration-200 tracking-[3%] outline-none resize-none w-full"
|
||||
placeholder="Ask your second brain..."
|
||||
// onKeyDown={(e) => {
|
||||
// if (e.key === "Enter") {
|
||||
// e.preventDefault();
|
||||
// if (!e.shiftKey) push(parseQ());
|
||||
// }
|
||||
// }}
|
||||
// onChange={(e) => setQ(e.target.value)}
|
||||
// value={q}
|
||||
// disabled={disabled}
|
||||
/>
|
||||
|
||||
<button
|
||||
// type="submit"
|
||||
// onClick={e => e.preventDefault()}
|
||||
// disabled={disabled}
|
||||
className="h-12 w-12 rounded-[14px] bg-[#21303D] all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90"
|
||||
>
|
||||
<Image src={ArrowRightIcon} alt="Right arrow icon" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* <Divider /> */}
|
||||
</div>
|
||||
{/* selected sources */}
|
||||
{/* <div className="flex items-center gap-6 p-2 h-auto bg-secondary"> */}
|
||||
{/* <MultipleSelector
|
||||
key={options.length}
|
||||
disabled={disabled}
|
||||
defaultOptions={options}
|
||||
onChange={(e) => setSelectedSpaces(e.map((x) => parseInt(x.value)))}
|
||||
placeholder="Focus on specific spaces..."
|
||||
emptyIndicator={
|
||||
<p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
|
||||
no results found.
|
||||
</p>
|
||||
}
|
||||
/> */}
|
||||
{/* </div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default QueryInput;
|
||||
|
|
@ -71,7 +71,7 @@ const TldrawComponent = memo(() => {
|
|||
});
|
||||
}, []);
|
||||
|
||||
setUserPreferences({ id: "supermemory", isDarkMode: true });
|
||||
setUserPreferences({ id: "supermemory" });
|
||||
|
||||
const assetUrls = getAssetUrls();
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@ export const CardClick = ({
|
|||
{items.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group relative block h-full w-full cursor-pointer rounded-2xl p-2 transition-all hover:border"
|
||||
className="group relative block h-full w-full cursor-pointer rounded-2xl p-2 border border-transparent hover:bg-page-gradient hover:border hover:border-white/20 rounded-3xl mt-1"
|
||||
onMouseDown={() => handleClickIndex(idx)}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{tab === idx && (
|
||||
<motion.span
|
||||
className="absolute inset-0 -z-[1] block h-full w-full rounded-3xl [background:linear-gradient(#2E2E32,#2E2E32),linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))]"
|
||||
className="absolute inset-0 -z-[1] block h-full w-full rounded-3xl bg-page-gradient [background:linear-gradient(#2E2E32,#2E2E32),linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))]"
|
||||
layoutId="hoverBackground"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
|
|
|
|||
|
|
@ -277,8 +277,8 @@ export const X = (props: SVGProps<SVGSVGElement>) => (
|
|||
|
||||
export const Google = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
width="1.5em"
|
||||
height="1.5em"
|
||||
width="1.3em"
|
||||
height="1.3em"
|
||||
viewBox="0 0 256 262"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
import * as React from "react";
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
||||
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
|
||||
const Tabs = TabsPrimitive.Root
|
||||
const Tabs = TabsPrimitive.Root;
|
||||
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.List>,
|
||||
|
|
@ -14,13 +14,13 @@ const TabsList = React.forwardRef<
|
|||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
|
||||
className
|
||||
"inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsList.displayName = TabsPrimitive.List.displayName
|
||||
));
|
||||
TabsList.displayName = TabsPrimitive.List.displayName;
|
||||
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||
|
|
@ -29,13 +29,13 @@ const TabsTrigger = React.forwardRef<
|
|||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-xl px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#2B3237] data-[state=active]:text-[#858B92] data-[state=active]:shadow-sm",
|
||||
className
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
|
||||
));
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
||||
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||
|
|
@ -45,11 +45,11 @@ const TabsContent = React.forwardRef<
|
|||
ref={ref}
|
||||
className={cn(
|
||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName
|
||||
));
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
// Inspired by react-hot-toast library
|
||||
import * as React from "react";
|
||||
|
||||
import type { ToastActionElement, ToastProps } from "@repo/ui/shadcn/toast";
|
||||
|
||||
const TOAST_LIMIT = 1;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue