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",
"version": "0.1.0",
"name": "pulse-www",
"version": "1.0.0",
"author": {
"name": "Braydon (Rainnny)",
"url": "https://rainnny.club",
"email": "braydonrainnny@gmail.com"
},
"private": true,
"scripts": {
"dev": "next dev",

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

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

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

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

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

@ -2,18 +2,6 @@
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
@ -86,9 +74,32 @@ body {
@layer base {
* {
@apply border-border;
/* Scrollbar (Firefox) */
scrollbar-color: hsl(var(--accent)) hsl(var(--background));
scrollbar-width: thin;
}
body {
@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 Link from "next/link";
import { Button } from "@/components/ui/button";
import { ReactElement } from "react";
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">
{/* Logo */}
<Image
@ -27,7 +27,7 @@ const Greeting = (): ReactElement => (
{/* GitHub */}
<Link href="https://github.com/PulseAppCC" target="_blank">
<Button
className="hover:bg-transparent"
className="hover:bg-transparent hover:opacity-75 transition-all transform-gpu"
size="icon"
variant="ghost"
>

7
tailwind.config.ts
View File

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