PulseApp/www
PulseApp/www
1
0
Fork 0
Code Issues Pull Requests 3 Actions Activity

Landing page changes
All checks were successful
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 1m41s
Details

Browse Source
This commit is contained in:
Braydon 2024-09-16 14:08:41 -04:00
parent 74f188ef6d
commit 243882d489
7 changed files with 60 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package.json
View File

@ -1,6 +1,11 @@
{ {
"name": "pulseapp", "name": "pulse-www",
"version": "0.1.0", "version": "1.0.0",
"author": {
"name": "Braydon (Rainnny)",
"url": "https://rainnny.club",
"email": "braydonrainnny@gmail.com"
},
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",

20
src/app/(pages)/layout.tsx
View File

@ -1,6 +1,6 @@
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "../style/globals.css"; import "@/app/styles/globals.css";
import { ReactElement, ReactNode } from "react"; import { ReactElement, ReactNode } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { NextFont } from "next/dist/compiled/@next/font"; import { NextFont } from "next/dist/compiled/@next/font";
@ -41,14 +41,16 @@ const RootLayout = ({
children: ReactNode; children: ReactNode;
}>): ReactElement => ( }>): ReactElement => (
<html lang="en"> <html lang="en">
<body className={cn(inter.className, "antialiased")}> <body className={cn(inter.className, "scroll-smooth antialiased")}>
<ThemeProvider <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
attribute="class" <div
defaultTheme="dark" style={{
enableSystem background:
disableTransitionOnChange "linear-gradient(to top, hsla(240, 6%, 10%, 0.5), hsl(var(--background)))",
> }}
{children} >
{children}
</div>
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>

4
src/app/(pages)/page.tsx
View File

@ -1,8 +1,8 @@
import { ReactElement } from "react";
import Greeting from "@/components/landing/greeting"; import Greeting from "@/components/landing/greeting";
import { ReactElement } from "react";
const LandingPage = (): ReactElement => ( const LandingPage = (): ReactElement => (
<main className="min-h-[100vh]"> <main className="px-3 min-h-[100vh] bg-background">
<Greeting /> <Greeting />
</main> </main>
); );

6
src/app/(pages)/status/[slug]/page.tsx Normal file
View File

@ -0,0 +1,6 @@
import { ReactElement } from "react";
const StatusPage = ({ params }: { params: { slug: string } }): ReactElement => {
return <main className="min-h-screen">{params.slug}</main>;
};
export default StatusPage;

37
src/app/style/globals.css → src/app/styles/globals.css
View File

@ -2,18 +2,6 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
@ -86,9 +74,32 @@ body {
@layer base { @layer base {
* { * {
@apply border-border; @apply border-border;
/* Scrollbar (Firefox) */
scrollbar-color: hsl(var(--accent)) hsl(var(--background));
scrollbar-width: thin;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
/* Scrollbar (Chrome & Safari) */
@layer base {
::-webkit-scrollbar {
@apply w-1.5;
}
::-webkit-scrollbar-track {
@apply bg-inherit;
}
::-webkit-scrollbar-thumb {
@apply bg-accent rounded-3xl;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-opacity-80;
}
}

8
src/components/landing/greeting.tsx
View File

@ -1,10 +1,10 @@
import { ReactElement } from "react"; import { Button } from "@/components/ui/button";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { ReactElement } from "react";
const Greeting = (): ReactElement => ( const Greeting = (): ReactElement => (
<div className="h-screen flex flex-col gap-4 justify-center items-center"> <div className="h-screen flex flex-col gap-4 justify-center text-center items-center">
<div className="flex flex-col gap-2 items-center select-none pointer-events-none"> <div className="flex flex-col gap-2 items-center select-none pointer-events-none">
{/* Logo */} {/* Logo */}
<Image <Image
@ -27,7 +27,7 @@ const Greeting = (): ReactElement => (
{/* GitHub */} {/* GitHub */}
<Link href="https://github.com/PulseAppCC" target="_blank"> <Link href="https://github.com/PulseAppCC" target="_blank">
<Button <Button
className="hover:bg-transparent" className="hover:bg-transparent hover:opacity-75 transition-all transform-gpu"
size="icon" size="icon"
variant="ghost" variant="ghost"
> >

7
tailwind.config.ts
View File

@ -1,13 +1,18 @@
import type { Config } from "tailwindcss"; import type { Config } from "tailwindcss";
const defaultTheme = require("tailwindcss/defaultTheme");
const config: Config = { const config: Config = {
darkMode: ["class"], darkMode: ["class"],
content: [ content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
], ],
theme: { theme: {
screens: {
xs: "475px",
...defaultTheme.screens,
},
extend: { extend: {
colors: { colors: {
background: "hsl(var(--background))", background: "hsl(var(--background))",