diff --git a/afbeeldingen/deurgang.jpg b/afbeeldingen/deurgang.jpg new file mode 100644 index 0000000..4da863a Binary files /dev/null and b/afbeeldingen/deurgang.jpg differ diff --git a/afbeeldingen/example-footer b/afbeeldingen/example-footer new file mode 100644 index 0000000..471324a Binary files /dev/null and b/afbeeldingen/example-footer differ diff --git a/afbeeldingen/example-section1.jpeg b/afbeeldingen/example-section1.jpeg new file mode 100644 index 0000000..cd60a6e Binary files /dev/null and b/afbeeldingen/example-section1.jpeg differ diff --git a/afbeeldingen/example-section2.png b/afbeeldingen/example-section2.png new file mode 100644 index 0000000..fc232a8 Binary files /dev/null and b/afbeeldingen/example-section2.png differ diff --git a/afbeeldingen/example-section3.png b/afbeeldingen/example-section3.png new file mode 100644 index 0000000..5ff4867 Binary files /dev/null and b/afbeeldingen/example-section3.png differ diff --git a/afbeeldingen/example-section4 b/afbeeldingen/example-section4 new file mode 100644 index 0000000..5a8b423 Binary files /dev/null and b/afbeeldingen/example-section4 differ diff --git a/afbeeldingen/image-people1.png b/afbeeldingen/image-people1.png new file mode 100644 index 0000000..06bca86 Binary files /dev/null and b/afbeeldingen/image-people1.png differ diff --git a/afbeeldingen/proinn-spuiten b/afbeeldingen/proinn-spuiten new file mode 100644 index 0000000..f602d43 Binary files /dev/null and b/afbeeldingen/proinn-spuiten differ diff --git a/app/globals.css b/app/globals.css index a2dc41e..2897158 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,136 @@ @import "tailwindcss"; +@import "tw-animate-css"; +@import "shadcn/tailwind.css"; -:root { - --background: #ffffff; - --foreground: #171717; -} +@custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --radius-2xl: calc(var(--radius) + 8px); + --radius-3xl: calc(var(--radius) + 12px); + --radius-4xl: calc(var(--radius) + 16px); + --color-brand-orange: var(--brand-orange); + --color-brand-blue: var(--brand-blue); + --color-brand-pistachio: var(--brand-pistachio); + --color-topbar-bg: var(--topbar-bg); + --color-menu-footer-bg: var(--menu-footer-bg); } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; +:root { + --radius: 0.625rem; + --brand-orange: #F97316; + --brand-blue: #0ea5e9; + --brand-pistachio: #C4D668; + --topbar-bg: #E8E8E6; + --menu-footer-bg: #2F3B3B; + --background: oklch(0.985 0.002 247); + --foreground: oklch(0.1 0.02 265); + --card: oklch(1 0 0); + --card-foreground: oklch(0.1 0.02 265); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.1 0.02 265); + --primary: oklch(0.145 0.02 265); + --primary-foreground: oklch(0.985 0.003 247); + --secondary: oklch(0.968 0.007 247.896); + --secondary-foreground: oklch(0.208 0.042 265.755); + --muted: oklch(0.968 0.007 247.896); + --muted-foreground: oklch(0.554 0.023 264.364); + --accent: oklch(0.968 0.007 247.896); + --accent-foreground: oklch(0.208 0.042 265.755); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.929 0.013 255.508); + --input: oklch(0.929 0.013 255.508); + --ring: oklch(0.704 0.04 256.788); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.984 0.003 247.858); + --sidebar-foreground: oklch(0.129 0.042 264.695); + --sidebar-primary: oklch(0.208 0.042 265.755); + --sidebar-primary-foreground: oklch(0.984 0.003 247.858); + --sidebar-accent: oklch(0.968 0.007 247.896); + --sidebar-accent-foreground: oklch(0.208 0.042 265.755); + --sidebar-border: oklch(0.929 0.013 255.508); + --sidebar-ring: oklch(0.704 0.04 256.788); +} + +.dark { + --background: oklch(0.129 0.042 264.695); + --foreground: oklch(0.984 0.003 247.858); + --card: oklch(0.208 0.042 265.755); + --card-foreground: oklch(0.984 0.003 247.858); + --popover: oklch(0.208 0.042 265.755); + --popover-foreground: oklch(0.984 0.003 247.858); + --primary: oklch(0.929 0.013 255.508); + --primary-foreground: oklch(0.208 0.042 265.755); + --secondary: oklch(0.279 0.041 260.031); + --secondary-foreground: oklch(0.984 0.003 247.858); + --muted: oklch(0.279 0.041 260.031); + --muted-foreground: oklch(0.704 0.04 256.788); + --accent: oklch(0.279 0.041 260.031); + --accent-foreground: oklch(0.984 0.003 247.858); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.554 0.023 264.364); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.208 0.042 265.755); + --sidebar-foreground: oklch(0.984 0.003 247.858); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.984 0.003 247.858); + --sidebar-accent: oklch(0.279 0.041 260.031); + --sidebar-accent-foreground: oklch(0.984 0.003 247.858); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.554 0.023 264.364); +} + +@layer base { + * { + @apply border-border outline-ring/50; } -} - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..9f05d6a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,20 +1,18 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Inter } from "next/font/google"; +import { Header } from "@/components/layout/header"; +import { Footer } from "@/components/layout/footer"; import "./globals.css"; -const geistSans = Geist({ +const inter = Inter({ variable: "--font-geist-sans", subsets: ["latin"], }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "PROINN | Stalen Deuren & Maatwerk", + description: + "Industriële stalen deuren, kozijnen en maatwerk van PROINN. Vraag direct een offerte aan via onze configurator.", }; export default function RootLayout({ @@ -23,11 +21,11 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - - {children} + + +
+
{children}
+