Skip to content

Commit 3c1432a

Browse files
fluidchunkyfluidchunky
authored
Merge pull request #399 from carmelcity/preview
added a simpler home
2 parents 5bfd87f + ce55a7f commit 3c1432a

File tree

3 files changed

+177
-49
lines changed

3 files changed

+177
-49
lines changed

‎components/ui/wavy-background.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
"use client";
2+
import { cn } from "~/lib/utils";
3+
import React, { useEffect, useRef, useState } from "react";
4+
import { createNoise3D } from "simplex-noise";
5+
6+
export const WavyBackground = ({
7+
children,
8+
className,
9+
containerClassName,
10+
colors,
11+
waveWidth,
12+
backgroundFill,
13+
blur = 10,
14+
speed = "fast",
15+
waveOpacity = 0.5,
16+
...props
17+
}: {
18+
children?: any;
19+
className?: string;
20+
containerClassName?: string;
21+
colors?: string[];
22+
waveWidth?: number;
23+
backgroundFill?: string;
24+
blur?: number;
25+
speed?: "slow" | "fast";
26+
waveOpacity?: number;
27+
[key: string]: any;
28+
}) => {
29+
const noise = createNoise3D();
30+
let w: number,
31+
h: number,
32+
nt: number,
33+
i: number,
34+
x: number,
35+
ctx: any,
36+
canvas: any;
37+
const canvasRef = useRef<HTMLCanvasElement>(null);
38+
const getSpeed = () => {
39+
switch (speed) {
40+
case "slow":
41+
return 0.001;
42+
case "fast":
43+
return 0.002;
44+
default:
45+
return 0.001;
46+
}
47+
};
48+
49+
const init = () => {
50+
canvas = canvasRef.current;
51+
ctx = canvas.getContext("2d");
52+
w = ctx.canvas.width = window.innerWidth;
53+
h = ctx.canvas.height = window.innerHeight;
54+
ctx.filter = `blur(${blur}px)`;
55+
nt = 0;
56+
window.onresize = function () {
57+
w = ctx.canvas.width = window.innerWidth;
58+
h = ctx.canvas.height = window.innerHeight;
59+
ctx.filter = `blur(${blur}px)`;
60+
};
61+
render();
62+
};
63+
64+
const waveColors = colors ?? [
65+
"#38bdf8",
66+
"#818cf8",
67+
"#c084fc",
68+
"#e879f9",
69+
"#22d3ee",
70+
];
71+
const drawWave = (n: number) => {
72+
nt += getSpeed();
73+
for (i = 0; i < n; i++) {
74+
ctx.beginPath();
75+
ctx.lineWidth = waveWidth || 50;
76+
ctx.strokeStyle = waveColors[i % waveColors.length];
77+
for (x = 0; x < w; x += 5) {
78+
var y = noise(x / 800, 0.3 * i, nt) * 100;
79+
ctx.lineTo(x, y + h * 0.5); // adjust for height, currently at 50% of the container
80+
}
81+
ctx.stroke();
82+
ctx.closePath();
83+
}
84+
};
85+
86+
let animationId: number;
87+
const render = () => {
88+
ctx.fillStyle = backgroundFill || "black";
89+
ctx.globalAlpha = waveOpacity || 0.5;
90+
ctx.fillRect(0, 0, w, h);
91+
drawWave(5);
92+
animationId = requestAnimationFrame(render);
93+
};
94+
95+
useEffect(() => {
96+
init();
97+
return () => {
98+
cancelAnimationFrame(animationId);
99+
};
100+
}, []);
101+
102+
const [isSafari, setIsSafari] = useState(false);
103+
useEffect(() => {
104+
// I'm sorry but i have got to support it on safari.
105+
setIsSafari(
106+
typeof window !== "undefined" &&
107+
navigator.userAgent.includes("Safari") &&
108+
!navigator.userAgent.includes("Chrome")
109+
);
110+
}, []);
111+
112+
return (
113+
<div
114+
className={cn(
115+
"h-screen flex flex-col items-center justify-center",
116+
containerClassName
117+
)}
118+
>
119+
<canvas
120+
className="absolute inset-0 z-0"
121+
ref={canvasRef}
122+
id="canvas"
123+
style={{
124+
...(isSafari ? { filter: `blur(${blur}px)` } : {}),
125+
}}
126+
></canvas>
127+
<div className={cn("relative z-10", className)} {...props}>
128+
{children}
129+
</div>
130+
</div>
131+
);
132+
};

‎screens/home/MainHomeScreen.tsx‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ import { ChevronRight } from "lucide-react";
2929
import { cn } from "~/lib/utils";
3030
// import { Button } from "@/components/ui/button";
3131
import { BoxReveal } from "~/components/magicui/box-reveal";
32-
32+
import { WavyBackground } from "~/components/ui/wavy-background";
33+
3334
const Header = () => {
3435
return <div className={`${readexPro.className} text-left flex flex-row mb-4 border-b border-primary/20 w-full lg:mt-0 mt-20`}>
3536
<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'>
@@ -67,12 +68,12 @@ export const Container = ({ children, noHeader }: any) => {
6768
)
6869
}
6970

