complete

app/components/Footer.tsx

@@ -0,0 +1,73 @@
+"use client"
+import Link from "next/link"
+
+function Footer() {
+    return (
+      <footer className="bg-black text-gray-400 py-12">
+          <div className="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 px-4 sm:px-6 lg:px-8">
+          <div>
+            <h2 className="text-white text-lg font-semibold mb-4">About Us</h2>
+            <p className="mb-4">
+              Music School is a premier institution dedicated to teaching the art
+              and science of music. We nurture talent from the ground up,
+              fostering a vibrant community of musicians.
+            </p>
+          </div>
+          <div>
+            <h2 className="text-white text-lg font-semibold mb-4">Quick Links</h2>
+            <ul>
+              <li>
+                <Link href={'/'}className="hover:text-white transition-colors duration-300"> Home
+                </Link>
+              </li>
+              <li>
+              <Link href={'/about'}className="hover:text-white transition-colors duration-300"> About
+                </Link>
+              </li>
+              <li>
+              <Link href={'/courses'}className="hover:text-white transition-colors duration-300"> Courses
+                </Link>
+              </li>
+              <li>
+              <Link href={'/contact'}className="hover:text-white transition-colors duration-300"> Contact Us
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h2 className="text-white text-lg font-semibold mb-4">Follow Us</h2>
+            <div className="flex space-x-4">
+              <a
+                href="#"
+                className="hover:text-white transition-colors duration-300"
+              >
+                Facebook
+              </a>
+              <a
+                href="#"
+                className="hover:text-white transition-colors duration-300"
+              >
+                Twitter
+              </a>
+              <a
+                href="#"
+                className="hover:text-white transition-colors duration-300"
+              >
+                Instagram
+              </a>
+            </div>
+          </div>
+          <div>
+            <h2 className="text-white text-lg font-semibold mb-4">Contact Us</h2>
+            <p>Islamabad Pakistan</p>
+            <p>Dha Phase 1</p>
+            <p>Email: [email protected]</p>
+            <p>Phone: (92) 3175037080</p>
+          </div>
+          </div>
+          <p className="text-center text-xs pt-8">© 2024 Music School. All rights reserved.</p>
+      </footer>
+    )
+  }
+
+  export default Footer

app/components/Navbar.tsx

