Skip to content

added a simpler home #393

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fluidchunky merged 1 commit into from
Apr 2, 2025
Merged

added a simpler home #393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 132 additions & 0 deletions components/ui/wavy-background.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
"use client";
import { cn } from "~/lib/utils";
import React, { useEffect, useRef, useState } from "react";
import { createNoise3D } from "simplex-noise";

export const WavyBackground = ({
children,
className,
containerClassName,
colors,
waveWidth,
backgroundFill,
blur = 10,
speed = "fast",
waveOpacity = 0.5,
...props
}: {
children?: any;
className?: string;
containerClassName?: string;
colors?: string[];
waveWidth?: number;
backgroundFill?: string;
blur?: number;
speed?: "slow" | "fast";
waveOpacity?: number;
[key: string]: any;
}) => {
const noise = createNoise3D();
let w: number,
h: number,
nt: number,
i: number,
x: number,
ctx: any,
canvas: any;
const canvasRef = useRef<HTMLCanvasElement>(null);
const getSpeed = () => {
switch (speed) {
case "slow":
return 0.001;
case "fast":
return 0.002;
default:
return 0.001;
}
};

const init = () => {
canvas = canvasRef.current;
ctx = canvas.getContext("2d");
w = ctx.canvas.width = window.innerWidth;
h = ctx.canvas.height = window.innerHeight;
ctx.filter = `blur(${blur}px)`;
nt = 0;
window.onresize = function () {
w = ctx.canvas.width = window.innerWidth;
h = ctx.canvas.height = window.innerHeight;
ctx.filter = `blur(${blur}px)`;
};
render();
};

const waveColors = colors ?? [
"#38bdf8",
"#818cf8",
"#c084fc",
"#e879f9",
"#22d3ee",
];
const drawWave = (n: number) => {
nt += getSpeed();
for (i = 0; i < n; i++) {
ctx.beginPath();
ctx.lineWidth = waveWidth || 50;
ctx.strokeStyle = waveColors[i % waveColors.length];
for (x = 0; x < w; x += 5) {
var y = noise(x / 800, 0.3 * i, nt) * 100;
ctx.lineTo(x, y + h * 0.5); // adjust for height, currently at 50% of the container
}
ctx.stroke();
ctx.closePath();
}
};

let animationId: number;
const render = () => {
ctx.fillStyle = backgroundFill || "black";
ctx.globalAlpha = waveOpacity || 0.5;
ctx.fillRect(0, 0, w, h);
drawWave(5);
animationId = requestAnimationFrame(render);
};

useEffect(() => {
init();
return () => {
cancelAnimationFrame(animationId);
};
}, []);

const [isSafari, setIsSafari] = useState(false);
useEffect(() => {
// I'm sorry but i have got to support it on safari.
setIsSafari(
typeof window !== "undefined" &&
navigator.userAgent.includes("Safari") &&
!navigator.userAgent.includes("Chrome")
);
}, []);

return (
<div
className={cn(
"h-screen flex flex-col items-center justify-center",
containerClassName
)}
>
<canvas
className="absolute inset-0 z-0"
ref={canvasRef}
id="canvas"
style={{
...(isSafari ? { filter: `blur(${blur}px)` } : {}),
}}
></canvas>
<div className={cn("relative z-10", className)} {...props}>
{children}
</div>
</div>
);
};
85 changes: 24 additions & 61 deletions screens/home/MainHomeScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ import { ChevronRight } from "lucide-react";
import { cn } from "~/lib/utils";
// import { Button } from "@/components/ui/button";
import { BoxReveal } from "~/components/magicui/box-reveal";

import { WavyBackground } from "~/components/ui/wavy-background";

const Header = () => {
return <div className={`${readexPro.className} text-left flex flex-row mb-4 border-b border-primary/20 w-full lg:mt-0 mt-20`}>
<span className='font-normal text-transparent bg-clip-text bg-gradient-to-r from-cyan to-light-green text-2xl flex flex-row items-center w-full'>
Expand Down Expand Up @@ -68,66 +69,28 @@ export const Container = ({ children, noHeader }: any) => {
}

const EmptyHome = () => {
return <Container noHeader>
<div className="group mt-12 relative mx-auto bg-black/50 flex items-center justify-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f] ">
<span
className={cn(
"absolute inset-0 block h-full w-full animate-gradient rounded-[inherit] bg-gradient-to-r from-cyan/50 via-green/50 to-[#ffaa40]/50 bg-[length:300%_100%] p-[1px]",
)}
style={{
WebkitMask:
"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
WebkitMaskComposite: "destination-out",
mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
maskComposite: "subtract",
WebkitClipPath: "padding-box",
}}
/>
<AnimatedGradientText className="text-sm font-medium">
Welcome to Carmel City
</AnimatedGradientText>
</div>
<div className="w-full flex flex-col justify-start items-center mt-32 lg:mt-8 bg-black/0 z-50">
<div className="h-[12rem] flex items-center justify-center w-full">
<TextHoverEffect text="CARMEL" />
</div>

<div className=" items-center justify-center align-center flex flex-col overflow-hidden pt-8">
<BoxReveal boxColor={"#0097A7"} duration={0.5}>
<h2 className="mt-[.5rem] text-[1rem]">
People are debating about
</h2>
</BoxReveal>

<BoxReveal boxColor={"#0097A7"} duration={0.5}>
<h1 className="text-3xl font-semibold">
how to build more human world
</h1>
</BoxReveal>

<BoxReveal boxColor={"#0097A7"} duration={0.5}>
<Link href={'/carmels'} key={'reg1'}>
<button
className={`${readex_pro.className} mt-4 text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 py-3 shadow-early-access-button shrink-0 rounded-md`}>
Join the conversation
</button>
</Link>
</BoxReveal>

<BoxReveal boxColor={"#0097A7"} duration={0.5}>
<p className="text-lg font-semibold mt-12" >
<Link href={'/store'} key={'reg1'} className='mr-1'>
Check out what the community is building
</Link>
</p>
</BoxReveal>
</div>




</div>
</Container>
return <WavyBackground className="w-full black/10 p-4 lg:p-24" backgroundFill='#0A0F12'>
<div className='w-full flex flex-col items-center'>
<h1 className="text-3xl lg:text-5xl text-white font-bold inter-var text-center">
How do we build a more human world?
</h1>
<h2 className="mt-4 text-white font-normal text-xl lg:text-2xl inter-var text-center">
See what other Carmel members in debating how we build a more human world.
</h2>
<Link href={'/carmels'} key={'reg1'}>
<button
className={`${readex_pro.className} w-full mt-20 text-nowrap shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 py-3 shadow-early-access-button shrink-0 rounded-md`}>
Join the conversation
</button>
</Link>
<Link href={'/store'} key={'reg2'}>
<button
className={`${readex_pro.className} w-full mt-2 text-nowrap text-sm shrink-0 hover:opacity-80 font-medium text-primary px-2 py-3 `}>
See what the community is already building
</button>
</Link>
</div>
</WavyBackground>
}

const onItemPress = (element: any, router: any) => {
Expand Down
6 changes: 2 additions & 4 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,8 +287,6 @@ blockquote.twitter-tweet a:focus {
margin-top: 1rem;
}



@layer base {
:root {
--background: 0 0% 100%;
Expand All @@ -297,7 +295,7 @@ blockquote.twitter-tweet a:focus {
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary: 0 73% 83%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
Expand All @@ -324,7 +322,7 @@ blockquote.twitter-tweet a:focus {
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary: 187 92.4% 69%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
Expand Down