MainFixed

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}

next.config.js

@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    images: {
+        remotePatterns: [{
+            protocol: 'https',
+            hostname: "images.pexels.com"
+        }]
 
-module.exports = nextConfig
+
+
+    }
+}
+
+
+module.exports = nextConfig

package.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.4"
+    "link": "^2.1.0",
+    "next": "^14.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "eslint": "^8",

src/app/(auth)/login/page.jsx

@@ -0,0 +1,6 @@
+const LoginPage = () => {
+return ( 
+    <div className="">LoginPage</div>);
+
+}
+export default LoginPage

src/app/about/about.module.css

@@ -0,0 +1,60 @@
+.container {
+    display: flex;
+    gap: 100px;
+}
+
+.textContainer {
+    display: flex;
+    flex: 1px;
+    flex-direction: column;
+    gap: 45px;
+}
+
+.title {
+    font-size: 54px;
+    gap: 10px;
+}
+
+.box {
+    display: flex;
+    flex-direction: column;
+}
+
+.box h1 {
+    color: var(--btn);
+}
+
+.desc {
+    font-size: 15px;
+    font-weight: 300;
+}
+
+.subtitle {
+    color: var(--btn);
+}
+
+.imgContainer {
+    flex: 1;
+    position: relative;
+}
+
+.boxes {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.img {
+    object-fit: contain;
+}
+
+@media(max-width: 768px) {
+    .container {
+        flex-direction: column;
+        text-align: center;
+    }
+    .boxes {
+        flex-direction: column;
+        gap: 50px;
+    }
+}

src/app/about/page.jsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+import styles from './about.module.css'
+
+const AboutPage = () => {
+return ( 
+    <div className= {styles.container}>
+<div className={styles.textContainer}>
+    <h2 className={styles.subtitle}>About Agency</h2>
+    <h1 className={styles.title}>Life doesn’t require that we be the best, only that we try our best</h1>
+    <p className={styles.desc}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quidem aperiam deserunt autem? Nulla quasi non odio dicta animi repellat natus, ducimus eum quas hic voluptatum vitae, voluptas debitis voluptate.
+    Totam porro sint itaque natus consectetur nostrum modi eaque autem maxime cumque blanditiis obcaecati tempora sapiente sequi molestias, officiis error exercitationem. Obcaecati quia velit reprehenderit quos at, quaerat rerum cumque!
+    Nam fugiat officiis provident.</p>
+    <div className={styles.boxes}>
+<div className={styles.box}>
+    <h1>10 K+</h1>
+    <p>Year of experience</p>
+</div>
+<div className={styles.box}>
+    <h1>10 K+</h1>
+    <p>Year of experience</p>
+</div>
+<div className={styles.box}>
+    <h1>10 K+</h1>
+    <p>Year of experience</p>
+</div>
+</div>
+
+</div>
+
+<div className={styles.imgContainer}>
+<Image src="/about.png" fill alt="About Image" className={styles.img}></Image>
+</div>
+
+    </div>
+
+    );
+
+}
+export default AboutPage

src/app/admin/page.jsx

@@ -0,0 +1,6 @@
+const AdminPage = () => {
+return ( 
+    <div className="">AdminPage</div>);
+
+}
+export default AdminPage

src/app/blog/[slug]/layout.jsx

@@ -0,0 +1,9 @@
+const BlogLayout = ({children}) => {
+    return ( 
+        <div className="">
+            {/* <h2>  This is the Blog Layout</h2> */}
+            {children}
+            </div>
+            )
+    }
+    export default BlogLayout

src/app/blog/[slug]/page.jsx

@@ -0,0 +1,37 @@
+import styles from "./singlePost.module.css";
+import Image from "next/image";
+const SingleBlogPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.imgContainer}>
+        <Image
+          src="https://images.pexels.com/photos/15580802/pexels-photo-15580802/free-photo-of-woman-holding-flowers-and-looking-at-her-boyfriend.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+          fill
+          className={styles.img}
+        ></Image>
+      </div>
+      <div className={styles.textContainer}>
+        <h1 className={styles.title}>Title</h1>
+        <div className={styles.detail}>
+          <Image
+            src="https://images.pexels.com/photos/7490540/pexels-photo-7490540.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+            width={50} height={50}
+            className={styles.avatar}
+          ></Image>
+          <div className={styles.detailText}>
+            <span className={styles.detailTitle}>Author</span>
+            <span className={styles.detailValue}>John Weasley</span>
+          </div>
+          <div className={styles.detailText}>
+            <span className={styles.detailTitle}>Published</span>
+            <span className={styles.detailValue}>01.01.2024</span>
+          </div>
+        </div>
+        <div className={styles.content}>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum adipisci quasi laboriosam ullam ipsum blanditiis harum sunt sequi dolorem odit? Veniam illo non aliquam odit ea. Praesentium quibusdam laudantium hic.
+          </div>
+      </div>
+    </div>
+  );
+};
+export default SingleBlogPage;

src/app/blog/[slug]/singlePost.module.css

@@ -0,0 +1,61 @@
+.container {
+    display: flex;
+    gap: 100px;
+}
+
+.img {
+    object-fit: cover;
+}
+
+.imgContainer {
+    flex: 1;
+    position: relative;
+    /* height: calc(100vh - 200px); */
+}
+
+.textContainer {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}
+
+.title {
+    font-size: 54px;
+}
+
+.detail {
+    display: flex;
+    /* flex-direction: column; */
+    gap: 20px;
+}
+
+.avatar {
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.detailText {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.detailTitle {
+    color: gray;
+    font-weight: bold;
+}
+
+.detailValue {
+    font-weight: 500;
+}
+
+.content {
+    font-size: 20px;
+}
+
+@media (max-width: 768px) {
+    .imgContainer {
+        display: none;
+    }
+}

src/app/blog/blog.module.css

@@ -0,0 +1,21 @@
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.post {
+    width: 20%;
+}
+
+@media screen and (max-width: 1280px) {
+    .post {
+        width: 45%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .post {
+        width: 100%;
+    }
+}

src/app/blog/page.jsx

@@ -0,0 +1,24 @@
+import PostCard from "@/components/postCard/postCard";
+import styles from "./blog.module.css";
+const BlogPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+      <div className={styles.post}>
+      <PostCard></PostCard>
+      </div>
+    </div>
+  );
+};
+export default BlogPage;