Cebula.

.gitattributes

@@ -0,0 +1,5 @@
+public/videos/** filter=lfs diff=lfs merge=lfs -text
+public/*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.ogv filter=lfs diff=lfs merge=lfs -text
+*.webm filter=lfs diff=lfs merge=lfs -text

package.json

@@ -36,6 +36,7 @@
     "@lingui/loader": "^5.1.2",
     "@lingui/swc-plugin": "^5.0.2",
     "@lingui/vite-plugin": "^5.1.2",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/negotiator": "^0.6.3",
     "@types/node": "^20",
     "@types/react": "^19",
@@ -43,7 +44,7 @@
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
     "postcss": "^8",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5"
   }
 }

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

scripts/reencode-videos.sh

@@ -0,0 +1,90 @@
+#!/bin/bash
+
+# Define directories
+SOURCE_DIR="./source-videos"
+DEST_DIR="./public/videos"
+
+# Define sizes and names
+SIZES=(480 720 1080 1440 2160)
+NAMES=("mobile" "tablet" "hd" "twok" "uhd")
+
+# Create destination directory if it doesn't exist
+mkdir -p "$DEST_DIR"
+
+for video in "$SOURCE_DIR"/*.mp4; do
+    if [ -f "$video" ]; then
+        filename=$(basename "$video" .mp4)
+        echo "Processing: $filename"
+
+        # Get video dimensions
+        width=$(ffprobe -v error -select_streams v:0 -show_entries stream=width -of csv=p=0 "$video")
+        height=$(ffprobe -v error -select_streams v:0 -show_entries stream=height -of csv=p=0 "$video")
+
+        # Process each size
+        for i in "${!SIZES[@]}"; do
+            size="${SIZES[$i]}"
+            name="${NAMES[$i]}"
+
+            echo "Debug: Processing $name with height=$size"
+
+            if [ "$size" -le "$height" ]; then
+                echo "Processing size $name (${size}p)"
+                # MP4
+                ffmpeg -n -i "$video" \
+                    -c:v libx264 \
+                    -vf "scale=-1:${size}" \
+                    -preset slow \
+                    -crf 23 \
+                    -an \
+                    "${DEST_DIR}/${filename}_${name}.mp4"
+
+                # WebM
+                ffmpeg -n -i "$video" \
+                    -c:v libvpx-vp9 \
+                    -deadline good \
+                    -cpu-used 2 \
+                    -row-mt 1 \
+                    -threads 8 \
+                    -vf "scale=-1:${size}" \
+                    -quality good \
+                    -an \
+                    -crf 20 \
+                    "${DEST_DIR}/${filename}_${name}.webm"
+
+                # Ogg
+                ffmpeg -n -i "$video" \
+                    -c:v libtheora \
+                    -q:v 5 \
+                    -vf "scale=-1:${size}" \
+                    -an \
+                    "${DEST_DIR}/${filename}_${name}.ogv"
+            fi
+        done
+
+        # Create original resolution version
+        echo "Creating original resolution version"
+
+        cp "$video" "${DEST_DIR}/${filename}_full.mp4"
+
+        ffmpeg -n -i "$video" \
+            -c:v libvpx-vp9 \
+            -deadline good \
+            -cpu-used 2 \
+            -row-mt 1 \
+            -threads 8 \
+            -quality good \
+            -an \
+            "${DEST_DIR}/${filename}_full.webm"
+
+        ffmpeg -n -i "$video" \
+            -c:v libtheora \
+            -q:v 5 \
+            -an \
+            "${DEST_DIR}/${filename}_full.ogv"
+
+        echo "Completed processing: $filename"
+        echo "----------------------------"
+    fi
+done
+
+echo "All videos have been processed."

src/app/[locale]/error.tsx

@@ -25,7 +25,7 @@ export default function Error({
         <div className="mt-6">
           <button
             type="button"
-            className="inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
+            className="inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-xs hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
             onClick={reset}
           >
             Try again

src/components/landing-page.tsx

@@ -25,8 +25,61 @@ function Section({
   </section>)
 }
 
-function Video({ src, hidden }: {
+function getSource({
+  src,
+  type
+}: {
   src: string;
+  type: 'mp4' | 'webm' | 'ogv'
+}) {
+  const sourceType = `video/${type}`
+  return [
+    <source
+      key={`mobile-${type}`}
+      media="(max-width: 640px)"
+      src={src.replace('.mp4', `_mobile.${type}`)}
+      type={sourceType}
+    />,
+
+    <source
+      key={`tablet-${type}`}
+      media="(max-width: 1024px)"
+      src={src.replace('.mp4', `_tablet.${type}`)}
+      type={sourceType}
+    />,
+
+    <source
+      key={`hd-${type}`}
+      media="(max-width: 1920px)"
+      src={src.replace('.mp4', `_hd.${type}`)}
+      type={sourceType}
+    />,
+
+    <source
+      key={`twok-${type}`}
+      media="(max-width: 2560px)"
+      src={src.replace('.mp4', `_2k.${type}`)}
+      type={sourceType}
+    />,
+
+    <source
+      key={`uhd-${type}`}
+      media="(max-width: 3840px)"
+      src={src.replace('.mp4', `_uhd.${type}`)}
+      type={sourceType}
+    />,
+
+    <source
+      key={`original-${type}`}
+      media="(min-width: 3841px)"
+      src={src.replace('.mp4', `_original.${type}`)}
+      type={sourceType}
+    />,
+  ];
+}
+
+function Video({ sourceBase, hidden }: {
+  sourceBase: string;
   hidden: boolean;
 }) {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -35,6 +88,7 @@ function Video({ src, hidden }: {
     const handleScroll = () => {
       if (!videoRef.current || hidden) return;
 
+      videoRef.current.play();
       const scrolled = window.scrollY;
       videoRef.current.style.willChange = "transform";
       videoRef.current.style.transform = `translateY(${scrolled * 0.5}px)`;
@@ -50,6 +104,8 @@ function Video({ src, hidden }: {
     return () => window.removeEventListener("scroll", throttledHandleScroll);
   }, [hidden]);
 
+  const sources = [...getSource({ src: sourceBase, type: 'mp4' }), ...getSource({ src: sourceBase, type: 'ogv' }), ...getSource({ src: sourceBase, type: 'webm' })]
+
   return (
     <video
       ref={videoRef}
@@ -58,11 +114,13 @@ function Video({ src, hidden }: {
       muted
       loop
       playsInline
+      webkit-playsinline="true"
+      x5-playsinline="true"
       className={cn("w-full h-full object-cover parallax-video", {
         hidden,
       })}
     >
-      <source src={src} type="video/mp4" />
+      {sources.map(x => x)}
     </video>
   );
 }
@@ -78,16 +136,16 @@ export default function LandingPage(
       <Nav t={t} />
       <main className="flex flex-col min-h-screen">
 
-        <section className="h-screen relative overflow-hidden dark:bg-black light:bg-white ">
+        <section id="hero" className="h-screen relative overflow-hidden dark:bg-black light:bg-white ">
           <div className="absolute inset-0 opacity-80">
-            <Video src="/ceboola_gradient.mp4" hidden={theme === "light"} />
-            {/* <Video src="/cebula.mp4" hidden={theme === "light"} /> */}
-            <Video src="/ceboola_gradient_white.mp4" hidden={theme === "dark"} />
+            <Video sourceBase="/videos/ceboola_gradient.mp4" hidden={theme === 'light'} />
+            <Video sourceBase="/videos/ceboola_gradient-white.mp4" hidden={theme === "dark"} />
           </div>
           <div className="relative z-10 container mx-auto px-4 h-full flex items-center justify-center">
             <div className="text-center font-[JGS7]">