@@ -38,8 +38,10 @@ function Navbar({ className }: { className?: string }) {
                 </HoveredLink>
             </div>
             </MenuItem>
-            <MenuItem setActive={setActive} active={active} item="Contact Us">
-          </MenuItem>
+            <Link href={"/contact"}>
+                <MenuItem setActive={setActive} active={active} item="Contact Us">
+                </MenuItem>
+            </Link>
         </Menu>
     </div>    
     </>

app/components/ui/3d-card.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { cn } from "@/app/utils/cn";
+import Image from "next/image";
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useRef,
+  useEffect,
+} from "react";
+
+const MouseEnterContext = createContext<
+  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
+>(undefined);
+
+export const CardContainer = ({
+  children,
+  className,
+  containerClassName,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isMouseEntered, setIsMouseEntered] = useState(false);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    const { left, top, width, height } =
+      containerRef.current.getBoundingClientRect();
+    const x = (e.clientX - left - width / 2) / 25;
+    const y = (e.clientY - top - height / 2) / 25;
+    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
+  };
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+    setIsMouseEntered(true);
+    if (!containerRef.current) return;
+  };
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    setIsMouseEntered(false);
+    containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;
+  };
+  return (
+    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
+      <div
+        className={cn(
+          "py-20 flex items-center justify-center",
+          containerClassName
+        )}
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <div
+          ref={containerRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          className={cn(
+            "flex items-center justify-center relative transition-all duration-200 ease-linear",
+            className
+          )}
+          style={{
+            transformStyle: "preserve-3d",
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </MouseEnterContext.Provider>
+  );
+};
+
+export const CardBody = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "h-96 w-96 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d]",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const CardItem = ({
+  as: Tag = "div",
+  children,
+  className,
+  translateX = 0,
+  translateY = 0,
+  translateZ = 0,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
+  ...rest
+}: {
+  as?: React.ElementType;
+  children: React.ReactNode;
+  className?: string;
+  translateX?: number | string;
+  translateY?: number | string;
+  translateZ?: number | string;
+  rotateX?: number | string;
+  rotateY?: number | string;
+  rotateZ?: number | string;
+  [key: string]: any;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isMouseEntered] = useMouseEnter();
+
+  useEffect(() => {
+    handleAnimations();
+  }, [isMouseEntered]);
+
+  const handleAnimations = () => {
+    if (!ref.current) return;
+    if (isMouseEntered) {
+      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+    } else {
+      ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;
+    }
+  };
+
+  return (
+    <Tag
+      ref={ref}
+      className={cn("w-fit transition duration-200 ease-linear", className)}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+// Create a hook to use the context
+export const useMouseEnter = () => {
+  const context = useContext(MouseEnterContext);
+  if (context === undefined) {
+    throw new Error("useMouseEnter must be used within a MouseEnterProvider");
+  }
+  return context;
+};

app/contact/page.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Footer from '../components/Footer'
+
+function page() {
+  return (
+    <div>
+        <div>
+            <h1 className=' mt-40 text-2xl md:text-4xl lg:text-7xl text-white font-bold text-center mb-8'>Contact Us</h1>
+            <form className='grid w-[100%] sm:grid-cols-12 grid-rows-1'>
+                <input type="email" placeholder='Enter your Email' className=' mr-2 p-1 col-start-4 col-end-10 mb-3 h-10 rounded text-black'/>
+                <textarea name="message" id="message" placeholder='Your complain/suggestion' className=' mr-2 p-1 text-start text-black col-start-4 col-end-10 mb-3 h-[250px] rounded'></textarea>
+                <button className=' col-start-6 col-end-8 mt-4 border-cyan-800 bg-slate-700 rounded-md font-bold h-8 hover:bg-gray-300 hover:text-black duration-300'>Submit</button>
+            </form>
+        </div>
+        <div className=' mt-4'>
+            <Footer/>
+        </div>
+    </div>
+  )
+}
+
+export default page

app/courses/page.tsx

@@ -0,0 +1,70 @@
+"use client"
+import React from 'react'
+import Footer from '../components/Footer'
+import CourseData from "../data/music_courses.json"
+import { CardBody, CardContainer, CardItem } from "../components/ui/3d-card";
+import Image from 'next/image';
+
+
+function page() {
+  return (
+    <div>
+        <div className=' mt-32'>
+        <h1 className='text-2xl md:text-4xl lg:text-5xl text-white font-bold text-center mb-8'>Total Courses {CourseData.courses.length}</h1>
+        </div>
+        <div className='grid grid-cols-1 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3'>
+            {CourseData.courses.map((data)=>(
+            <CardContainer className="inter-var">
+                <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-[20rem] h-auto rounded-xl p-6 border  ">
+                    <CardItem
+                    translateZ="50"
+                    className="text-xl font-bold text-neutral-600 dark:text-white"
+                    >
+                        {data.title}
+                    </CardItem>
+                    <CardItem
+                    as="p"
+                    translateZ="60"
+                    className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+                    >
+                    {data.description}
+                    </CardItem>
+                    <CardItem
+                    translateZ="100"
+                    rotateX={20}
+                    rotateZ={-10}
+                    className="w-full mt-4"
+                    >
+                    <Image src={data.image} width={1000} height={1000} alt={data.slug}/>
+                    </CardItem>
+                    <div className="flex justify-between items-center mt-20">
+                    <CardItem
+                        translateZ={20}
+                        translateX={-40}
+                        as="button"
+                        className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
+                    >
+                        <h1>Price : {data.price}$</h1>
+                    </CardItem>
+                    <CardItem
+                        translateZ={20}
+                        translateX={40}
+                        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 className=' mt-4'>
+            <Footer />
+        </div>
+    </div>
+  )
+}
+
+export default page

app/page.tsx

@@ -5,6 +5,7 @@ import WhyChooseUs from "./components/WhyChooseUs";
 import MusicSchoolCards from "./components/MusicSchoolCards";
 import UpcomingWebinars from "./components/UpcomingWebinars";
 import Instructor from "./components/Instructor";
+import Footer from "./components/Footer";
 
 export default function Home() {
   return (
@@ -15,6 +16,7 @@ export default function Home() {
       <MusicSchoolCards />
       <UpcomingWebinars />
       <Instructor />
+      <Footer />
     </>
   );
 }