davblog

src/app/[slug]/page.jsx

@@ -0,0 +1,48 @@
+import Menu from '@/component/menu/Menu'
+import styles from './singlePage.module.css'
+import Image from 'next/image'
+import Comments from '@/component/comment/Comments'
+
+const SinglePage = () => {
+  return (
+    <div className={styles.container}>
+        <div className={styles.infoContainer}>
+            <div className={styles.textContainer}>
+                <h1 className={styles.title}>Lorem ipsum dolor sit amet consectetur.</h1>
+                <div className={styles.user}>
+                    <div className={styles.userImageContainer}>
+                      <Image src="/p1.jpeg" alt="" fill className={styles.avatar}/>
+                    </div>
+                    <div className={styles.userTextContainer}>
+                        <span className={styles.username}>John Doe</span>
+                        <span className={styles.date}>01.01.2024</span>
+                    </div>
+                </div>
+            </div>
+            <div className={styles.imageContainer}>
+                <Image src="/p1.jpeg" alt="" fill className={styles.image}/>
+            </div>
+        </div>
+        <div className={styles.content}>
+            <div className={styles.post}>
+                <div className={styles.description}> 
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus alias beatae nihil magnam earum deleniti tempora ipsum numquam nam, facilis, voluptatem suscipit aperiam sapiente ipsa, ad recusandae magni! Nemo, dicta?
+                </p>
+                 <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                </h2>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus alias beatae nihil magnam earum deleniti tempora ipsum numquam nam, facilis, voluptatem suscipit aperiam sapiente ipsa, ad recusandae magni! Nemo, dicta?
+                </p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus alias beatae nihil magnam earum deleniti tempora ipsum numquam nam, facilis, voluptatem suscipit aperiam sapiente ipsa, ad recusandae magni! Nemo, dicta?
+                </p>
+                </div>
+                <div className={styles.comment}>
+ . .               <Comments />
+                </div>
+            </div>
+             <Menu />
+        </div>
+    </div>
+  )
+}
+
+export default SinglePage

src/app/[slug]/singlePage.module.css