-              <h1 className="text-5xl sm:text-6xl md:text-8xl font-bold tracking-tighter mb-6 light:text-background">{t.hero.title}</h1>
-              <p className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl-text:7xl 2xl:text-8xl text-primary">{t.hero.subtitle}</p>
+              <h1 className="text-5xl sm:text-6xl md:text-8xl font-bold tracking-tighter light:text-background">{t.hero.title}</h1>
+              <p className="mt-2 text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl-text:7xl 2xl:text-8xl text-primary">{t.hero.subtitle}</p>
+              <p className="mt-2 text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl-text:7xl 2xl:text-8xl text-primary ">{t.when.date}</p>
             </div>
           </div>
         </section>

src/components/nav.tsx

@@ -8,6 +8,7 @@ import { MobileNav } from "./mobile-nav"
 import { useTheme } from "./providers"
 
 const linksOrder: Array<keyof (typeof translations.pl)["nav"]> = [
+  "hero",
   "about",
   "where",
   "when",
@@ -62,7 +63,7 @@ export function Nav({
   }, []);
 
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-sm border-b">
+    <nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-sm bg-background/80 border-b">
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
           <a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">

src/components/ui/button.tsx

@@ -5,18 +5,18 @@ import * as React from "react"
 import { cn } from '../../lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },

src/components/ui/sheet.tsx

@@ -64,7 +64,7 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

src/globals.css

@@ -1,7 +1,70 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is(.dark *));
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --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-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@layer utilities {
   @font-face {
     font-family: "JGS7";
     src: url("/fonts/jgs7.woff2") format("woff2"),
@@ -16,8 +79,7 @@ html {
       scroll-behavior: smooth;
     }
   }
-
-@custom-variant dark (&:where(.dark, .dark *));
+}
 
 @layer base {
   :root {

src/i18n/translations.ts

@@ -6,6 +6,7 @@ const common = {
 const pl = {
   siteTitle: "CEBULACAMP",
   nav: {
+    hero: "Cebula",
     about: "O nas",
     when: "Kiedy",
     where: "Gdzie",

tailwind.config.ts

@@ -1,62 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  darkMode: ["class"],
-  content: [
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-        card: {
-          DEFAULT: "var(--card)",
-          foreground: "var(--card-foreground)",
-        },
-        popover: {
-          DEFAULT: "var(--popover)",
-          foreground: "var(--popover-foreground)",
-        },
-        primary: {
-          DEFAULT: "var(--primary)",
-          foreground: "var(--primary-foreground)",
-        },
-        secondary: {
-          DEFAULT: "var(--secondary)",
-          foreground: "var(--secondary-foreground)",
-        },
-        muted: {
-          DEFAULT: "var(--muted)",
-          foreground: "var(--muted-foreground)",
-        },
-        accent: {
-          DEFAULT: "var(--accent)",
-          foreground: "var(--accent-foreground)",
-        },
-        destructive: {
-          DEFAULT: "var(--destructive)",
-          foreground: "var(--destructive-foreground)",
-        },
-        border: "var(--border)",
-        input: "var(--input)",
-        ring: "var(--ring)",
-        chart: {
-          "1": "var(--chart-1)",
-          "2": "var(--chart-2)",
-          "3": "var(--chart-3)",
-          "4": "var(--chart-4)",
-          "5": "var(--chart-5)",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-    },
-  },
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  plugins: [require("tailwindcss-animate")],
-} satisfies Config;

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "tailwind.config.ts"],
   "exclude": ["node_modules"]
 }