About and Contact Page

src/app/about/about.module.css

@@ -0,0 +1,5 @@
+.imgContainer {
+    position: relative;
+    width: 100%;
+    height: 500px;
+}

src/app/about/page.jsx

@@ -0,0 +1,14 @@
+import Image from "next/image"
+import styles from "./about.module.css"
+
+function AboutPage() {
+  return (
+    <div>
+      <div className={styles.imgContainer}>
+        <Image src="/about.png" alt="About" fill/>
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage

src/app/admin/page.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function AdminPage() {
+  return (
+    <div>AdminPage</div>
+  )
+}
+
+export default AdminPage

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function SinglePostPage() {
+  return (
+    <div>SinglePostPage</div>
+  )
+}
+
+export default SinglePostPage

src/app/blog/blog.module.css

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

src/app/blog/layout.js

@@ -0,0 +1,10 @@
+const BlogLayout = ({children}) => {
+    return (
+        <div>
+            <h1>This is the Blog Layout</h1>
+            {children}
+        </div>
+    );
+};
+
+export default BlogLayout;

src/app/blog/page.jsx

@@ -0,0 +1,11 @@
+import styles from './blog.module.css'
+
+function BlogPage() {
+  return (
+    <div className={styles.container}>
+
+    </div>
+  )
+}
+
+export default BlogPage

src/app/contact/contact.module.css

@@ -0,0 +1,45 @@
+.container{
+    display: flex;
+    gap: 100px;
+    align-items: center;
+}
+
+.imgContainer{
+    flex: 1;
+    position: relative;
+    height: 500px;
+}
+
+.img{
+    object-fit: contain;
+}
+
+.formContainer{
+    flex: 1;
+
+}
+
+.form{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.form input, .form textarea {
+    padding: 20px;
+    border-radius: 5px;
+    border: none;
+    outline: none;
+    background-color: var(--bgSoft);
+    color: var(--text);
+}
+
+.form button{
+    padding: 20px;
+    background-color: var(--btn);
+    color: var(--text);
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}

src/app/contact/page.jsx

@@ -0,0 +1,24 @@
+import styles from './contact.module.css'
+import Image from 'next/image'
+
+function ContactPage() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.imgContainer}>
+        <Image src="/contact.png" alt="" fill className={styles.img}/>
+      </div>
+      <div className={styles.formContainer}>
+        <form action=""  className={styles.form}>
+          <input placeholder='First Name' type='text'></input>
+          <input placeholder='Email' type='text'></input>
+          <input placeholder='Phone Number (optional)' type='text'></input>
+          <textarea name="" cols="30" rows="10" placeholder='Message'></textarea>
+          <button>Send</button>
+        </form>
+      </div>
+
+    </div>
+  )
+}
+
+export default ContactPage

src/app/error.jsx

@@ -0,0 +1,12 @@
+'use client'
+import React from 'react';
+const Error = ({ statusCode }) => {
+    return (
+        <div>
+            <h1>Error {statusCode}</h1>
+            <p>Oops! Something went wrong.</p>
+        </div>
+    );
+};
+
+export default Error;

src/app/globals.css

@@ -0,0 +1,77 @@
+:root {
+  --bg: #0d0c22;
+  --bgSoft: #2d2b42;
+  --text: white;
+  --textSoft: #e5e5e5;
+  --btn: #3673fd;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+body {
+    background-color: var(--bg);
+    color: var(--text);
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.container {
+    width: 1536px;
+    margin: auto;
+    padding-left: 50px;
+    padding-right: 50px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+@media (max-width: 1536px) {
+    .container {
+      width: 1366px;
+    }
+  }
+
+  @media (max-width: 1366px) {
+    .container {
+      width: 1280px;
+    }
+  }
+
+  @media (max-width: 1280px) {
+    .container {
+      width: 1024px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .container {
+      width: 768px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      width: 640px;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .container {
+      width: 475px;
+    }
+  }
+  @media (max-width: 475px) {
+    .container {
+      width: 380px;
+    }
+  }

src/app/home.module.css

@@ -0,0 +1,49 @@
+.container {
+    display: flex;
+    gap: 100px;
+}
+
+.textContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}
+
+.title{
+    font-size: 96px;
+}
+
+.desc{
+    font-size: 20px;
+}
+
+.buttons{
+    display: flex;
+    gap: 20px;
+}
+
+.button{
+    padding: 20px;
+    min-width: 120px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+}
+
+.button:first-child{
+    background-color: #7f3cd6;
+    color: white;
+}
+
+.imgContainer {
+    flex: 1;
+    position: relative;
+}
+
+.brands{
+    width: 500px;
+    height: 50px;
+    position: relative;
+    filter: grayscale(100%)
+}

src/app/layout.js

@@ -1,5 +1,7 @@
 import { Inter } from 'next/font/google'
 import './globals.css'
+import Navbar from "@/components/navbar/Navbar"
+import Footer from "@/components/footer/Footer"
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -11,7 +13,13 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <div className="container">
+          <Navbar />
+          {children}
+          <Footer />
+        </div>
+      </body>
     </html>
   )
 }

src/app/loading.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+const Loading = () => {
+    return (
+        <div>
+            <h1>Loading</h1>
+        </div>
+    );
+};
+
+export default Loading;

src/app/not-found.jsx

@@ -0,0 +1,12 @@
+import Link from 'next/link'
+const NotFound = () => {
+    return (
+        <div>
+            <h1>404 - Page Not Found</h1>
+            <p>The page you are looking for does not exist.</p>
+            <Link href="/">Return Home</Link>
+        </div>
+    );
+};
+
+export default NotFound;

src/app/page.jsx

@@ -1,5 +1,25 @@
+import styles from './home.module.css';
+import Image from 'next/image';
+
 const Home = () => {
-  return <div>Hello World!</div>;
+  return <div className={styles.container}>
+            <div className={styles.textContainer}>
+              <h1 className={styles.title}>Creative Thoughts Agency.</h1>
+              <p className={styles.desc}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum animi vitae quidem nostrum odit temporibus minima maiores odio numquam ullam vel provident quaerat voluptas, placeat, qui eos natus ipsa quam!
+              </p>
+              <div className={styles.buttons}>
+                <button className={styles.button}>Learn More</button>
+                <button className={styles.button}>Contact</button>
+              </div>
+              <div className={styles.brands}>
+                <Image src="/brands.png" alt="" fill className={styles.brandImg}/>
+              </div>
+            </div>
+            <div className={styles.imgContainer}>
+                <Image src="/hero.gif" alt="" fill className={styles.heroImg}/>
+              </div>
+        </div>;
 };
 
 export default Home;