initial commit

src/app/globals.css

@@ -2,26 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-color: black;
+  color: whitesmoke;
 }

src/app/page.jsx

@@ -0,0 +1,12 @@
+import ContAlbums from "@/components/ContAlbums";
+import ContPlaylists from "@/components/ContPlaylists";
+
+
+export default function Home() {
+  return (
+    <div className="min-h-screen pt-28 pl-32 pr-8 " >
+      <ContAlbums/>
+      <ContPlaylists />
+    </div>  
+  )
+}

src/components/Cards.jsx

@@ -0,0 +1,20 @@
+import { RiPlayFill } from "react-icons/ri"
+
+function Cards(props) {
+    return (
+        <div className="bg-black rounded-lg p-4 mx-2  hover:cursor-pointer hover:bg-[#282828] transition-all group " >
+        <div className= " mb-4 relative " >
+            <img src={props.img} alt="Album {props.album} de Gojira" width="200" height="350"  className=" drop-shadow-2xl rounded-md shadow-xl mx-auto " />
+            <button className="p-3 text-xl  bg-[#1DB954] rounded-full text-[#101010] absolute right-2 bottom-1 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0 ease-out " >
+                <RiPlayFill/>
+                </button>
+        </div>
+        <div>
+              <h3 className="font-medium mb-2 text-lg text-gray-100" >{props.album}</h3>
+              <p className="text-sm text-gray-400 " >{props.data}</p>
+        </div>
+</div>
+      );
+}
+
+export default Cards;

src/components/ContAlbums.jsx

@@ -0,0 +1,22 @@
+import Cards from "./Cards";
+
+function ContAlbums() {
+
+    return ( 
+        <div className="mb-8" >
+            <div className="flex items-center mb-4 justify-between" >
+                <h2 className="hover:underline hover:cursor-pointer  font-bold text-gray-200 text-2xl ">Discography</h2>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6  " >
+                <Cards img='albumcovers/magma-gojira.jpeg' album='Magma' data='2016 - Album' />
+                <Cards img='albumcovers/mars-gojira.jpeg' album='From mars to sirius' data='2005 - Album' />
+                <Cards img='albumcovers/fortitude-gojira.jpeg' album='fortitude' data='2021 - Album' />
+                <Cards img='albumcovers/sauvage-gojira.jpg' album="L'Enfant Sauvage" data='2012 - Album' />
+                <Cards img='albumcovers/flesh-gojira.jpeg' album='The way of all flesh' data='2008 - Album' />
+                <Cards img='albumcovers/terra-gojira.jpeg' album='Terra Incognita' data='2001 - Album' />
+            </div>
+        </div>
+     );
+}
+
+export default ContAlbums;

src/components/ContPlaylists.jsx

@@ -0,0 +1,21 @@
+import Playlist from "./Playlist";
+
+function ContPlaylists() {
+    return ( 
+        <div className="mt-2 mb-4" >
+            <div className="flex items-center mt-2 mb-4 justify-between" >
+                <h2 className="text-gray-200 font-bold hover:underline hover:cursor-pointer text-2xl " >Featuring Gojira</h2>
+            </div>
+            <div className="grid grid-cols-1 md;grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 " >
+            <Playlist img='playlistCovers/thisIs.jpeg' alt='This is gojira' playlist='This is gojira' data='This is gojira. The essential tracks, all in one playlist.' />
+            <Playlist img='playlistCovers/radio.jpeg' alt='Gojira radio' playlist='Gojira Radio' data='By Spotify.' />
+            <Playlist img='playlistCovers/essentials.jpeg' alt='Metal Essentials' playlist='Metal Essentials' data='Want some metal? Better to start with the essentials. Cover: Metallica.' />
+            <Playlist img='playlistCovers/classics.jpeg' alt='00s Metal Classics' playlist='00s Metal Classics' data='The biggest metal songs of the 2000s. Cover: Slipknot.' />
+            <Playlist img='playlistCovers/heavy.jpeg' alt='Heavy Metal' playlist='Heavy Metal' data='Heavy Metal forever. Classics to brand new tracks, play it loud. Cover: Judas Priest.'  />
+            <Playlist img='playlistCovers/workout.jpeg' alt='Adrenaline Workout' playlist='Adrenaline Workout' data='If your workout doubles as an outleet for your agression, this is the playlist for you.'   />
+            </div>
+        </div>
+     );
+}
+
+export default ContPlaylists;

src/components/Playlist.jsx

@@ -0,0 +1,21 @@
+import { RiPlayFill } from "react-icons/ri"
+
+function Playlist(props) {
+    return ( 
+        <div className="bg-black rounded-lg p-4 mx-2  hover:cursor-pointer hover:bg-[#282828] transition-all group" >
+            <div className="relative mb-4" >
+                <img src={props.img} alt="{props.data}" width="200" height="350"  className=" drop-shadow-2xl rounded-md shadow-xl mx-auto "/>
+                <button className="p-3 text-xl  bg-[#1DB954] rounded-full text-[#101010] absolute right-2 bottom-1 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0 ease-out " >
+                <RiPlayFill/>
+                </button>
+            </div>
+            <div>
+                <h3 className="font-md mb-2 text-lg text-gray-100">{props.playlist}</h3>
+                <p className="text-sm text-gray-400" >{props.data}</p>
+            </div>
+        </div>
+     );
+}
+
+
+export default Playlist;