Merge pull request #66 from ethanniser/a-fresh-coat-of-paint

a fresh coat of paint
ethanniser · Oct 27, 2024 · 576bfe4 · 576bfe4
2 parents f88f7fd + 6c2aeda
commit 576bfe4
Show file tree

Hide file tree

Showing 23 changed files with 65 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-## NextMaster
+## NextFaster
 
 A highly performant e-commerce template using Next.js and AI generated content by [@ethanniser](https://x.com/ethanniser), [@RhysSullivan](https://x.com/RhysSullivan) and [@armans-code](https://x.com/ksw_arman)
 
@@ -39,6 +39,4 @@ A highly performant e-commerce template using Next.js and AI generated content b
 
 ### Performance
 
-[PageSpeed report](https://pagespeed.web.dev/analysis/https-next-master-vercel-app/g1joy8i7u9?form_factor=mobile)
-
-<img width="987" alt="image" src="https://github.com/user-attachments/assets/926be902-8bc9-4303-8a41-cb0d5c117403">
+todo!()
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "next-master",
+  "name": "next-faster",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -38,6 +38,7 @@
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.35.1",
     "effect": "^3.9.2",
+    "geist": "^1.3.1",
     "jose": "^5.9.4",
     "linkedom": "^0.18.5",
     "lucide-react": "^0.453.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(category-sidebar)/[collection]/page.tsx b/src/app/(category-sidebar)/[collection]/page.tsx
@@ -37,7 +37,7 @@ export default async function Home(props: {
                   decoding="sync"
                   src={category.image_url ?? "/placeholder.svg"}
                   alt={`A small picture of ${category.name}`}
-                  className="mb-2 h-14 w-14 border hover:bg-yellow-200"
+                  className="mb-2 h-14 w-14 border hover:bg-accent2"
                   width={48}
                   height={48}
                   quality={65}

diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
@@ -8,9 +8,9 @@ export default async function Layout({
 }) {
   const allCollections = await getCollections();
   return (
-    <div className="flex flex-grow font-helvetica-roman">
+    <div className="flex flex-grow font-mono">
       <aside className="hidden w-64 min-w-64 max-w-64 border-r p-4 md:block">
-        <h2 className="border-b border-green-800 text-sm font-semibold text-green-900">
+        <h2 className="border-b border-accent1 text-sm font-semibold text-accent1">
           Choose a Category
         </h2>
         <ul className="flex flex-col items-start justify-center">
@@ -19,7 +19,7 @@ export default async function Layout({
               <Link
                 prefetch={true}
                 href={`/${collection.slug}`}
-                className="block w-full py-1 text-xs text-gray-800 hover:bg-yellow-100 hover:underline"
+                className="block w-full py-1 text-xs text-gray-800 hover:bg-accent2 hover:underline"
               >
                 {collection.name}
               </Link>

diff --git a/src/app/(category-sidebar)/page.tsx b/src/app/(category-sidebar)/page.tsx
@@ -12,7 +12,7 @@ export default async function Home() {
 
   return (
     <div className="w-full p-4">
-      <div className="mb-2 w-full flex-grow border-b-[1px] border-green-800 text-sm font-semibold text-black">
+      <div className="mb-2 w-full flex-grow border-b-[1px] border-accent1 text-sm font-semibold text-black">
         Explore {productCount.at(0)?.count.toLocaleString()} products
       </div>
       {collections.map((collection) => (
@@ -31,7 +31,7 @@ export default async function Home() {
                   decoding="sync"
                   src={category.image_url ?? "/placeholder.svg"}
                   alt={`A small picture of ${category.name}`}
-                  className="mb-2 h-14 w-14 border hover:bg-yellow-200"
+                  className="mb-2 h-14 w-14 border hover:bg-accent2"
                   width={48}
                   height={48}
                   quality={65}

diff --git a/src/app/(category-sidebar)/products/[category]/[subcategory]/[product]/page.tsx b/src/app/(category-sidebar)/products/[category]/[subcategory]/[product]/page.tsx
@@ -73,7 +73,7 @@ export default async function Page(props: {
 
   return (
     <div className="container p-4">
-      <h1 className="border-t-2 pt-1 text-xl font-bold text-green-800">
+      <h1 className="border-t-2 pt-1 text-xl font-bold text-accent1">
         {productData.name}
       </h1>
       <div className="flex flex-col gap-2">
@@ -97,7 +97,7 @@ export default async function Page(props: {
       </div>
       <div className="pt-8">
         {related.length > 0 && (
-          <h2 className="text-lg font-bold text-green-800">
+          <h2 className="text-lg font-bold text-accent1">
             Explore more products
           </h2>
         )}

diff --git a/src/app/auth.client.tsx b/src/app/auth.client.tsx
@@ -58,7 +58,7 @@ export function LoginForm() {
 
         <Button
           type="submit"
-          className="rounded-[1px] bg-green-800 px-4 py-2 text-xs font-semibold text-white shadow-sm hover:bg-green-900 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
+          className="rounded-[1px] bg-accent1 px-4 py-2 text-xs font-semibold text-white shadow-sm hover:bg-accent1 focus:outline-none focus:ring-2 focus:ring-accent1 focus:ring-offset-2"
           disabled={pending}
           formAction={signInFormAction}
         >
@@ -68,7 +68,7 @@ export function LoginForm() {
         <Button
           type="submit"
           variant={"ghost"}
-          className="rounded-[2px] border-[1px] border-green-800 bg-white px-4 py-2 text-xs font-semibold text-green-800"
+          className="rounded-[2px] border-[1px] border-accent1 bg-white px-4 py-2 text-xs font-semibold text-accent1"
           disabled={pending}
           formAction={signUpFormAction}
         >
@@ -92,7 +92,7 @@ export function SignInSignUp() {
         </svg>
       </PopoverTrigger>
       <PopoverContent className="px-8 py-4">
-        <span className="text-sm font-semibold text-green-800">Log in</span>
+        <span className="text-sm font-semibold text-accent1">Log in</span>
         <LoginForm />
       </PopoverContent>
     </Popover>
@@ -115,7 +115,7 @@ export function SignOut(props: { username: string }) {
           <Button
             formAction={signOut}
             variant={"ghost"}
-            className="rounded-[2px] border-[1px] border-green-800 bg-white px-4 py-2 text-xs font-semibold text-green-800"
+            className="rounded-[2px] border-[1px] border-accent1 bg-white px-4 py-2 text-xs font-semibold text-accent1"
           >
             {"Sign Out"}
           </Button>

diff --git a/src/app/auth.server.tsx b/src/app/auth.server.tsx
@@ -17,7 +17,7 @@ export async function PlaceOrderAuth() {
   }
   return (
     <>
-      <p className="font-semibold text-green-800">Log in to place an order</p>
+      <p className="font-semibold text-accent1">Log in to place an order</p>
       <LoginForm />
     </>
   );

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/fonts/FuturaLTPro-BoldCond.woff2 b/src/app/fonts/FuturaLTPro-BoldCond.woff2
diff --git a/src/app/fonts/HelveticaNeueLTPro-Md.woff b/src/app/fonts/HelveticaNeueLTPro-Md.woff
diff --git a/src/app/fonts/HelveticaNeueLTPro-Roman.woff b/src/app/fonts/HelveticaNeueLTPro-Roman.woff
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./globals.css";
 import { SearchDropdownComponent } from "@/components/search-dropdown";
 import { MenuIcon } from "lucide-react";
@@ -10,25 +9,13 @@ import { Link } from "@/components/ui/link";
 import { Analytics } from "@vercel/analytics/react";
 import { Toaster } from "sonner";
 import { WelcomeToast } from "./welcome-toast";
-
-const helvetica = localFont({
-  src: "./fonts/HelveticaNeueLTPro-Md.woff",
-  variable: "--font-helvetica",
-});
-const helveticaRoman = localFont({
-  src: "./fonts/HelveticaNeueLTPro-Roman.woff",
-  variable: "--font-helvetica-roman",
-});
-
-const futura = localFont({
-  src: "./fonts/FuturaLTPro-BoldCond.woff2",
-  variable: "--font-futura",
-});
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
 
 export const metadata: Metadata = {
   title: {
-    template: "%s | NextMaster",
-    default: "NextMaster",
+    template: "%s | NextFaster",
+    default: "NextFaster",
   },
   description: "A performant site built with Next.js",
 };
@@ -43,10 +30,10 @@ export default async function RootLayout({
   return (
     <html lang="en" className="h-full">
       <body
-        className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex flex-col antialiased`}
+        className={`${GeistSans.variable} ${GeistMono.variable} flex flex-col antialiased`}
       >
         <div>
-          <header className="z-10 flex flex-grow items-center justify-between gap-4 border-b-2 border-yellow-300 bg-background p-2 pb-[4px] pt-2 font-futura sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
+          <header className="z-10 flex flex-grow items-center justify-between gap-4 border-b-2 border-accent2 bg-background p-2 pb-[4px] pt-2 sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
             <div className="flex flex-grow flex-col">
               <div className="absolute right-2 top-2 flex justify-end pt-2 font-sans text-sm hover:underline sm:relative sm:right-0 sm:top-0">
                 <Suspense
@@ -66,9 +53,9 @@ export default async function RootLayout({
                 <Link
                   prefetch={true}
                   href="/"
-                  className="text-4xl font-bold text-green-800"
+                  className="text-4xl font-bold text-accent1"
                 >
-                  NextMaster
+                  NextFaster
                 </Link>
                 <div className="items flex w-full flex-row items-center justify-between gap-4">
                   <div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
@@ -79,7 +66,7 @@ export default async function RootLayout({
                       <Link
                         prefetch={true}
                         href="/order"
-                        className="text-lg text-green-800 hover:underline"
+                        className="text-lg text-accent1 hover:underline"
                       >
                         ORDER
                       </Link>
@@ -90,15 +77,15 @@ export default async function RootLayout({
                     <Link
                       prefetch={true}
                       href="/order-history"
-                      className="hidden text-lg text-green-800 hover:underline md:block"
+                      className="hidden text-lg text-accent1 hover:underline md:block"
                     >
                       ORDER HISTORY
                     </Link>
                     <Link
                       prefetch={true}
                       href="/order-history"
                       aria-label="Order History"
-                      className="block text-lg text-green-800 hover:underline md:hidden"
+                      className="block text-lg text-accent1 hover:underline md:hidden"
                     >
                       <MenuIcon />
                     </Link>
@@ -109,37 +96,23 @@ export default async function RootLayout({
           </header>
           {children}
         </div>
-        <footer className="flex h-[8px] flex-col items-center justify-between space-y-2 border-t border-gray-400 bg-background px-4 font-helvetica text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
+        <footer className="flex h-[8px] flex-col items-center justify-between space-y-2 border-t border-gray-400 bg-background px-4 font-sans text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
           <div className="flex flex-wrap justify-center space-x-2 pt-2 sm:justify-start">
-            <span className="hover:bg-yellow-100 hover:underline">Home</span>
-            <span>|</span>
-            <span className="hover:bg-yellow-100 hover:underline">
-              Location
-            </span>
-            <span>|</span>
-            <span className="hover:bg-yellow-100 hover:underline">Returns</span>
-            <span>|</span>
-            <span className="hover:bg-yellow-100 hover:underline">Careers</span>
+            <span className="hover:bg-accent2 hover:underline">Home</span>
             <span>|</span>
-            <span className="hover:bg-yellow-100 hover:underline">
-              Mobile App
-            </span>
+            <span className="hover:bg-accent2 hover:underline">FAQ</span>
             <span>|</span>
-            <span className="hover:bg-yellow-100 hover:underline">
-              Solidworks Add-In
-            </span>
+            <span className="hover:bg-accent2 hover:underline">Returns</span>
             <span>|</span>
-            <span className="hover:bg-yellow-100 hover:underline">Help</span>
+            <span className="hover:bg-accent2 hover:underline">Careers</span>
             <span>|</span>
-            <span className="hover:bg-yellow-100 hover:underline">
-              Settings
-            </span>
+            <span className="hover:bg-accent2 hover:underline">Contact</span>
           </div>
           <div className="text-center sm:text-right">
             By using this website, you agree to check out the{" "}
             <Link
-              href="https://github.com/ethanniser/NextMaster"
-              className="font-bold hover:underline"
+              href="https://github.com/ethanniser/NextFaster"
+              className="font-bold text-accent1 hover:underline"
               target="_blank"
             >
               Source Code

diff --git a/src/app/opengraph-image.png b/src/app/opengraph-image.png
diff --git a/src/app/order-history/page.tsx b/src/app/order-history/page.tsx
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default async function Page() {
   return (
     <main className="min-h-screen p-4">
-      <h1 className="w-full border-b-2 border-green-800 text-left font-futura text-2xl text-green-800">
+      <h1 className="w-full border-b-2 border-accent1 text-left text-2xl text-accent1">
         Order History
       </h1>
       <div className="mx-auto flex max-w-md flex-col gap-4 text-black">

diff --git a/src/app/order/dynamic.tsx b/src/app/order/dynamic.tsx
@@ -14,7 +14,7 @@ export async function CartItems() {
     <>
       {cart.length > 0 && (
         <div className="pb-4">
-          <p className="font-semibold text-green-700">Delivers in 2-4 weeks</p>
+          <p className="font-semibold text-accent1">Delivers in 2-4 weeks</p>
           <p className="text-sm text-gray-500">Need this sooner?</p>
         </div>
       )}

diff --git a/src/app/order/page.tsx b/src/app/order/page.tsx
@@ -12,7 +12,7 @@ export default async function Page() {
     <main className="min-h-screen sm:p-4">
       <div className="container mx-auto p-1 sm:p-3">
         <div className="flex items-center justify-between border-b border-gray-200">
-          <h1 className="font-futura text-2xl text-green-800">Order</h1>
+          <h1 className="text-2xl text-accent1">Order</h1>
         </div>
 
         <div className="flex grid-cols-3 flex-col gap-8 pt-4 lg:grid">

diff --git a/src/app/welcome-toast.tsx b/src/app/welcome-toast.tsx
@@ -8,7 +8,7 @@ export function WelcomeToast() {
     // ignore if screen height is too small
     if (window.innerHeight < 850) return;
     if (!document.cookie.includes("welcome-toast=3")) {
-      toast("🚀 Welcome to NextMaster!", {
+      toast("🚀 Welcome to NextFaster!", {
         id: "welcome-toast",
         duration: Infinity,
         onDismiss: () => {
@@ -22,8 +22,8 @@ export function WelcomeToast() {
             This demo is to highlight the speed a full-stack Next.js site can
             achieve.{" "}
             <a
-              href="https://github.com/ethanniser/NextMaster"
-              className="font-semibold text-green-800 hover:underline"
+              href="https://github.com/ethanniser/NextFaster"
+              className="font-semibold text-accent1 hover:underline"
               target="_blank"
             >
               Get the Source

diff --git a/src/components/add-to-cart-form.tsx b/src/components/add-to-cart-form.tsx
@@ -9,7 +9,7 @@ export function AddToCartForm({ productSlug }: { productSlug: string }) {
       <input type="hidden" name="productSlug" value={productSlug} />
       <button
         type="submit"
-        className="max-w-[150px] rounded-[2px] bg-green-800 px-5 py-1 text-sm font-semibold text-white"
+        className="max-w-[150px] rounded-[2px] bg-accent1 px-5 py-1 text-sm font-semibold text-white"
       >
         Add to cart
       </button>

diff --git a/src/components/cart.tsx b/src/components/cart.tsx
@@ -7,7 +7,7 @@ export async function Cart() {
   }
   const totalQuantity = cart.reduce((acc, item) => acc + item.quantity, 0);
   return (
-    <div className="absolute -right-3 -top-1 rounded-full bg-yellow-300 px-1 text-xs text-green-800">
+    <div className="absolute -right-3 -top-1 rounded-full bg-accent2 px-1 text-xs text-accent1">
       {totalQuantity}
     </div>
   );

diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
@@ -32,10 +32,10 @@ export function LoginForm() {
         </div>
         <div className="text-sm underline">Reset Password</div>
       </div>
-      <div className="w-full rounded-sm bg-green-800 p-2 text-center font-bold text-white hover:bg-green-800">
+      <div className="w-full rounded-sm bg-accent1 p-2 text-center font-bold text-white hover:bg-accent1">
         Log in
       </div>
-      <div className="w-full rounded-sm border border-green-800 p-2 text-center font-bold text-green-800">
+      <div className="w-full rounded-sm border border-accent1 p-2 text-center font-bold text-accent1">
         Create login
       </div>
     </div>