landing page fixes

This commit is contained in:
Dhravya 2024-07-01 22:25:01 -05:00
parent 7d6d81574a
commit 5feaa3ba8b
5 changed files with 39 additions and 17 deletions

View file

@ -1,6 +1,7 @@
import React from "react";
import EmailInput from "./EmailInput";
import { ChevronRight } from "lucide-react";
import { ArrowUpRight, ChevronRight } from "lucide-react";
import Link from "next/link";
function Cta() {
return (
@ -33,7 +34,16 @@ function Cta() {
Sign up for the waitlist and be the first to try Supermemory
</p>
<div className="w-full lg:w-3/4 mx-auto">
<EmailInput />
<Link
href="/signin"
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 text-white"
>
Sign in
<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>
</div>
</section>
);

View file

@ -58,10 +58,10 @@ const SlideTabs = () => {
</Tab>
<Link
href="/signin"
href="https://git.new/memory"
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"
>
Sign in
Github
<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" />

View file

@ -6,6 +6,8 @@ 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: {
@ -49,7 +51,16 @@ function Hero() {
utilizing saved information with powerful tools like a search engine,
writing assistant, and canvas.
</motion.p>
<EmailInput />
<Link
href="/signin"
className="inline-flex text-lg gap-x-2 mt-2 backdrop-blur-md text-white 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"
>
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>
</section>
<AnimatedLogoCloud />

View file

@ -162,7 +162,9 @@ const logos = [
},
{
name: "Reddit",
url: <Reddit className="w-16 h-16 brightness-100 invert-1 mx-10" />,
url: (
<Reddit className="w-16 h-16 brightness-100 invert-1 mx-10 grayscale" />
),
},
{
name: "Twitter",
@ -172,7 +174,7 @@ const logos = [
const AnimatedLogoCloud = () => {
return (
<div className="py-2 max-w-4xl">
<div className="py-2 max-w-4xl scale-75">
<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>

View file

@ -32,17 +32,16 @@ const RotatingIcons: React.FC = () => {
return (
<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">
{...{
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 data from{" "}
<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>
</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">