feat: updated confessions page

Adedoyin-Emmanuel · Nov 9, 2024 · 75ad513 · 75ad513
1 parent 9f9981b
commit 75ad513
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -1,12 +1,13 @@
 import type { Metadata } from "next";
-import { Playfair_Display } from "next/font/google";
+import { Bai_Jamjuree } from "next/font/google";
 import "./globals.css";
 
-const playfair = Playfair_Display({ subsets: ["latin"], weight: "400" });
+const bai_jamjuree = Bai_Jamjuree({ subsets: ["latin"], weight: "400" });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Holy Tab",
+  description:
+    "Fresh, Bible-centered confession on every new tab. Stay inspired and rooted in faith throughout your day",
 };
 
 export default function RootLayout({
@@ -16,7 +17,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={playfair.className}>{children}</body>
+      <body className={bai_jamjuree.className}>{children}</body>
     </html>
   );
 }
diff --git a/web/app/page.tsx b/web/app/page.tsx
@@ -1,17 +1,44 @@
+import localFont from "next/font/local";
+import { cn } from "@/lib/utils";
+
+const timesNewRoman = localFont({
+  src: "./../public/fonts/timesNewRoman.ttf",
+});
+
 export default function Home() {
   return (
     <div className="w-screen h-screen flex items-center justify-center flex-col">
-
-      <h1 className="md:text-5xl text-2xl p-5 md:w-9/12 text-center font-semibold leading-[3rem] md:leading-relaxed content-section">
-        Angels are constantly deployed to enforce every aspect of my salvation
-        including health, finances and protection.
-      </h1>
+      <input
+        placeholder="SEARCH GOOGLE"
+        className="mx-auto md:w-1/3 w-11/12 h-10 bg-transparent
+          border-b border-[#A6A6A6] border-r-0 border-l-0 border-t-0
+          outline-none focus:outline-none
+          transition-all duration-300
+          focus:border-b-2
+          placeholder:text-gray-500 text-sm"
+      />
 
       <br />
+      <br />
+      <br />
+      <br />
+
+      <section className="flex items-center gap-[6px] bg-[#F28C8C33] rounded-[10px] pt-2 pr-3 pb-2 pl-3">
+        <section className="bg-[#FA7272] h-[14px] w-[14px] rounded-full"></section>
+        <p className="text-sm ">CONFESSION OF THE DAY</p>
+      </section>
 
-      <button className="px-6 py-3 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg hover:shadow-xl transition-transform transform hover:scale-105 duration-300">
-        New Confession
-      </button>
+      <h1
+        className={cn(
+          timesNewRoman.className,
+          "font-normal md:text-[3.25rem] text-2xl leading-[3.74rem] tracking-[-0.02em] p-5 md:w-8/12 text-center md:leading-relaxed"
+        )}
+      >
+        I bring forth good fruit, multiply exceedingly, influence my environment
+        positively, subdue every opposition and dominate everywhere.
+      </h1>
+
+      <br />
     </div>
   );
 }
diff --git a/web/public/fonts/timesNewRoman.ttf b/web/public/fonts/timesNewRoman.ttf