first commit

next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        domains: ['images.unsplash.com', 'res.cloudinary.com']
+    }
+};
 
 export default nextConfig;

package.json

@@ -9,18 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.3.28",
+    "mini-svg-data-uri": "^1.4.4",
+    "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.5"
+    "simplex-noise": "^4.0.3",
+    "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.5"
+    "typescript": "^5"
   }
 }

src/app/contact/page.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import React, { FormEvent, useState } from 'react';
+import { BackgroundBeams } from '@/components/ui/background-beams';
+
+function MusicSchoolContactUs() {
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    console.log('Submitted:', { email, message });
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 pt-36 relative">
+      {' '}
+      {/* Ensure the container is relative */}
+      {/* BackgroundBeams with adjusted z-index */}
+      <BackgroundBeams className="absolute top-0 left-0 w-full h-full z-0" />
+      {/* Content with higher z-index */}
+      <div className="max-w-2xl mx-auto p-4 relative z-10">
+        {' '}
+        {/* Add relative and z-10 to bring content to the front */}
+        <h1 className="text-lg md:text-7xl text-center font-sans font-bold mb-8 text-white">
+          Contact Us
+        </h1>
+        <p className="text-neutral-500 max-w-lg mx-auto my-2 text-sm text-center">
+          We&apos;re here to help with any questions about our courses,
+          programs, or events. Reach out and let us know how we can assist you
+          in your musical journey.
+        </p>
+        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Your email address"
+            className="rounded-lg border border-neutral-800 focus:ring-2 focus:ring-teal-500 w-full p-4 bg-neutral-950 placeholder:text-neutral-700"
+            required
+          />
+          <textarea
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Your message"
+            className="rounded-lg border border-neutral-800 focus:ring-2 focus:ring-teal-500 w-full p-4 bg-neutral-950 placeholder:text-neutral-700"
+            rows={5}
+            required
+          ></textarea>
+          <button
+            type="submit"
+            className="px-6 py-2 rounded-lg bg-teal-500 text-white font-medium hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2"
+          >
+            Send Message
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default MusicSchoolContactUs;

src/app/course/page.tsx

@@ -0,0 +1,61 @@
+'use client'
+import Image from "next/image";
+import React from "react";
+import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";
+import courseData from "@/data/music_courses.json"
+
+function page() {
+  return (
+    <div className="min-h-screen bg-black py-12 pt-36">
+        <h1 className="text-lg md:text-7xl text-center font-sans font-bold mb-8 text-white">All courses ({courseData.courses.length})</h1>  
+        <div className="flex flex-wrap justify-center">
+            {courseData.courses.map((course) => (
+                <CardContainer className="inter-var m-4">
+                <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
+                  <CardItem
+                    translateZ="50"
+                    className="text-xl font-bold text-neutral-600 dark:text-white"
+                  >
+                    {course.title}
+                  </CardItem>
+                  <CardItem
+                    as="p"
+                    translateZ="60"
+                    className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+                  >
+                    {course.description}
+                  </CardItem>
+                  <CardItem translateZ="100" className="w-full mt-4">
+                    <Image
+                      src={course.image}
+                      height="1000"
+                      width="1000"
+                      className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
+                      alt={course.title}
+                    />
+                  </CardItem>
+                  <div className="flex justify-between items-center mt-20">
+                    <CardItem
+                      translateZ={20}
+                      as="button"
+                      className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
+                    >
+                      Try now →
+                    </CardItem>
+                    <CardItem
+                      translateZ={20}
+                      as="button"
+                      className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
+                    >
+                      Sign up
+                    </CardItem>
+                  </div>
+                </CardBody>
+              </CardContainer>
+            ))}
+        </div>  
+    </div>
+  )
+}
+
+export default page

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import NavBar from "@/components/NavBar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -15,8 +16,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" className="dark">
+
+      <body className={inter.className}>
+          <div className="relative flex justify-center items-center w-full">
+            <NavBar />
+          </div>
+          {children}
+
+      </body>
     </html>
   );
 }