tailwind added, primereact framework working as expected, added dummy carousels

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ['fakestoreapi.com'],
+  },
 }
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "plebdevs",
+  "name": "plebdevs-new",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -16,7 +16,10 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "autoprefixer": "^10.0.1",
     "eslint": "^8",
-    "eslint-config-next": "14.0.4"
+    "eslint-config-next": "14.0.4",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/courses/CoursesCarousel.js

@@ -0,0 +1,72 @@
+
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+
+export default function BasicDemo() {
+    const [courses, setCourses] = useState([
+        {
+            "title": "Lightning Wallet Frontend",
+            "description": "Write your first code and learn Frontend from scratch to build a simple lightning wallet using HTML/CSS, Javascript, and React",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdev2_750__422_px_1200__630_px.jpg',
+            "price": 45000
+        },
+        {
+            "title": "Lightning Wallet Backend",
+            "description": "Learn Backend from scratch and build a simple Lightning Wallet backend with a server, API, Database, and Lightning node using NodeJS",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdevs-thumbnail.png',
+            "price": 70000
+        },
+        {
+            "title": "Lightning Wallet Frontend",
+            "description": "Write your first code and learn Frontend from scratch to build a simple lightning wallet using HTML/CSS, Javascript, and React",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdev2_750__422_px_1200__630_px.jpg',
+            "price": 45000
+        },
+        {
+            "title": "Lightning Wallet Backend",
+            "description": "Learn Backend from scratch and build a simple Lightning Wallet backend with a server, API, Database, and Lightning node using NodeJS",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdevs-thumbnail.png',
+            "price": 70000
+        },
+        {
+            "title": "Lightning Wallet Frontend",
+            "description": "Write your first code and learn Frontend from scratch to build a simple lightning wallet using HTML/CSS, Javascript, and React",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdev2_750__422_px_1200__630_px.jpg',
+            "price": 45000
+        },
+        {
+            "title": "Lightning Wallet Backend",
+            "description": "Learn Backend from scratch and build a simple Lightning Wallet backend with a server, API, Database, and Lightning node using NodeJS",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdevs-thumbnail.png',
+            "price": 70000
+        }
+    ]);
+
+    const productTemplate = (course) => {
+        return (
+            <div className="flex flex-col items-center w-full px-4">
+                <div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg">
+                    <img src={course.thumbnail} alt={course.title} className="w-full h-full object-cover object-center" />
+                </div>
+                <div className='text-center'>
+                    <h4 className="mb-1 text-center">{course.title}</h4>
+                    <h6 className="mt-0 mb-3 text-center">{course.price} sats</h6>
+                    <div className="flex flex-row items-center justify-center gap-2">
+                        <Button icon="pi pi-search" rounded />
+                        <Button icon="pi pi-star-fill" rounded severity="success" />
+                    </div>
+                </div>
+            </div>
+        );
+    };    
+
+    return (
+        <>
+            <h1 className="text-2xl font-bold ml-[6%] my-4">Courses</h1>
+            <Carousel value={courses} numVisible={3}  itemTemplate={productTemplate} />
+        </>
+    )
+}
+        

src/components/navbar/Navbar.js

@@ -11,6 +11,7 @@ const end = (
         label="Login"
         icon="pi pi-user"
         className="p-button-rounded text-white"
+        severity='primary'
     />
 );
 
