Add docker support

.env.example

@@ -0,0 +1 @@
+LOCAL_PORT=3000

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:alpine AS build
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD [ "nginx", "-g", "daemon off;" ]

README.md

@@ -1,6 +1,6 @@
 # BCDigital Code Challenge
 
-My submission to the code challenge from [BCDigial](https://www.bc-digital.ca/)
+My submission to the code challenge from [BCDigital](https://www.bc-digital.ca/)
 
 Landing page for hypthetical client **Great Music LLM**'s event and employee management software
 
@@ -12,3 +12,4 @@ Landing page for hypthetical client **Great Music LLM**'s event and employee man
 - [`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
+- [Docker](https://www.docker.com/) containerization

docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  nginx:
+    build: .
+    ports:
+      - "${LOCAL_PORT}:80"
+    restart: always

nginx.conf

@@ -0,0 +1,7 @@
+server {
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+}

src/app.tsx

@@ -20,14 +20,14 @@ export function App() {
           <div className="h-full text-white flex items-center justify-center backdrop-blur-[3px] backdrop-grayscale-50">
             <div className="flex flex-col gap-16 items-center text-center">
               <div className="flex flex-col gap-4 items-center">
-                <h2 className="text-4xl font-bold">
+                <h2 className="text-4xl font-bold sm:text-6xl">
                   <AuroraText>Orchestral</AuroraText> Event Management
                 </h2>
                 <TextAnimate
                   animation="blurInUp"
                   by="character"
                   as="h3"
-                  className="text-xl"
+                  className="text-xl sm:text-3xl"
                 >
                   Without The Hassle
                 </TextAnimate>
@@ -36,12 +36,12 @@ export function App() {
             </div>
           </div>
         </div>
-        <div className="relative overflow-hidden py-5 flex flex-col gap-5">
+        <div className="relative overflow-hidden py-5 flex flex-col gap-5 sm:py-10">
           <TextAnimate
             animation="blurInUp"
             by="character"
             as="h3"
-            className="text-xl font-bold text-center"
+            className="text-xl font-bold text-center sm:text-3xl"
           >
             Our Partners
           </TextAnimate>
@@ -50,37 +50,37 @@ export function App() {
           <DotPattern className="-z-10" />
         </div>
         <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">
+          <div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] backdrop-blur-[5px] backdrop-grayscale-25  sm:py-10">
             <TextAnimate
               animation="blurInUp"
               by="character"
               as="h3"
-              className="text-xl font-bold text-center"
+              className="text-xl font-bold text-center sm:text-3xl"
             >
               About Us
             </TextAnimate>
-            <p>
+            <p className="sm:text-lg">
               We are dedicated to simplifying orchestral event management
               through innovative solutions tailored to the unique needs of
               orchestras and their audiences.
             </p>
-            <p>
+            <p className="sm:text-lg">
               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]">
+        <div className="relative flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] backdrop-blur-[6px] sm:py-10">
           <TextAnimate
             animation="blurInUp"
             by="character"
             as="h3"
-            className="text-xl font-bold text-center"
+            className="text-xl font-bold text-center sm:text-3xl"
           >
             Events
           </TextAnimate>
-          <p>
+          <p className="sm:text-lg">
             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.
@@ -93,16 +93,16 @@ export function App() {
           <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">
+          <div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] backdrop-blur-[3px] backdrop-grayscale-50 sm:py-10">
             <TextAnimate
               animation="blurInUp"
               by="character"
               as="h3"
-              className="text-xl font-bold text-center"
+              className="text-xl font-bold text-center sm:text-3xl"
             >
               Employee Management
             </TextAnimate>
-            <p>
+            <p className="sm:text-lg">
               Are you an orchestra looking to manage your musicians and staff
               more effectively? Our platform offers comprehensive employee
               management solutions designed specifically for orchestras.
@@ -114,37 +114,39 @@ export function App() {
             </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="relative flex flex-col gap-4 p-6 sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] sm:py-10 sm:flex-row sm:justify-around">
+          <h3 className="font-alex-brush text-2xl sm:text-3xl">
+            Great Music LLM
+          </h3>
           <div className="flex flex-col gap-2">
-            <h4 className="font-bold">Services</h4>
+            <h4 className="font-bold text-lg sm:text-xl">Services</h4>
             <div className="flex flex-col gap-1">
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-600 hover:underline"
+                className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
               >
                 Events
               </a>
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-600 hover:underline"
+                className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
               >
                 Employee Management
               </a>
             </div>
           </div>
           <div className="flex flex-col gap-2">
-            <h4 className="font-bold">Company</h4>
+            <h4 className="font-bold text-lg sm:text-xl">Company</h4>
             <div className="flex flex-col gap-1">
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-600 hover:underline"
+                className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
               >
                 Terms &amp; Conditions
               </a>
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-600 hover:underline"
+                className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
               >
                 Privacy Policy
               </a>

src/components/ui/dot-pattern.tsx

@@ -122,7 +122,7 @@ export function DotPattern({
           <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
         </radialGradient>
       </defs>
-      {dots.map((dot, index) => (
+      {dots.map((dot) => (
         <motion.circle
           key={`${dot.x}-${dot.y}`}
           cx={dot.x}

src/components/ui/marquee.tsx

@@ -46,7 +46,7 @@ export function Marquee({
     <div
       {...props}
       className={cn(
-        "group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
+        "group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
         {
           "flex-row": !vertical,
           "flex-col": vertical,
@@ -59,11 +59,11 @@ export function Marquee({
         .map((_, i) => (
           <div
             key={i}
-            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+            className={cn("flex shrink-0 justify-around gap-(--gap)", {
               "animate-marquee flex-row": !vertical,
               "animate-marquee-vertical flex-col": vertical,
-              "group-hover:[animation-play-state:paused]": pauseOnHover,
-              "[animation-direction:reverse]": reverse,
+              "group-hover:paused": pauseOnHover,
+              "direction-[reverse]": reverse,
             })}
           >
             {children}