70-
const EmptyHome = () => {
71-
return <Container noHeader>
72-
<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] ">
71+
const TopIntro = () => {
72+
return (
73+
<div className="group bg-black/80 relative mx-auto 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] ">
7374
<span
7475
className={cn(
75-
"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]",
76+
"absolute inset-0 block h-full w-full animate-gradient rounded-[inherit] bg-gradient-to-r from-[#053D36]/50 via-[#00796B]/50 to-[#00ACC1]/50 bg-[length:300%_100%] p-[1px]",
7677
)}
7778
style={{
7879
WebkitMask:
@@ -84,50 +85,47 @@ const EmptyHome = () => {
8485
}}
8586
/>
8687
<AnimatedGradientText className="text-sm font-medium">
87-
Welcome to Carmel City
88+
Browse Carmels
8889
</AnimatedGradientText>
89-
</div>
90-
<div className="w-full flex flex-col justify-start items-center mt-32 lg:mt-8 bg-black/0 z-50">
91-
<div className="h-[12rem] flex items-center justify-center w-full">
92-
<TextHoverEffect text="CARMEL" />
93-
</div>
94-
95-
<div className=" items-center justify-center align-center flex flex-col overflow-hidden pt-8">
96-
<BoxReveal boxColor={"#0097A7"} duration={0.5}>
97-
<h2 className="mt-[.5rem] text-[1rem]">
98-
People are debating about
99-
</h2>
100-
</BoxReveal>
101-
102-
<BoxReveal boxColor={"#0097A7"} duration={0.5}>
103-
<h1 className="text-3xl font-semibold">
104-
how to build more human world
105-
</h1>
106-
</BoxReveal>
107-
108-
<BoxReveal boxColor={"#0097A7"} duration={0.5}>
109-
<Link href={'/carmels'} key={'reg1'}>
110-
<button
111-
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`}>
112-
Join the conversation
113-
</button>
114-
</Link>
115-
</BoxReveal>
11690

117-
<BoxReveal boxColor={"#0097A7"} duration={0.5}>
118-
<p className="text-lg font-semibold mt-12" >
119-
<Link href={'/store'} key={'reg1'} className='mr-1'>
120-
Check out what the community is building
121-
</Link>
122-
</p>
123-
</BoxReveal>
91+
<hr className="mx-2 h-4 w-px shrink-0 bg-neutral-500" />
92+
<span className='text-sm text-white/70'>
93+
Community debates
94+
</span>
95+
<ChevronRight
96+
className="ml-1 size-4 stroke-neutral-500 transition-transform
97+
duration-300 ease-in-out group-hover:translate-x-0.5"
98+
/>
12499
</div>
100+
);
101+
}
125102

126-
127-
128-
129-
</div>
130-
</Container>
103+
const EmptyHome = () => {
104+
return <WavyBackground className="w-full black/10 p-4 lg:p-24" backgroundFill='#0A0F12' colors={["#053D36", "#00796B", "#00ACC1", "#4CAF50"]}>
105+
<div className='w-full flex flex-col items-center'>
106+
<Link href={'/carmels'} key={'reg2'}>
107+
<TopIntro/>
108+
</Link>
109+
<h1 className="text-3xl lg:text-6xl text-white font-bold inter-var text-center mt-4">
110+
How would you build a more human world?
111+
</h1>
112+
{/* <h2 className="mt-4 text-white font-normal text-xl lg:text-2xl inter-var text-center">
113+
Please are currently debating on Carmels how to build a more human world.
114+
</h2> */}
115+
<Link href={'/carmels'} key={'reg1'}>
116+
<button
117+
className={`${readex_pro.className} w-full lg:mt-16 mt-8 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`}>
118+
Join the conversation
119+
</button>
120+
</Link>
121+
<Link href={'/store'} key={'reg2'}>
122+
<button
123+
className={`${readex_pro.className} w-full mt-4 text-nowrap text-sm shrink-0 hover:opacity-80 font-medium text-primary px-2 py-3 `}>
124+
See what the community is already building
125+
</button>
126+
</Link>
127+
</div>
128+
</WavyBackground>
131129
}
132130

133131
const onItemPress = (element: any, router: any) => {

‎styles/globals.css‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -287,8 +287,6 @@ blockquote.twitter-tweet a:focus {
287287
margin-top: 1rem;
288288
}
289289

290-
291-
292290
@layer base {
293291
:root {
294292
--background: 0 0% 100%;
@@ -297,7 +295,7 @@ blockquote.twitter-tweet a:focus {
297295
--card-foreground: 0 0% 3.9%;
298296
--popover: 0 0% 100%;
299297
--popover-foreground: 0 0% 3.9%;
300-
--primary: 0 0% 9%;
298+
--primary: 0 73% 83%;
301299
--primary-foreground: 0 0% 98%;
302300
--secondary: 0 0% 96.1%;
303301
--secondary-foreground: 0 0% 9%;
@@ -324,7 +322,7 @@ blockquote.twitter-tweet a:focus {
324322
--card-foreground: 0 0% 98%;
325323
--popover: 0 0% 3.9%;
326324
--popover-foreground: 0 0% 98%;
327-
--primary: 0 0% 98%;
325+
--primary: 187 92.4% 69%;
328326
--primary-foreground: 0 0% 9%;
329327
--secondary: 0 0% 14.9%;
330328
--secondary-foreground: 0 0% 98%;

0 commit comments

Comments
 (0)