1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
"use client";
import React from "react";
import { motion } from "framer-motion";
import { Twitter } from "@repo/ui/components/icons";
import EmailInput from "./EmailInput";
import LinkArrow from "./linkArrow";
import { TwitterBorder } from "./twitterLink";
import AnimatedLogoCloud from "./ImageSliders";
import { ArrowUpRight } from "lucide-react";
import Link from "next/link";
const slap = {
initial: {
opacity: 0,
scale: 1.1,
},
whileInView: { opacity: 1, scale: 1 },
transition: {
duration: 0.5,
ease: "easeInOut",
},
viewport: { once: true },
};
function Hero() {
return (
<>
<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 mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter sm:text-5xl text-transparent md:text-6xl lg:text-7xl"
>
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-lg text-center text-soft-foreground-text"
>
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>
<Link
href="/signin"
className="inline-flex text-lg gap-x-2 mt-2 backdrop-blur-md text-white justify-center items-center py-3 px-5 w-fit rounded-3xl border duration-200 group bg-page-gradient border-white/30 text-md font-geistSans hover:border-zinc-600 hover:bg-transparent/10 hover:text-zinc-100"
>
It's free. Sign up now
<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>
<a
href="https://www.producthunt.com/posts/supermemory?embed=true&utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-supermemory"
target="_blank"
>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=472686&theme=dark&period=daily"
alt="Supermemory - AI second brain for all your saved stuff | Product Hunt"
style={{ width: "250px", height: "54px" }}
width="250"
height="54"
/>
</a>
</section>
<AnimatedLogoCloud />
<div className="relative z-50">
<motion.img
{...{
...slap,
transition: { ...slap.transition, delay: 0.35 },
}}
src="/images/landing-hero.jpeg"
alt="Landing page background"
width={1512}
height={1405}
draggable="false"
className="z-40 md:mt-[-40px] hidden sm:block h-full max-w-[70vw] mx-auto md:w-full select-none px-5 !rounded-2xl"
style={{
borderRadius: "20px",
}}
/>
<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>
</>
);
}
export default Hero;
|