mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-08-28 05:25:33 +00:00
feat: landing page revamp init
This commit is contained in:
Kinfe123
parent
a7dc883bc4
commit
14a82cf087
31 changed files with 1483 additions and 50 deletions
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':"12%"}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -39,7 +39,7 @@ function EmailInput() {
|
|||
<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/20 bg-[#37485E] px-4 outline-none duration-300 focus:outline-none`}
|
||||
placeholder="Enter your email"
|
||||
value={email}
|
||||
required
|
||||
|
|
@ -53,7 +53,7 @@ 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 bg-gray-700 p-4 text-white duration-300"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
173
apps/web/app/(landing)/FeatureCardContent.tsx
Normal file
173
apps/web/app/(landing)/FeatureCardContent.tsx
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
import { GlareCard } from "./CardPatterns/Glare";
|
||||
import React from "react";
|
||||
|
||||
export default function FUIFeatureSectionWithCards() {
|
||||
const features = [
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Fast Refresh",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Analytics",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Datacenter security",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Build on your terms",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Safe to use",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Flexible",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="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">
|
||||
{/* Let’s help power your SaaS */}
|
||||
</h3>
|
||||
{/* <p className="mt-3 text-gray-200 font-geist">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
||||
congue, nisl eget molestie varius, enim ex faucibus purus.
|
||||
</p> */}
|
||||
</div>
|
||||
<div
|
||||
className="absolute inset-0 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>
|
||||
{/* <hr className="z-20 mx-auto w-1/2 inivisible h-[0.2px] bg-whi" /> */}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
@ -6,6 +6,9 @@ import { X } from "@repo/ui/components/icons";
|
|||
|
||||
import { features } from "./FeatureContent";
|
||||
import { CardClick } from "@repo/ui/components/cardClick";
|
||||
import FUIFeatureSectionWithCards from "./FeatureCardContent";
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
|
||||
export default function Features() {
|
||||
const [tab, setTab] = useState<number>(0);
|
||||
|
|
@ -27,11 +30,40 @@ export default function Features() {
|
|||
|
||||
return (
|
||||
<section className="relative w-full overflow-hidden max-lg:after:hidden">
|
||||
<div className="py-12 md:pb-32">
|
||||
<img
|
||||
src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
|
||||
className="absolute -top-0 left-10 z-2 opacity-60"
|
||||
/>
|
||||
<div className="relative bg-page-gradient ">
|
||||
<div className="-z-1 absolute inset-x-0 -top-0 h-screen w-full bg-transparent bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] opacity-5 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
||||
|
||||
<div className=" max-w-screen-xl mx-auto px-4 md:px-8 relative flex flex-col">
|
||||
<div className="max-w-3xl mr-auto space-y-4 text-left mb-10">
|
||||
<h2 className="pt-16 text-4xl md:text-5xl lg:text-6xl font-nomral tracking-tighter font-geist bg-gradient-to-tr from-zinc-400/50 via-white to-white/60 bg-clip-text text-transparent">
|
||||
A Supermemory has all the memory saved for you
|
||||
</h2>
|
||||
<p className="text-zinc-400">
|
||||
Supermemory offers all the vital building blocks you need to transform
|
||||
your idea into a great-looking startup.
|
||||
</p>
|
||||
<button className="group mt-4 w-fit px-10 font-geist bg-page-gradient tracking-tighter text-center rounded-md text-md bg-gradient-to-br from-zinc-400 to-zinc-700 py-2 text-lg text-zinc-50 ring-2 ring-zinc-500/50 ring-offset-1 ring-offset-zinc-950/5 transition-all hover:scale-[1.02] hover:ring-transparent active:scale-[0.98] active:ring-zinc-500/70 flex items-center justify-center gap-2">
|
||||
Get Started
|
||||
<div className="relative ml-1 h-5 w-5 overflow-hidden">
|
||||
<ArrowUpRight className="absolute transition-all duration-500 group-hover:-translate-y-5 group-hover:translate-x-4" />
|
||||
<ArrowUpRight className="absolute transition-all duration-500 -translate-y-5 group-hover:translate-y-0 -translate-x-4 group-hover:translate-x-0" />
|
||||
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<FUIFeatureSectionWithCards />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-12 md:pb-32 pt-0">
|
||||
{/* Carousel */}
|
||||
<div
|
||||
id="use-cases"
|
||||
className="mx-auto max-w-xl px-4 sm:px-6 md:pt-40 lg:max-w-6xl"
|
||||
className="mx-auto max-w-3xl px-0 sm:px-4 lg:px-0 md:pt-10 lg:max-w-6xl relative"
|
||||
>
|
||||
<div className="space-y-12 lg:flex lg:space-x-12 lg:space-y-0 xl:space-x-24">
|
||||
{/* Content */}
|
||||
|
|
@ -40,7 +72,7 @@ export default function Features() {
|
|||
<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">
|
||||
<h3 className="font-normal mb-4 text-3xl tracking-tighter text-zinc-200">
|
||||
Save time and keep things organised
|
||||
</h3>
|
||||
<p className="text-lg text-zinc-500">
|
||||
|
|
|
|||
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;
|
||||
66
apps/web/app/(landing)/Features/features.tsx
Normal file
66
apps/web/app/(landing)/Features/features.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { PlayIcon } from "lucide-react";
|
||||
import ChatBubbleWing from "./chatbubble";
|
||||
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}`)}>
|
||||
<img
|
||||
className="absolute top-1/2 left-1/2 w-[79.5625rem] max-w-[79.5625rem] h-[88.5625rem] -translate-x-1/2 -translate-y-1/2"
|
||||
// src="https://farmui.vercel.app/bg-back.png"
|
||||
src={
|
||||
"/images/gradient.png"
|
||||
}
|
||||
width={1417}
|
||||
height={1417}
|
||||
alt="Gradient"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PhotoChatMessage = () => {
|
||||
return (
|
||||
<div className="absolute top-8 right-8 max-w-[17.5rem] py-6 px-8 bg-black rounded-t-xl rounded-bl-xl font-code text-base lg:top-16 lg:right-[8.75rem] lg:max-w-[17.5rem]">
|
||||
Hey Brainwave, enhance this photo
|
||||
<ChatBubbleWing className="absolute left-full bottom-0" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const VideoChatMessage = () => {
|
||||
return (
|
||||
<div className="absolute top-8 left-[3.125rem] w-full max-w-[14rem] pt-2.5 pr-2.5 pb-7 pl-5 bg-n-6 rounded-t-xl rounded-br-xl font-code text-base md:max-w-[17.5rem]">
|
||||
Video generated!
|
||||
<div className="absolute left-5 -bottom-[1.125rem] flex items-center justify-center w-[2.25rem] h-[2.25rem] bg-color-1 rounded-[0.75rem]">
|
||||
<img
|
||||
src={
|
||||
"https://github.com/adrianhajdin/brainwave/blob/main/src/assets/brainwave-symbol-white.svg"
|
||||
}
|
||||
width={26}
|
||||
height={26}
|
||||
alt="Brainwave"
|
||||
/>
|
||||
</div>
|
||||
<p className="tagline absolute right-2.5 bottom-1 text-[0.625rem] text-n-3 uppercase">
|
||||
just now
|
||||
</p>
|
||||
<ChatBubbleWing
|
||||
className="absolute right-full bottom-0 -scale-x-100"
|
||||
pathClassName="fill-n-6"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const VideoBar = () => {
|
||||
return (
|
||||
<div className="absolute left-0 bottom-0 w-full flex items-center p-6">
|
||||
<PlayIcon className="w-10 h-20 m-3" />
|
||||
|
||||
<div className="flex-1 bg-[#D9D9D9]">
|
||||
<div className="w-1/2 h-0.5 bg-color-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
18
apps/web/app/(landing)/Features/generating.tsx
Normal file
18
apps/web/app/(landing)/Features/generating.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
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"/>
|
||||
|
||||
AI is generating for you...
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Generating;
|
||||
210
apps/web/app/(landing)/Features/index.tsx
Normal file
210
apps/web/app/(landing)/Features/index.tsx
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
import { CheckIcon, ChevronRight } from "lucide-react";
|
||||
import {
|
||||
PhotoChatMessage,
|
||||
Gradient,
|
||||
VideoBar,
|
||||
VideoChatMessage,
|
||||
} from "./features";
|
||||
|
||||
import Generating from "./generating";
|
||||
import Service01 from "../../../public/images/service-1.png";
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<div id="how-to-use">
|
||||
<div className="container">
|
||||
<div className="max-w-5xl mr-auto">
|
||||
<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%)]">
|
||||
Supermemory is made for all.
|
||||
</h1>
|
||||
<p className="text-left ml-auto font-nomral tracking-tight text-lg mb-10">
|
||||
Brainwave unlocks the potential of AI-powered
|
||||
</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="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
|
||||
className="absolute top-0 right-0 z-2 opacity-100"
|
||||
/>
|
||||
<img
|
||||
src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
|
||||
className="absolute top-0 right-0 z-2 opacity-100"
|
||||
/>
|
||||
<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 ">SuperMemoery.</h4>
|
||||
<p className="body-2 mb-[3rem] text-n-3">
|
||||
Supermemory unlocks the potential of AI-powered applications
|
||||
</p>
|
||||
<ul className="text-lg">
|
||||
{brainwaveServices.map((item, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-start py-4 border-t border-white/20"
|
||||
>
|
||||
<CheckIcon className="w-4 h-4 mt-2 inline-flex justify-center items-center text-slate-200 size-4 rounded-full ml-2" />
|
||||
{/* <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 relative rounded-3xl border min-h-[30rem] bg-hero-gradient bg-slate-950/10 border-white/10">
|
||||
<div className="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>
|
||||
|
||||
<img
|
||||
src="https://jsm-brainwave.com/assets/image-4-Cbi5cq1J.png"
|
||||
className="object-contain w-full h-full"
|
||||
width={630}
|
||||
height={750}
|
||||
alt="robot"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex absolute inset-0 flex-col items-start justify-end -mt-20 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%)]">
|
||||
Self Hostable
|
||||
</h4>
|
||||
<p className="font-normal tracking-tighter mb-[3rem] text-lg max-w-lg text-gray-400 ">
|
||||
Automatically enhance your photos using our AI app's
|
||||
photo editing feature. Try it now!
|
||||
</p>
|
||||
<a
|
||||
href="/components"
|
||||
className="mt-[-20px] inline-flex bg-glass-gradient rounded-xl text-center group items-center w-full justify-center bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-transparent border-white/10 border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10"
|
||||
>
|
||||
Get started
|
||||
<ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* <PhotoChatMessage //> */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.40) 40.92%, rgba(140, 121, 249, 0) 80.35%)",
|
||||
}}
|
||||
|
||||
className="overflow-hidden group relative py-4 rounded-3xl bg-glass-gradient lg:min-h-[30rem]">
|
||||
<div className="py-12 px-4 xl:px-8 relative">
|
||||
<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="body-2 mb-[2rem] text-gray-400 text-lg">
|
||||
The world’s most powerful AI photo and video art generation
|
||||
engine. What will you create?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden relative rounded-xl h-[20rem] md:h-[25rem]">
|
||||
<img
|
||||
src={
|
||||
// "/images/privacy.png"
|
||||
"https://www.limitless.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvault.a0431de1.webp&w=1920&q=75"
|
||||
// "https://www.authkit.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbackground.896d177e.png&w=1920&q=75"
|
||||
// "https://www.authkit.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbackground.b48df3d6.png&w=828&q=75"
|
||||
}
|
||||
className="object-cover w-full h-full group-hover:rotate-3 transform duration-500 transition-all ease-linear"
|
||||
width={520}
|
||||
height={400}
|
||||
alt="Scary robot"
|
||||
/>
|
||||
|
||||
{/* <VideoBar /> */}
|
||||
</div>
|
||||
<img
|
||||
src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
|
||||
className="absolute h-[400px] inset-x-0 bottom-0 z-2 opacity-50 rotate-180"
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-0 h-full"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(232, 121, 249, 0.26) 40.92%, rgba(204, 171, 238, 0) 70.35%)",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* <Gradient opacity={20} /> */}
|
||||
</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 bg-page-gradient mt-10 overflow-hidden relative items-center p-8 mb-5 rounded-3xl border lg:p-20 z-1 h-[30rem] border-white/20 xl:h-[28rem]">
|
||||
<img
|
||||
src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
|
||||
className="absolute top-0 right-0 z-2 opacity-100"
|
||||
/>
|
||||
{/* <img
|
||||
src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
|
||||
className="absolute top-0 right-0 z-2 opacity-100"
|
||||
/> */}
|
||||
<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 lg:mt-20 scale-150 border-r-2 border-r-white/5"
|
||||
width={800}
|
||||
alt="Github"
|
||||
height={730}
|
||||
src={"/images/github.webp"}
|
||||
/>
|
||||
{/* <div className="absolute rop-0 left-0 bg-black/20"></div> */}
|
||||
</div>
|
||||
{/* <Gradient /> */}
|
||||
|
||||
<div className="relative ml-auto z-1">
|
||||
<h4 className="mb-4 md:text-3xl lg:text-5xl ">
|
||||
Proudly <br /> OpenSource
|
||||
</h4>
|
||||
<p className="body-2 mb-[3rem] text-n-3">
|
||||
Supermemory unlocks the potential of AI-powered applications
|
||||
</p>
|
||||
<a
|
||||
href="/components"
|
||||
className="mt-[-20px] inline-flex bg-glass-gradient rounded-xl text-center group items-center w-full justify-center bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-transparent border-white/10 border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10"
|
||||
>
|
||||
Get The Github
|
||||
<ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Gradient />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
const brainwaveServices = ["AI first", "Self host", "Privacy first"];
|
||||
|
||||
const brainwaveServicesIcons = [
|
||||
"https://github.com/adrianhajdin/brainwave/blob/main/src/assets/recording-03.svg",
|
||||
"https://github.com/adrianhajdin/brainwave/blob/main/src/assets/recording-03.svg",
|
||||
"https://github.com/adrianhajdin/brainwave/blob/main/src/assets/disc-02.svg",
|
||||
"https://github.com/adrianhajdin/brainwave/blob/main/src/assets/chrome-cast.svg",
|
||||
"https://github.com/adrianhajdin/brainwave/blob/main/src/assets/sliders-04.svg",
|
||||
];
|
||||
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;
|
||||
86
apps/web/app/(landing)/Headers/Navbar.tsx
Normal file
86
apps/web/app/(landing)/Headers/Navbar.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
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 h-fit opacity-50 mr-4">
|
||||
<Image src={Logo} alt="Supermemory logo" width={40} height={40} />
|
||||
</Link>
|
||||
|
||||
<Tab setPosition={setPosition}>Home</Tab>
|
||||
<Tab setPosition={setPosition}>Pricing</Tab>
|
||||
<Tab setPosition={setPosition}>Features</Tab>
|
||||
<Tab setPosition={setPosition}>Docs</Tab>
|
||||
<Tab setPosition={setPosition}>Blog</Tab>
|
||||
|
||||
<button className="group ml-3 group inline-flex w-full bg-page-gradient justify-start items-start gap-x-2 border border-white/30 hover:border-zinc-600 hover:bg-transparent/10 hover:text-zinc-100 duration-200 sm:w-auto py-3 px-5 rounded-3xl text-md font-geistSans">
|
||||
Join waitlist
|
||||
<ArrowUpRight className="w-5 h-5 inline-flex justify-center items-center group-hover:-translate-y-1 transition-transform duration-400"/>
|
||||
</button>
|
||||
|
||||
<Cursor position={position} />
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
// @ts-ignore
|
||||
const Tab = ({ children, setPosition }) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
return (
|
||||
<li
|
||||
ref={ref}
|
||||
onMouseEnter={() => {
|
||||
if (!ref?.current) return;
|
||||
// @ts-ignore
|
||||
const { width } = ref.current.getBoundingClientRect();
|
||||
|
||||
setPosition({
|
||||
// @ts-ignore
|
||||
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-page-gradient bg-white/20 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,29 +23,34 @@ 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="mt-24 flex max-w-3xl flex-col items-center justify-center gap-10 md:mt-48">
|
||||
<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
|
||||
Build your own second brain{" "}
|
||||
<span className="bg-gradient-to-r from-zinc-300 to-blue-200 bg-clip-text text-transparent">
|
||||
with supermemory and bring it at scale
|
||||
</span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
{...{
|
||||
...slap,
|
||||
transition: { ...slap.transition, delay: 0.3 },
|
||||
}}
|
||||
className="text-soft-foreground-text text-center"
|
||||
className="text-soft-foreground-text text-lg text-center"
|
||||
>
|
||||
Bring saved information from all over the internet into one place
|
||||
where you can connect it, and ask AI about it
|
||||
</motion.p>
|
||||
<EmailInput />
|
||||
</section>
|
||||
<AnimatedLogoCloud />
|
||||
|
||||
<motion.img
|
||||
{...{
|
||||
...slap,
|
||||
|
|
@ -55,7 +61,7 @@ function Hero() {
|
|||
width={1512}
|
||||
height={1405}
|
||||
draggable="false"
|
||||
className="z-[-2] mt-28 h-full w-[80%] select-none"
|
||||
className="z-[20] mt-10 h-full w-[80%] select-none "
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
73
apps/web/app/(landing)/ImageSliders.tsx
Normal file
73
apps/web/app/(landing)/ImageSliders.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import {
|
||||
Github,
|
||||
Medium,
|
||||
Notion,
|
||||
Reddit,
|
||||
Twitter,
|
||||
} from "@repo/ui/components/icons";
|
||||
import Image from "next/image";
|
||||
const logos = [
|
||||
{
|
||||
name: "Larvel",
|
||||
url: <Github className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Nextjs",
|
||||
url: <Medium className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Prime",
|
||||
url: <Notion className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Trustpilot",
|
||||
url: <Reddit className="w-16 h-16 brightness-100 invert-1 mx-10" />,
|
||||
},
|
||||
{
|
||||
name: "Webflow",
|
||||
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-6">
|
||||
Well Integrated with six companies so far
|
||||
|
||||
|
||||
</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-6 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-10 justify-around 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
122
apps/web/app/(landing)/Pricing.tsx
Normal file
122
apps/web/app/(landing)/Pricing.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
import React from "react";
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
|
||||
export default function FUIPricingSectionWithBadge() {
|
||||
const plans = [
|
||||
{
|
||||
name: "Basic plan",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
price: 12,
|
||||
isMostPop: false,
|
||||
features: [
|
||||
"Curabitur faucibus",
|
||||
"massa ut pretium maximus",
|
||||
"Sed posuere nisi",
|
||||
"Pellentesque eu nibh et neque",
|
||||
"Suspendisse a leo",
|
||||
"Praesent quis venenatis ipsum",
|
||||
"Duis non diam vel tortor",
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Startup",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
price: 35,
|
||||
isMostPop: true,
|
||||
features: [
|
||||
"Curabitur faucibus",
|
||||
"massa ut pretium maximus",
|
||||
"Sed posuere nisi",
|
||||
"Pellentesque eu nibh et neque",
|
||||
"Suspendisse a leo",
|
||||
"Praesent quis venenatis ipsum",
|
||||
"Duis non diam vel tortor",
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Enterprise",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
price: 60,
|
||||
isMostPop: false,
|
||||
features: [
|
||||
"Curabitur faucibus",
|
||||
"massa ut pretium maximus",
|
||||
"Sed posuere nisi",
|
||||
"Pellentesque eu nibh et neque",
|
||||
"Suspendisse a leo",
|
||||
"Praesent quis venenatis ipsum",
|
||||
"Duis non diam vel tortor",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-14 relative w-full">
|
||||
<div className="absolute top-0 z-[0] h-screen w-screen bg-page-gradient bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
|
||||
<div className="relative max-w-screen-xl mx-auto px-4 text-gray-300 md:px-8 min-h-screen">
|
||||
<div className="relative max-w-xl mx-auto sm:text-center">
|
||||
<h3 className="text-gray-300 font-geist tracking-tighter text-3xl font-semibold sm:text-5xl">
|
||||
Pricing for all sizes
|
||||
</h3>
|
||||
<div className="mt-3 max-w-xl text-white/40 font-geist font-normal">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
|
||||
efficitur consequat nunc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-16 justify-center gap-8 sm:grid sm:grid-cols-2 sm:space-y-0 lg:grid-cols-3">
|
||||
{plans.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`relative flex-1 flex items-stretch flex-col rounded-xl border-2 mt-6 sm:mt-0 transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] ${
|
||||
item.isMostPop ? "mt-10" : ""
|
||||
}`}
|
||||
>
|
||||
{item.isMostPop ? (
|
||||
<span className="w-32 absolute -top-5 left-0 right-0 mx-auto px-3 py-2 rounded-full border shadow-md bg-slate-950/50 text-white/90 bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))] animate-background-shine text-center text-gray-700 text-sm font-semibold">
|
||||
Most popular
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div className={cn("animate-background-shine p-8 space-y-4 border-b border-b-white/20" , item.name === 'Enterprise' ? "dark:bg-[linear-gradient(110deg,transparent,45%,#475569,55%,transparent)] bg-[length:200%_100%] transition-colors rounded-t-2xl" : "")}>
|
||||
<span className="text-slate-200 font-normal font-geist tracking-tight">{item.name}</span>
|
||||
<div className="text-gray-200 text-3xl font-semibold">
|
||||
${item.price}{" "}
|
||||
<span className="text-xl text-gray-300 font-normal">/mo</span>
|
||||
</div>
|
||||
<p>{item.desc}</p>
|
||||
<button className="w-full font-geist tracking-tighter text-center rounded-md text-md bg-gradient-to-br from-slate-400 to-slate-700 px-4 py-2 text-lg text-zinc-50 ring-2 ring-slate-500/50 ring-offset-2 ring-offset-zinc-950 transition-all hover:scale-[1.02] hover:ring-transparent active:scale-[0.98] active:ring-slate-500/70 flex items-center justify-center gap-2">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
<ul className="p-8 space-y-3">
|
||||
<li className="pb-2 text-gray-200 font-medium">
|
||||
<p>Features</p>
|
||||
</li>
|
||||
{item.features.map((featureItem, idx) => (
|
||||
<li key={idx} className="flex items-center gap-5">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5 text-slate-600"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
{featureItem}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -31,13 +31,18 @@ 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>
|
||||
<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-7xl"
|
||||
>
|
||||
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">
|
||||
|
|
|
|||
279
apps/web/app/(landing)/Showcase.tsx
Normal file
279
apps/web/app/(landing)/Showcase.tsx
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
|
||||
"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;
|
||||
}
|
||||
|
||||
const features: Array<Feature> = [
|
||||
{
|
||||
name: "Reporting",
|
||||
summary: "Stay on top of things with always up-to-date reporting features.",
|
||||
description:
|
||||
"We talked about reporting in the section above but we needed three items here, so mentioning it one more time for posterity.",
|
||||
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: "Inventory",
|
||||
summary:
|
||||
"Never lose track of what’s in stock with accurate inventory tracking.",
|
||||
description:
|
||||
"We don’t offer this as part of our software but that statement is inarguably true. Accurate inventory tracking would help you for sure.",
|
||||
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:
|
||||
"Organize all of your contacts, service providers, and invoices in one place.",
|
||||
description:
|
||||
"This also isn’t actually a feature, it’s just some friendly advice. We definitely recommend that you do this, you’ll feel really organized and professional.",
|
||||
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-slate-200 sm:-inset-x-6" />
|
||||
<div className="relative mx-auto w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-gray-200/5 ring-1 ring-slate-500/10">
|
||||
<img
|
||||
className="w-full"
|
||||
src={"/images/carousel-illustration-01.png"}
|
||||
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="secondary-features"
|
||||
aria-label="Features for simplifying everyday business tasks"
|
||||
className=" bg-page-gradient 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={
|
||||
"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75"
|
||||
}
|
||||
width={1000}
|
||||
height={1000}
|
||||
alt="back bg"
|
||||
/> */}
|
||||
<div className="mr-auto 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>{" "}
|
||||
simplify AI ingestions.
|
||||
</h2>
|
||||
<p className="mt-4 text-lg tracking-tight text-gray-100">
|
||||
Because you’d probably be a little confused if we suggested you
|
||||
complicate your everyday business tasks instead.
|
||||
</p>
|
||||
</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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,6 +7,9 @@ import Features from "./Features";
|
|||
import Footer from "./footer";
|
||||
import { auth } from "../helpers/server/auth";
|
||||
import { redirect } from "next/navigation";
|
||||
import FUIPricingSectionWithBadge from "./Pricing";
|
||||
import Services from "./Features/index";
|
||||
import { Showcases } from "./Showcase";
|
||||
|
||||
export const runtime = "edge";
|
||||
|
||||
|
|
@ -20,7 +23,7 @@ export default async function Home() {
|
|||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0">
|
||||
<main className="flex relative min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0 font-geistSans bg-hero-gradient">
|
||||
<Navbar />
|
||||
|
||||
{/* Background gradients */}
|
||||
|
|
@ -35,7 +38,7 @@ export default async function Home() {
|
|||
{/* 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]"
|
||||
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>
|
||||
|
|
@ -47,10 +50,12 @@ export default async function Home() {
|
|||
|
||||
{/* Hero section */}
|
||||
<Hero />
|
||||
<Showcases />
|
||||
<Services />
|
||||
|
||||
{/* Features section */}
|
||||
<Features />
|
||||
|
||||
|
||||
<RotatingIcons />
|
||||
|
||||
<Cta />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@ 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";
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const runtime = "edge";
|
||||
|
|
@ -61,12 +64,22 @@ export default function RootLayout({
|
|||
children: React.ReactNode;
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" className="overflow-x-hidden" suppressHydrationWarning>
|
||||
{/* <head>
|
||||
<ThemeScript />
|
||||
</head> */}
|
||||
<div className="absolute top-0 z-10 min-h-screen w-screen bg-inherit bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
|
||||
<BackgroundPlus />
|
||||
{/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
|
||||
<body className={`${inter.className} dark`}>{children}</body>
|
||||
<body
|
||||
className={cn(
|
||||
`${inter.className} dark`,
|
||||
GeistMono.variable,
|
||||
GeistSans.variable
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,4 +77,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`);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,14 @@ import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
transpilePackages: ["@repo/ui"],
|
||||
// images: {
|
||||
// remotePatterns: [
|
||||
// {
|
||||
// protocol: "https",
|
||||
// hostname: "github.com",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
};
|
||||
export default MillionLint.next({
|
||||
rsc: true,
|
||||
|
|
|
|||
|
|
@ -16,7 +16,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",
|
||||
"million": "^3.1.6",
|
||||
"next": "^14.1.1",
|
||||
|
|
|
|||
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 |
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 |
|
|
@ -1 +1,2 @@
|
|||
module.exports = require("@repo/tailwind-config/tailwind.config");
|
||||
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
"@cloudflare/next-on-pages": "1",
|
||||
"@cloudflare/workers-types": "^4.20240512.0",
|
||||
"@repo/eslint-config": "*",
|
||||
"@repo/shared-types": "*",
|
||||
"@repo/tailwind-config": "*",
|
||||
"@repo/typescript-config": "*",
|
||||
"@repo/ui": "*",
|
||||
|
|
@ -65,6 +64,7 @@
|
|||
"compromise": "^14.13.0",
|
||||
"drizzle-orm": "^0.30.10",
|
||||
"framer-motion": "^11.2.6",
|
||||
"geist": "^1.3.0",
|
||||
"lucide-react": "^0.379.0",
|
||||
"next-app-theme": "^0.1.10",
|
||||
"next-auth": "^5.0.0-beta.18",
|
||||
|
|
|
|||
|
|
@ -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,22 @@ const config = {
|
|||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
"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 +84,24 @@ 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",
|
||||
},
|
||||
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%)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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={{
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue