diff --git a/app/favicon.ico b/app/favicon.ico index 718d6fe..c8bc42a 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css index a2dc41e..eec86cc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,25 @@ @import "tailwindcss"; :root { - --background: #ffffff; - --foreground: #171717; + --background: #ffffff; + --foreground: #171717; } @theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-space-grotesk); } @media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } + :root { + --background: #0a0a0a; + --foreground: #ededed; + } } body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + background: var(--background); + color: var(--foreground); + font-family: Arial, Helvetica, sans-serif; } diff --git a/app/layout.tsx b/app/layout.tsx index 976eb90..168de93 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,20 +1,16 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Space_Grotesk } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const spaceGrotesk = Space_Grotesk({ + variable: "--font-space-grotesk", subsets: ["latin"], + weight: "600", }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "BlueberryOS", + description: "A modern rolling release server operating system", }; export default function RootLayout({ @@ -25,7 +21,7 @@ export default function RootLayout({ return ( {children} diff --git a/app/page.tsx b/app/page.tsx index 3f36f7c..da467a1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,65 +1,27 @@ -import Image from "next/image"; +"use client"; +import { useEffect, useState } from "react"; +import { MobileLanding, DesktopLanding } from "@/components/landing_page"; export default function Home() { + const [isMobile, setIsMobile] = useState(false); // start as null + + useEffect(() => { + const handleResize = () => { + const aspectRatio = window.innerWidth / window.innerHeight; + console.log("Aspect Ratio:", aspectRatio); + setIsMobile(aspectRatio < 1); + }; + + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
+
+ {isMobile ? : }
); } diff --git a/components/landing_page.tsx b/components/landing_page.tsx new file mode 100644 index 0000000..4512763 --- /dev/null +++ b/components/landing_page.tsx @@ -0,0 +1,38 @@ +import Image from "next/image"; + +export function DesktopLanding() { + return ( +
+
+

+ Blueberry OS +

+
+
+ ); +} + +export function MobileLanding() { + return ( +
+
+ logo +

+ Blueberry OS +

+
+
+ ); +} diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..813ef8d Binary files /dev/null and b/public/logo.png differ