From c541089866c0e858e33246532adb8fd59fdbd405 Mon Sep 17 00:00:00 2001 From: Kinfe123 Date: Sat, 22 Jun 2024 01:54:50 +0300 Subject: [PATCH] fix: revamp --- .../(landing)/CardPatterns/AnimatedGrid.tsx | 149 ++++++++++++++++++ apps/web/app/(landing)/CardPatterns/Glare.tsx | 2 +- apps/web/app/(landing)/Cta.tsx | 37 +++-- apps/web/app/(landing)/EmailInput.tsx | 4 +- apps/web/app/(landing)/Features.tsx | 23 ++- apps/web/app/(landing)/Features/index.tsx | 4 +- apps/web/app/(landing)/ImageSliders.tsx | 91 +++++++++-- apps/web/app/(landing)/RotatingIcons.tsx | 2 +- apps/web/app/(landing)/package.json | 5 - apps/web/app/(landing)/page.tsx | 9 +- 10 files changed, 277 insertions(+), 49 deletions(-) create mode 100644 apps/web/app/(landing)/CardPatterns/AnimatedGrid.tsx delete mode 100644 apps/web/app/(landing)/package.json diff --git a/apps/web/app/(landing)/CardPatterns/AnimatedGrid.tsx b/apps/web/app/(landing)/CardPatterns/AnimatedGrid.tsx new file mode 100644 index 00000000..31f9e52c --- /dev/null +++ b/apps/web/app/(landing)/CardPatterns/AnimatedGrid.tsx @@ -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 ( + + ); +} + +export default GridPattern; diff --git a/apps/web/app/(landing)/CardPatterns/Glare.tsx b/apps/web/app/(landing)/CardPatterns/Glare.tsx index 8fefb309..53550ecc 100644 --- a/apps/web/app/(landing)/CardPatterns/Glare.tsx +++ b/apps/web/app/(landing)/CardPatterns/Glare.tsx @@ -130,7 +130,7 @@ export const GlareCard = ({
diff --git a/apps/web/app/(landing)/Cta.tsx b/apps/web/app/(landing)/Cta.tsx index 79881055..128581e8 100644 --- a/apps/web/app/(landing)/Cta.tsx +++ b/apps/web/app/(landing)/Cta.tsx @@ -1,14 +1,21 @@ import Image from "next/image"; import React from "react"; import EmailInput from "./EmailInput"; +import GridPattern from "./CardPatterns/AnimatedGrid"; +import { cn } from "@repo/ui/lib/utils"; +import { ChevronRight } from "lucide-react"; +import { Gradient } from "./Features/features"; +// import {Animated} function Cta() { return (
-
+
+ +
{/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
- Landing page background -

+ className="absolute z-[-2] hidden select-none rounded-3xl md:block lg:w-[80%] bg-page-gradient" + /> */} +

+

+ Launching July 1st, 2024 + +

+

+

Your bookmarks are collecting dust.

-
- Launching July 1st, 2024 -
-

- Time to change that.
Sign up for the waitlist and be the first to - try Supermemory +

+ Sign up for the waitlist and be the first to try Supermemory

- +
+ +
); } diff --git a/apps/web/app/(landing)/EmailInput.tsx b/apps/web/app/(landing)/EmailInput.tsx index c0514a46..658d5cf9 100644 --- a/apps/web/app/(landing)/EmailInput.tsx +++ b/apps/web/app/(landing)/EmailInput.tsx @@ -34,12 +34,12 @@ function EmailInput() { className="flex w-full items-center justify-center gap-2" >
(0); @@ -30,23 +31,25 @@ export default function Features() { return (
- -
-
+ /> */} +
+
+ {/*
*/} -
-
+
+

A Supermemory has all the memory saved for you

+

Supermemory offers all the vital building blocks you need to transform your idea into a great-looking startup.

-
+
+
+
diff --git a/apps/web/app/(landing)/Features/index.tsx b/apps/web/app/(landing)/Features/index.tsx index d9e88ffc..d4335ac7 100644 --- a/apps/web/app/(landing)/Features/index.tsx +++ b/apps/web/app/(landing)/Features/index.tsx @@ -1,7 +1,7 @@ import { CheckIcon, ChevronRight, GithubIcon } from "lucide-react"; import { Gradient } from "./features"; - import Generating from "./generating"; + const Services = () => { return (
@@ -127,7 +127,7 @@ const Services = () => { 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-10 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]" + 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]" > { + return ( + + ) +} +const NotionText = ({className}: {className?: string}) => { + return ( + + + + + + + + + + ) +} +const MediumText = ({className}: {className?:string}) => { + return ( + + + + + + ) +} const logos = [ { - name: "Larvel", - url: , + name: "Github", + url: , }, { - name: "Nextjs", - url: , + name: "Medium", + url: , }, { - name: "Prime", - url: , + name: "Notion", + url: , }, { - name: "Trustpilot", + name: "Reddit", url: , }, { - name: "Webflow", + name: "Twitter", url: , }, ]; @@ -32,7 +95,7 @@ const logos = [ const AnimatedLogoCloud = () => { return (
-

+

Well Integrated with six companies so far @@ -40,13 +103,13 @@ const AnimatedLogoCloud = () => { {/*

*/}
-
+
{ .map((index) => (
{logos.map((logo, key) => ( <>{logo.url} @@ -71,3 +134,5 @@ const AnimatedLogoCloud = () => { }; export default AnimatedLogoCloud; + + diff --git a/apps/web/app/(landing)/RotatingIcons.tsx b/apps/web/app/(landing)/RotatingIcons.tsx index 1b0cb4a3..18825fdf 100644 --- a/apps/web/app/(landing)/RotatingIcons.tsx +++ b/apps/web/app/(landing)/RotatingIcons.tsx @@ -35,7 +35,7 @@ const RotatingIcons: React.FC = () => { {...{ 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" + 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{" "} diff --git a/apps/web/app/(landing)/package.json b/apps/web/app/(landing)/package.json deleted file mode 100644 index a7fabf2f..00000000 --- a/apps/web/app/(landing)/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "scripts": { - "vercel-build": "next build" - } -} diff --git a/apps/web/app/(landing)/page.tsx b/apps/web/app/(landing)/page.tsx index cf460a65..5bb317da 100644 --- a/apps/web/app/(landing)/page.tsx +++ b/apps/web/app/(landing)/page.tsx @@ -10,6 +10,7 @@ import { redirect } from "next/navigation"; import FUIPricingSectionWithBadge from "./Pricing"; import Services from "./Features/index"; import { Showcases } from "./Showcase"; +import { cn } from "@repo/ui/lib/utils"; export const runtime = "edge"; @@ -23,11 +24,11 @@ export default async function Home() { } return ( -
+
{/* Background gradients */} -
+
- - + -
);