diff --git a/app/globals.css b/app/globals.css index a2dc41e..06036c8 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,149 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"); @import "tailwindcss"; - -:root { - --background: #ffffff; - --foreground: #171717; -} +@custom-variant dark (&:is(.dark *)); @theme inline { + /* Map semantic utility colors to CSS variables */ --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + + /* Map specific OMS colors IF you want direct utilities like bg-oms-gold */ + /* If you only use semantic vars (like bg-primary), these aren't strictly needed here */ + --color-oms-gold: var(--oms-gold); + --color-oms-black: var(--oms-black); + --color-oms-white: var(--oms-white); + --color-oms-light-gray: var(--oms-light-gray); + + /* Map font variables */ + --font-sans: var(--font-sans); + + /* Map radius variables */ + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); +} +:root { + /* --- Font --- */ + --font-sans: "Poppins", sans-serif; + + /* --- Radius --- */ + --radius: 0.5rem; /* Example: Adjust OMS desired radius */ + + /* --- Light Mode Colors --- */ + --background: #ffffff; /* White */ + --foreground: #000000; /* Black */ + --card: #ffffff; + --card-foreground: #000000; + --popover: #ffffff; + --popover-foreground: #000000; + --primary: #e1c44a; /* OMS Gold */ + --primary-foreground: #000000; /* Black Text on Gold */ + --secondary: #f8f9fa; /* OMS Light Gray */ + --secondary-foreground: #000000; /* Black Text on Light Gray */ + --muted: #f8f9fa; /* OMS Light Gray */ + --muted-foreground: #6c757d; /* Muted Gray Text */ + --accent: var(--primary); /* Use Primary Gold for Accent */ + --accent-foreground: var( + --primary-foreground + ); /* Use Black for Accent Text */ + --destructive: #dc3545; /* Example Red */ + --destructive-foreground: #ffffff; /* White Text on Red */ + --border: #dee2e6; /* Light Gray Border */ + --input: #dee2e6; /* Light Gray Input Border */ + --ring: var(--primary); /* Gold focus ring */ + + /* --- Specific OMS Colors (Optional if Semantic is Enough) --- */ + --oms-gold: #e1c44a; + --oms-black: #000000; + --oms-white: #ffffff; + --oms-light-gray: #f8f9fa; } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; +.dark { + /* --- Dark Mode Color Overrides --- */ + --background: #121212; /* Very Dark Gray/Black */ + --foreground: #e0e0e0; /* Light Gray Text */ + --card: #1e1e1e; /* Slightly Lighter Dark */ + --card-foreground: #e0e0e0; + --popover: #1e1e1e; + --popover-foreground: #e0e0e0; + --primary: #e1c44a; /* Keep Gold */ + --primary-foreground: #000000; /* Keep Black Text on Gold */ + --secondary: #2a2a2a; /* Darker Gray */ + --secondary-foreground: #e0e0e0; /* Light Text */ + --muted: #2a2a2a; + --muted-foreground: #a0a0a0; /* Dimmer Light Text */ + --accent: var(--primary); /* Keep Gold */ + --accent-foreground: var(--primary-foreground); /* Keep Black */ + --destructive: #842029; /* Darker Red */ + --destructive-foreground: #f8d7da; /* Lighter text on Dark Red */ + --border: #3a3a3a; /* Dark Border */ + --input: #3a3a3a; + --ring: var(--primary); /* Keep Gold */ + + /* --- Specific OMS Colors (Optional) --- */ + --oms-gold: #e1c44a; + --oms-black: #000000; + --oms-white: #ffffff; + --oms-light-gray: #2a2a2a; /* Use Dark Gray */ +} +@layer base { + * { + border-color: var(--border); + } + body { + background-color: var(--background); + color: var(--foreground); + font-family: var(--font-sans); + @apply flex flex-col min-h-screen; + } + main { + @apply flex-grow; } } -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; +@layer components { +} + +@layer utilities { + .animation-delay-300 { + animation-delay: 0.3s; + } + .animation-delay-600 { + animation-delay: 0.6s; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.animate-fade-in-up { + animation: fadeInUp 0.8s ease-out forwards; + opacity: 0; } diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..72a7761 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,20 +1,21 @@ +// app/layout.tsx import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Poppins } from "next/font/google"; import "./globals.css"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; +import ChatbotWidget from "@/components/ChatbotWidget"; +import { ThemeProvider } from "@/providers/theme-provider"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const poppins = Poppins({ subsets: ["latin"], + weight: ["300", "400", "500", "600", "700", "800"], + variable: "--font-poppins", }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "OMS - Owethu Managed Services", + description: "Where innovation meets excellence.", }; export default function RootLayout({ @@ -23,11 +24,18 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - - {children} + + + +
+
{children}
+