scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-10-06 02:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feet: auth page revamp

Browse source
This commit is contained in:
Kinfe123 2024-06-23 11:13:20 +03:00
parent 2fa1aa8b3c
commit e60030c2bf
4 changed files with 28 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
apps/web/app/(auth)/signin/page.tsx
View file

@ -8,8 +8,8 @@ export const runtime = "edge";
async function Signin() {
return (
<div className="flex items-center justify-between min-h-screen">
<div className="relative w-1/2 flex items-center 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 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}
@ -18,9 +18,19 @@ async function Signin() {
/>
<span className="text-xl">SuperMemory.ai</span>
</div>
<div className="absolute inset-0 opacity-10 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-25 "
src={
"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75"
}
width={1000}
height={1000}
alt="back bg"
/>
<div>
<h1 className="text-5xl text-foreground mb-8">
<div className="pl-4">
<h1 className="text-5xl text-foreground mb-8 tracking-tighter">
Hello, <span className="text-white">human</span>{" "}
</h1>
<p className="text-white mb-8 text-lg">
@ -28,7 +38,7 @@ async function Signin() {
</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`}
className={`relative cursor-pointer transition-width z-20 rounded-2xl bg-page-gradient p-[0.7px] duration-300 ease-in-out fit dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]`}
>
<form
action={async () => {
@ -40,10 +50,10 @@ async function Signin() {
>
<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`}
className={`relative text-white transition-width flex gap-5 justify-center w-full items-center rounded-2xl bg-page-gradient px-6 py-4 outline-none duration-300 focus:outline-none `}
>
<Google />
<span className="relative w-full self-start">
<span className="relative w-full">
Continue with Google
</span>
</button>
@ -64,16 +74,16 @@ async function Signin() {
</div>
</div>
</div>
<div className="w-1/2 flex flex-col items-center justify-center min-h-screen">
<span className="text-3xl leading-relaxed italic mb-8">
<div className="hidden w-0 lg:flex lg:w-1/2 flex-col items-center justify-center min-h-screen bg-page-gradient overflow-hidden">
<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 px-10 md:px-14 lg:max-w-none"
src={"/images/memory.svg"}
width={700}
height={520}
alt="Carousel 01"

5
apps/web/app/(landing)/page.tsx
View file

@ -11,6 +11,7 @@ import FUIPricingSectionWithBadge from "./Pricing";
import Services from "./Features/index";
import { Showcases } from "./Showcase";
import { cn } from "@repo/ui/lib/utils";
import BackgroundPlus from "./GridPatterns/PlusGrid";
export const runtime = "edge";
@ -25,6 +26,10 @@ export default async function Home() {
return (
<main className="flex overflow-x-hidden relative flex-col items-center px-2 min-h-screen md:px-0 font-geistSans bg-hero-gradient">
<BackgroundPlus />
<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>
<Navbar />
{/* Background gradients */}

2
apps/web/app/layout.tsx
View file

@ -68,8 +68,6 @@ export default function RootLayout({
{/* <head>
<ThemeScript />
</head> */}
<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>
<BackgroundPlus />
{/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
<body
className={cn(

4
packages/ui/components/icons.tsx
View file

@ -277,8 +277,8 @@ export const X = (props: SVGProps<SVGSVGElement>) => (
export const Google = (props: SVGProps<SVGSVGElement>) => (
<svg
width="1em"
height="1em"
width="1.3em"
height="1.3em"
viewBox="0 0 256 262"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"