Merge pull request #2 from SweetmanTech/sweets/landing

I init basic LandingCard.

components/LandingCard/LandingCard.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import Image from "next/image"
+import Link from "next/link"
+
+const LandingCard = ({ title, img = "/images/landing/web3.jpg", href }) => (
+  <Link href={href}>
+    <a className="relative w-[500px] h-[333px] p-4 flex flex-col items-center justify-center">
+      <div className="absolute inset-0 z-0">
+        <Image
+          src={img}
+          alt={title}
+          layout="fill"
+          objectFit="cover"
+          objectPosition="center"
+          placeholder="blur"
+          blurDataURL={img}
+        />
+      </div>
+      <div className="absolute inset-0 bg-black opacity-75" />
+      <div className="absolute top-2 left-2 z-20">
+        <p className="text-white text-xs">CCTV</p>
+      </div>
+      <div className="absolute top-2 right-2 z-20 flex items-center">
+        <div className="w-3 h-3 bg-red-500 rounded-full mr-2" />
+        <p className="text-white text-xs mr-2">REC</p>
+        <div className="w-4 h-4 bg-gray-300 rounded-sm" />
+      </div>
+      <div className="absolute bottom-2 left-2 z-20">
+        <p className="text-white text-xs">12:12PM Miami, FL</p>
+      </div>
+      <div className="absolute bottom-2 right-2 z-20">
+        <p className="text-white text-xs">12/12/2023</p>
+      </div>
+      <div className="relative z-10 p-6">
+        <h2 className="text-white text-5xl font-bold mb-2">{title}</h2>
+      </div>
+    </a>
+  </Link>
+)
+
+export default LandingCard

components/LandingCard/index.tsx

@@ -0,0 +1,3 @@
+import LandingCard from "./LandingCard"
+
+export default LandingCard

components/Pages/LandingPage.tsx

@@ -0,0 +1,16 @@
+import LandingCard from "../LandingCard"
+
+const LandingPage = () => (
+  <div className="flex flex-col gap-3 justify-center items-center h-screen bg-black text-white font-dresden">
+    <div className="flex flex-wrap gap-3 justify-center items-center w-full">
+      <LandingCard title="ABOUT" img="/images/landing/about.jpg" href="/about" />
+      <LandingCard title="MUSIC" img="/images/landing/music.jpg" href="/music" />
+    </div>
+    <div className="flex flex-wrap gap-3 justify-center items-center w-full">
+      <LandingCard title="WEB 3" img="/images/landing/webThree.jpg" href="/web3" />
+      <LandingCard title="PRESS" img="/images/landing/press.jpg" href="/press" />
+    </div>
+  </div>
+)
+
+export default LandingPage

pages/about/index.tsx

@@ -0,0 +1,5 @@
+import LandingPage from "../../components/Pages/LandingPage"
+
+const About = () => <LandingPage />
+
+export default About

pages/index.tsx

@@ -1,7 +1,5 @@
-const Landing = () => (
-  <div className="flex flex-col justify-center items-center h-[100vh] text-white font-dresden text-7xl">
-    HENO.
-  </div>
-)
+import LandingPage from "../components/Pages/LandingPage"
+
+const Landing = () => <LandingPage />
 
 export default Landing

pages/music/index.tsx

@@ -0,0 +1,5 @@
+import LandingPage from "../../components/Pages/LandingPage"
+
+const Music = () => <LandingPage />
+
+export default Music

pages/press/index.tsx

@@ -0,0 +1,5 @@
+import LandingPage from "../../components/Pages/LandingPage"
+
+const Press = () => <LandingPage />
+
+export default Press

pages/web3/index.tsx

@@ -0,0 +1,5 @@
+import LandingPage from "../../components/Pages/LandingPage"
+
+const Web3 = () => <LandingPage />
+
+export default Web3