@@ -0,0 +1,74 @@
+.container{
+
+}
+
+.infoContainer{
+    display: flex;
+    align-items: center;
+    gap: 50px;
+}
+
+.textContainer{
+    flex:1;
+}
+
+.title{
+    font-size: 64px;
+    margin-bottom: 50px;
+}
+
+.user{
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.userImageContainer{
+    height: 50px;
+    width: 50px;
+    position: relative;
+
+}
+
+.username{
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.userTextContainer{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    color: var(--softTextColor);
+}
+
+ .avatar{
+    object-fit: cover;
+    border-radius: 50%;
+ }
+
+.imageContainer{
+     flex:1;
+     position: relative;
+     height: 350px;
+}
+
+.image{
+    object-fit: cover;
+}
+
+.content{
+    display: flex;
+    gap: 50px;
+}
+
+.post{
+    flex: 5;
+    margin-top: 60px;
+}
+
+.description p{
+    font-size: 20px;
+    font-weight: 300;
+    margin-bottom: 20px;
+}

src/app/about/aboutPage.module.css

@@ -0,0 +1,3 @@
+.container{
+
+}

src/app/about/page.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from "./aboutPage.module.css"
+
+
+const AboutPage = () => {
+  return (
+    <div>
+      About Page
+    </div>
+  )
+}
+
+export default AboutPage

src/app/blog/blogPage.module.css

@@ -0,0 +1,11 @@
+.title{
+   background-color: coral;
+   color: white;
+   padding: 5px 10px;
+   text-align: center;
+}
+
+.content{
+    display: flex;
+    gap: 50px;
+}

src/app/blog/page.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from "./blogPage.module.css"
+import CardList from '@/component/CardList/CardList'
+import Menu from '@/component/menu/Menu'
+
+const BlogPage = () => {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>Style Blog</h1>
+      <div className={styles.content}>
+        <CardList />
+        <Menu />
+      </div>
+    </div>
+  )
+}
+
+export default BlogPage
+

src/app/contact/contactPage.module.css

@@ -0,0 +1,3 @@
+.container{
+
+}

src/app/contact/page.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from "./contactPage.module.css"
+
+const ContactPage = () => {
+  return (
+    <div>ContactPage</div>
+  )
+}
+
+export default ContactPage

src/app/globals.css

@@ -0,0 +1,93 @@
+:root{
+    --bg: white;
+    --textColor:black;
+    --softBg:#f0f0f0;
+    ---softTextColor: #626262
+}
+
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body{
+    max-width: 100vw;
+    overflow-x: hidden;
+}
+
+a{
+    color: inherit;
+    text-decoration: none;
+}
+
+.dark{
+    --bg:#0f172a;
+    --textColor:#ddd;
+    --softBg:#1f273a;
+    --softTextColor:#a6a6a6;
+}
+
+.light{
+    --bg: white;
+    --textColor:black;
+    --softBg:#f0f0f0;
+    ---softTextColor: #626262
+}
+
+.container {
+    min-height: 100vh;
+    background-color: var(--bg);
+    color: var(--textColor);
+}
+
+.wrapper{
+    max-width: 1536px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 50px;
+    padding-right: 50px;
+
+}
+
+@media screen and (max-width: 1536px){
+    .wrapper{
+        max-width: 1280px;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}
+
+@media screen and (max-width: 1280px){
+    .wrapper{
+        max-width: 1024px;
+
+    }
+}
+
+@media screen and (max-width: 1024px){
+    .wrapper{
+        max-width: 768px;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
+@media screen and (max-width: 768px){
+    .wrapper{
+        max-width: 640px;
+    }
+}
+
+@media screen and (max-width: 640px){
+    .wrapper{
+        max-width: 475px;
+    }
+}
+
+
+@media screen and (max-width: 475px){
+    .wrapper{
+        max-width: 320px;
+    }
+}

src/app/homepage.module.css

@@ -0,0 +1,4 @@
+.content{
+    display: flex;
+    gap: 50px;
+}

src/app/layout.js

@@ -1,17 +1,33 @@
+import Navbar from '@/component/navbar/Navbar'
 import './globals.css'
 import { Inter } from 'next/font/google'
+import Footer from '@/component/footer/Footer'
+import { ThemeContextProvider } from '@/context/ThemeContext'
+import ThemeProvider from '@/component/providers/ThemeProvider'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'Blog App',
+  title: "David's Blog ",
   description: 'The best blog app!',
 }
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <ThemeContextProvider >
+          <ThemeProvider >
+        <div className="container">
+          <div className="wrapper">
+            <Navbar />
+            {children}
+            <Footer />
+            </div>
+        </div>
+          </ThemeProvider>
+        </ThemeContextProvider>
+      </body>
     </html>
   )
 }

src/app/page.jsx

@@ -1,5 +1,19 @@
+import Featured from "@/component/featured/Featured";
 import styles from "./homepage.module.css";
+import CategoryList from "@/component/CategoryList/CategoryList";
+import CardList from "@/component/CardList/CardList";
+import Menu from "@/component/menu/Menu";
 
 export default function Home() {
-  return <div>Hello</div>;
+  return (
+  <div className={styles.container}>
+    <Featured />
+    <CategoryList />
+      <div className={styles.content}>
+        <CardList />
+        <Menu />
+      </div>
+  </div>
+  );
 }
+

src/component/CardList/CardList.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import styles from "./cardList.module.css"
+import Pagination from '../pagination/Pagination'
+import Card from '../card/Card'
+
+const CardList = () => {
+  return (
+    <div className={styles.container}>
+       <h1 className={styles.title}>Recent Post</h1>
+       <div className={styles.posts}>
+        <Card />
+        <Card />
+        <Card />
+        <Card />
+       </div>
+       <Pagination />
+    </div>
+  )
+}
+
+export default CardList

src/component/CardList/cardList.module.css

@@ -0,0 +1,7 @@
+.container{
+    flex: 5;
+}
+
+.title{
+    margin: 50px 0px;
+}