@@ -29,7 +30,7 @@ const start = (
 
 const Navbar = () => {
     return (
-        <Menubar start={start} end={end} />
+        <Menubar start={start} end={end} className='px-[5%]' />
     );
 };
 

src/components/navbar/navbar.module.css

@@ -3,6 +3,8 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    padding-left: 6%;
+    padding-right: 6%;
 }
 
 .logo {

src/components/resources/ResourcesCarousel.js

@@ -0,0 +1,72 @@
+
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+
+export default function ResourcesCarousel() {
+    const [courses, setCourses] = useState([
+        {
+            "title": "Lightning Wallet Frontend",
+            "description": "Write your first code and learn Frontend from scratch to build a simple lightning wallet using HTML/CSS, Javascript, and React",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdev2_750__422_px_1200__630_px.jpg',
+            "price": 45000
+        },
+        {
+            "title": "Lightning Wallet Backend",
+            "description": "Learn Backend from scratch and build a simple Lightning Wallet backend with a server, API, Database, and Lightning node using NodeJS",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdevs-thumbnail.png',
+            "price": 70000
+        },
+        {
+            "title": "Lightning Wallet Frontend",
+            "description": "Write your first code and learn Frontend from scratch to build a simple lightning wallet using HTML/CSS, Javascript, and React",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdev2_750__422_px_1200__630_px.jpg',
+            "price": 45000
+        },
+        {
+            "title": "Lightning Wallet Backend",
+            "description": "Learn Backend from scratch and build a simple Lightning Wallet backend with a server, API, Database, and Lightning node using NodeJS",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdevs-thumbnail.png',
+            "price": 70000
+        },
+        {
+            "title": "Lightning Wallet Frontend",
+            "description": "Write your first code and learn Frontend from scratch to build a simple lightning wallet using HTML/CSS, Javascript, and React",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdev2_750__422_px_1200__630_px.jpg',
+            "price": 45000
+        },
+        {
+            "title": "Lightning Wallet Backend",
+            "description": "Learn Backend from scratch and build a simple Lightning Wallet backend with a server, API, Database, and Lightning node using NodeJS",
+            "thumbnail": 'https://emeralize.s3.amazonaws.com/course/cover_images/plebdevs-thumbnail.png',
+            "price": 70000
+        }
+    ]);
+
+    const productTemplate = (course) => {
+        return (
+            <div className="flex flex-col items-center w-full px-4">
+                <div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg">
+                    <img src={course.thumbnail} alt={course.title} className="w-full h-full object-cover object-center" />
+                </div>
+                <div className='text-center'>
+                    <h4 className="mb-1 text-center">{course.title}</h4>
+                    <h6 className="mt-0 mb-3 text-center">{course.price} sats</h6>
+                    <div className="flex flex-row items-center justify-center gap-2">
+                        <Button icon="pi pi-search" rounded />
+                        <Button icon="pi pi-star-fill" rounded severity="success" />
+                    </div>
+                </div>
+            </div>
+        );
+    };    
+
+    return (
+        <>
+            <h1 className="text-2xl font-bold ml-[6%] my-4">Resources</h1>
+            <Carousel value={courses} numVisible={3}  itemTemplate={productTemplate} />
+        </>
+    )
+}
+        

src/pages/_app.js

@@ -1,10 +1,12 @@
 import { PrimeReactProvider } from 'primereact/api';
-// import '@/styles/globals.css'
+import Navbar from '@/components/navbar/Navbar';
-import 'primereact/resources/themes/lara-dark-purple/theme.css';
+import '@/styles/globals.css'
+import 'primereact/resources/themes/lara-dark-indigo/theme.css';
 
 export default function MyApp({ Component, pageProps }) {
     return (
         <PrimeReactProvider>
+            <Navbar />
             <Component {...pageProps} />
         </PrimeReactProvider>
     );

src/pages/index.js

@@ -1,7 +1,6 @@
 import Head from 'next/head'
-import styles from '@/styles/Home.module.css'
+import CoursesCarousel from '@/components/courses/CoursesCarousel'
-import Navbar from '@/components/navbar/Navbar'
+import ResourcesCarousel from '@/components/resources/ResourcesCarousel'
-
 
 export default function Home() {
   return (
@@ -12,8 +11,9 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className={`${styles.main}`}>
+      <main>
-        <Navbar />
+        <CoursesCarousel />
+        <ResourcesCarousel />
       </main>
     </>
   )

src/styles/Home.module.css

@@ -1,226 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: var(--max-width);
-  width: 100%;
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}

src/styles/globals.css

@@ -1,107 +1,10 @@
-:root {
+@layer tailwind-base, primereact, tailwind-utilities;
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
 
-  --foreground-rgb: 0, 0, 0;
+@layer tailwind-base {
-  --background-start-rgb: 214, 219, 220;
+  @tailwind base;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
 }
 
-@media (prefers-color-scheme: dark) {
+@layer tailwind-utilities {
-  :root {
+  @tailwind components;
-    --foreground-rgb: 255, 255, 255;
+  @tailwind utilities;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
 }

tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+}