Add more sections

README.md

@@ -8,7 +8,7 @@ Landing page for hypthetical client **Great Music LLM**'s event and employee man
 
 - [`vite`](https://vite.dev/) build tooling
 - [`tailwindcss`](https://tailwindcss.com/) styling
-- [Magic UI](https://magicui.design/) component library
+- [Magic UI](https://magicui.design/) component library (see [`src/components/ui`](https://git.thingsnstuff.xyz/ethanglide/bcdigital-challenge/src/branch/main/src/components/ui))
 - [`prettier`](https://prettier.io/) code formatting
 - [`eslint`](https://eslint.org/) code linting
 - [`husky`](https://typicode.github.io/husky/) and [`lint-staged`](https://github.com/lint-staged/lint-staged) pre-commit hooks for testing/formatting/linting

src/app.tsx

@@ -1,7 +1,9 @@
+import { StripedPattern } from "./components/magicui/striped-pattern";
 import { Navbar } from "./components/navbar/navbar";
 import { PartnersMarquee } from "./components/partners-marquee/partners-marquee";
 import { AuroraText } from "./components/ui/aurora-text";
 import { DotPattern } from "./components/ui/dot-pattern";
+import { GridPattern } from "./components/ui/grid-pattern";
 import { RainbowButton } from "./components/ui/rainbow-button";
 import { TextAnimate } from "./components/ui/text-animate";
 
@@ -45,26 +47,114 @@ export function App() {
           </TextAnimate>
           <PartnersMarquee />
           <span></span> {/* Spacer for DotPattern */}
-          <DotPattern className="-z-10 mask-[radial-gradient(300px_circle_at_center,white,transparent)]" />
+          <DotPattern className="-z-10" />
         </div>
-        <div className="flex flex-col gap-5 p-6 bg-stone-200 text-center">
+        <div className="bg-[url(https://cdn.toontrack.com/app/uploads/product/upright-ebx/jpg/upright-ebx-top-mobile.jpg)] bg-cover bg-center text-white">
+          <div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px] backdrop-blur-[5px] backdrop-grayscale-25">
+            <TextAnimate
+              animation="blurInUp"
+              by="character"
+              as="h3"
+              className="text-xl font-bold text-center"
+            >
+              About Us
+            </TextAnimate>
+            <p>
+              We are dedicated to simplifying orchestral event management
+              through innovative solutions tailored to the unique needs of
+              orchestras and their audiences.
+            </p>
+            <p>
+              Our platform streamlines the planning, coordination, and execution
+              of orchestral events, allowing musicians and organizers to focus
+              on what they do best: creating unforgettable musical experiences.
+            </p>
+          </div>
+        </div>
+        <div className="relative flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px] backdrop-blur-[6px]">
           <TextAnimate
             animation="blurInUp"
             by="character"
             as="h3"
             className="text-xl font-bold text-center"
           >
-            About Us
+            Events
           </TextAnimate>
           <p>
-            We are dedicated to simplifying orchestral event management through
-            innovative solutions tailored to the unique needs of orchestras and
-            their audiences.
+            Are you an event organizer looking to host an orchestral
+            performance? Our platform connects you with talented orchestras and
+            provides the tools you need to plan and execute a successful event.
           </p>
-          <p>
-            Our platform streamlines the planning, coordination, and execution
-            of orchestral events, allowing musicians and organizers to focus on
-            what they do best: creating unforgettable musical experiences.
+          <div className="flex justify-center">
+            <RainbowButton variant="outline" className="w-fit">
+              Events Services
+            </RainbowButton>
+          </div>
+          <GridPattern strokeDasharray="4 2" className="-z-10" />
+        </div>
+        <div className="bg-[url(https://images.stockcake.com/public/1/3/a/13a0d24a-a714-43b5-b462-636017c01d60_large/grand-piano-interior-stockcake.jpg)] bg-cover bg-center text-white">
+          <div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px] backdrop-blur-[3px] backdrop-grayscale-50">
+            <TextAnimate
+              animation="blurInUp"
+              by="character"
+              as="h3"
+              className="text-xl font-bold text-center"
+            >
+              Employee Management
+            </TextAnimate>
+            <p>
+              Are you an orchestra looking to manage your musicians and staff
+              more effectively? Our platform offers comprehensive employee
+              management solutions designed specifically for orchestras.
+            </p>
+            <div className="flex justify-center">
+              <RainbowButton variant="outline" className="w-fit">
+                Employee Management Services
+              </RainbowButton>
+            </div>
+          </div>
+        </div>
+        <div className="relative flex flex-col gap-4 p-6 sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px]">
+          <h3 className="font-alex-brush text-2xl">Great Music LLM</h3>
+          <div className="flex flex-col gap-2">
+            <h4 className="font-bold">Services</h4>
+            <div className="flex flex-col gap-1">
+              <a
+                href="#"
+                className="text-gray-500 hover:text-gray-600 hover:underline"
+              >
+                Events
+              </a>
+              <a
+                href="#"
+                className="text-gray-500 hover:text-gray-600 hover:underline"
+              >
+                Employee Management
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <h4 className="font-bold">Company</h4>
+            <div className="flex flex-col gap-1">
+              <a
+                href="#"
+                className="text-gray-500 hover:text-gray-600 hover:underline"
+              >
+                Terms &amp; Conditions
+              </a>
+              <a
+                href="#"
+                className="text-gray-500 hover:text-gray-600 hover:underline"
+              >
+                Privacy Policy
+              </a>
+            </div>
+          </div>
+          <StripedPattern className="-z-10 text-gray-300" />
+        </div>
+        <div className="p-2 border-t">
+          <p className="text-center text-xs">
+            © 2025 Great Music LLM | All rights reserved.
           </p>
         </div>
       </main>

src/components/magicui/striped-pattern.tsx

@@ -0,0 +1,50 @@
+import React, { useId } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface StripedPatternProps extends React.SVGProps<SVGSVGElement> {
+  direction?: "left" | "right";
+}
+
+export function StripedPattern({
+  direction = "left",
+  className,
+  width = 10,
+  height = 10,
+  ...props
+}: StripedPatternProps) {
+  const id = useId();
+  const w = Number(width);
+  const h = Number(height);
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 z-10 h-full w-full stroke-[0.5]",
+        className,
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <defs>
+        <pattern id={id} width={w} height={h} patternUnits="userSpaceOnUse">
+          {direction === "left" ? (
+            <>
+              <line x1="0" y1={h} x2={w} y2="0" stroke="currentColor" />
+              <line x1={-w} y1={h} x2="0" y2="0" stroke="currentColor" />
+              <line x1={w} y1={h} x2={w * 2} y2="0" stroke="currentColor" />
+            </>
+          ) : (
+            <>
+              <line x1="0" y1="0" x2={w} y2={h} stroke="currentColor" />
+              <line x1={-w} y1="0" x2="0" y2={h} stroke="currentColor" />
+              <line x1={w} y1="0" x2={w * 2} y2={h} stroke="currentColor" />
+            </>
+          )}
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+    </svg>
+  );
+}

src/components/navbar/navbar.tsx

@@ -1,14 +1,16 @@
+import { RainbowButton } from "../ui/rainbow-button";
+
 export function Navbar() {
   return (
     <nav className="flex justify-between items-center p-4 px-6 shadow-md">
       <h1 className="text-2xl font-bold font-alex-brush">Great Music LLM</h1>
       <div className="hidden sm:flex gap-2">
-        <button className="bg-blue-500 text-white px-4 py-2 rounded">
-          Button 1
-        </button>
-        <button className="bg-green-500 text-white px-4 py-2 rounded">
-          Button 2
-        </button>
+        <RainbowButton variant="outline" className="w-fit">
+          Events Services
+        </RainbowButton>
+        <RainbowButton variant="outline" className="w-fit">
+          Employee Management Services
+        </RainbowButton>
       </div>
     </nav>
   );

src/components/ui/grid-pattern.tsx

@@ -0,0 +1,70 @@
+import { useId } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface GridPatternProps extends React.SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  squares?: Array<[x: number, y: number]>;
+  strokeDasharray?: string;
+  className?: string;
+  [key: string]: unknown;
+}
+
+export function GridPattern({
+  width = 40,
+  height = 40,
+  x = -1,
+  y = -1,
+  strokeDasharray = "0",
+  squares,
+  className,
+  ...props
+}: GridPatternProps) {
+  const id = useId();
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
+        className,
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path
+            d={`M.5 ${height}V.5H${width}`}
+            fill="none"
+            strokeDasharray={strokeDasharray}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+      {squares && (
+        <svg x={x} y={y} className="overflow-visible">
+          {squares.map(([x, y]) => (
+            <rect
+              strokeWidth="0"
+              key={`${x}-${y}`}
+              width={width - 1}
+              height={height - 1}
+              x={x * width + 1}
+              y={y * height + 1}
+            />
+          ))}
+        </svg>
+      )}
+    </svg>
+  );
+}