Updated Home page

src/app/dashboard/layout.js

@@ -7,10 +7,11 @@ import { auth } from "../../../lib/firebase";
 import { useRouter } from "next/navigation";
 import { RefreshContext } from "@/context";
 import { UserContext } from "@/context";
+import Loading from "@/components/Loading/Loading";
 
 const layout = ({ children }) => {
   const [isLogin, setLogin] = useState(false);
-  const { setData } = useContext(UserContext);
+  const { setData, data } = useContext(UserContext);
   const { isRefresh, setRefresh } = useContext(RefreshContext);
   const redirect = useRouter();
 
@@ -50,7 +51,7 @@ const layout = ({ children }) => {
     });
   }, [isRefresh]);
 
-  return isLogin && <>{children}</>;
+  return isLogin && data.length > 0 ? <>{children}</> : <Loading />;
 };
 
 export default layout;

src/app/feedback/feedback.module.css

@@ -0,0 +1,12 @@
+.wrapper{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+}
+.wrapper h2{
+    text-align: center;
+    margin: 1rem;
+    font-weight: 300;
+}

src/app/feedback/page.js

@@ -0,0 +1,11 @@
+import styles from './feedback.module.css'
+
+const Feedback = () => {
+  return (
+    <div className={styles.wrapper}>
+      <h2>Apologies, but this page is currently inaccessible.</h2>
+    </div>
+  )
+}
+
+export default Feedback

src/app/page.js

@@ -1,48 +1,63 @@
 "use client";
 import styles from "./page.module.css";
-import Hero from "@/components/Header/Hero";
 import { SiTestrail } from "react-icons/si";
 import { MdOutlineSnippetFolder } from "react-icons/md";
+import { MdOutlineFeedback } from "react-icons/md";
 import Card from "@/components/UI/Card";
 import Footer from "@/components/Footer/Footer";
+import Image from "next/image";
+import img from "../../public/code.webp";
 
 export default function Home() {
-  const style = {
-    fontSize: "4rem",
-    color: "var(--text)",
-  };
   return (
     <>
-      <Hero />
-      <section className={styles.gs}>
-        <h1>
-          Getting <span>Started!</span>
-        </h1>
-        <p>
-          Ready to start coding? Getting going with CodeFramer is a snap! Our
-          user-friendly platform gives you instant code suggestions and
-          auto-completion to make your coding journey smoother. Whether you're a
-          pro or a beginner, CodeFramer's got your back. Start coding
-          effortlessly and explore the joy of collaborating in real-time. It's
-          easy, it's fast - let's code together with CodeFramer!
-        </p>
-        <div className={styles.cards}>
-          <Card
-            img=<MdOutlineSnippetFolder style={style} />
-            title="Sign In"
-            desc="Sign in to save and access your projects from any device, anywhere. Enjoy the flexibility to continue your creative work seamlessly, unlocking the ability to collaborate from wherever inspiration strikes."
-            linkT="Sign In"
-            link="/signin"
-          />
-          <Card
-            img=<SiTestrail style={style} />
-            title="Try Editor"
-            desc="Try our editor to experiment freely with features. Note that work won't be saved in try mode. Sign in for full functionality and secure storage of your creative projects, accessible from any device."
-            linkT="Go to Editor"
-            link="/try_editor"
+      <section className={styles.container}>
+        <div className={styles.wrapper}>
+          <span className={styles.span1}>Welcome&nbsp;to</span>
+          <h1>
+            Code<span>Framer</span>
+          </h1>
+          <p>
+            Welcome to CodeFramer, your go-to destination for seamless and
+            collaborative coding experiences! At CodeFramer, we understand the
+            dynamic nature of web development and the importance of having a
+            versatile online editor that caters to the needs of developers
+            working with HTML, CSS, JavaScript, and Python.
+          </p>
+        </div>
+        <div className={styles.imageWrapper}>
+          <Image
+            src={img}
+            className={styles.img}
+            alt="image"
+            width={550}
+            height={550}
           />
         </div>
       </section>
+      <div className={styles.cards}>
+        <Card
+          img=<MdOutlineSnippetFolder className={styles.cardLogo} />
+          title="Sign In"
+          desc="Sign in to save and access your projects from any device, anywhere. Enjoy the flexibility to continue your creative work seamlessly, unlocking the ability to collaborate from wherever inspiration strikes."
+          linkT="Sign In"
+          link="/signin"
+        />
+        <Card
+          img=<SiTestrail className={styles.cardLogo} />
+          title="Try Editor"
+          desc="Try our editor to experiment freely with features. Note that work won't be saved in try mode. Sign in for full functionality and secure storage of your creative projects, accessible from any device."
+          linkT="Go to Editor"
+          link="/try_editor"
+        />
+        <Card
+          img=<MdOutlineFeedback className={styles.cardLogo} />
+          title="Feedback"
+          desc="We appreciate your feedback on our code editor website. Your input helps us improve and tailor the platform to better serve your needs. Thank you for taking the time to share your thoughts with us!"
+          linkT="Write a feedback"
+          link="/feedback"
+        />
+      </div>
       <Footer />
     </>
   );

src/app/page.module.css

@@ -1,29 +1,55 @@
-.gs h1 {
-  font-size: 4rem;
+.container {
+  display: flex;
+  justify-content: center;
+  margin: 10rem 0 5rem;
+  gap: 2rem;
+}
+.wrapper {
+  width: 45vw;
+  display: flex;
+  flex-direction: column;
+}
+.wrapper .span1 {
+  margin: 0;
+  font-size: 2rem;
+}
+.wrapper h1 {
+  margin: 0;
+  font-size: 7vw;
   font-weight: 800;
-  text-align: center;
-  padding: 0 1rem;
 }
-.gs h1 span {
+.wrapper h1 span {
   color: var(--btn-primary);
 }
-
-.gs p {
-  padding: 0 25vw;
-  font-size: 1.2rem;
-  text-align: center;
+.wrapper p {
   color: var(--para);
+  font-size: 1.2rem;
+}
+.imageWrapper {
+  width: fit-content;
+}
+.img {
+  width: 400px;
+  height: 400px;
+  filter: drop-shadow(-0.5rem -0.5rem 20px rgb(24, 24, 24));
+}
+.imageWrapper::before {
+  content: "";
+  background: #007bff;
+  position: absolute;
+  right: 0;
+  width: 35%;
+  height: 60%;
+  rotate: 0;
+  filter: blur(300px);
 }
-
 .cards {
-  margin: 4rem 0;
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2rem;
+  margin-bottom: 5rem;
 }
-
 .cards::before {
   content: "";
   height: 15%;
@@ -34,25 +60,46 @@
   background: var(--gradient);
   filter: blur(80px);
 }
-
-@media (max-width: 1000px) {
-  .gs p {
-    padding: 0 15vw;
-  }
+.cardLogo{
+  color: var(--text);
+  font-size: 3rem;
 }
 @media (max-width: 900px) {
+  .container {
+    margin: 8rem 0;
+  }
+  .img {
+    width: 300px;
+    height: 300px;
+  }
+  .wrapper h1 {
+    font-size: 3.5rem;
+  }
+  .wrapper .span1 {
+    font-size: 1.5rem;
+  }
+  .wrapper p {
+    font-size: 1rem;
+  }
   .cards {
     flex-direction: column;
   }
 }
 @media (max-width: 768px) {
-  .gs h1 {
-    font-size: 3rem;
+  .container {
+    margin: 4rem 0;
   }
-  .gs p {
-    padding: 0 10vw;
+  .imageWrapper {
+    display: none;
   }
-  .cards {
-    flex-direction: column;
+  .wrapper {
+    width: fit-content;
+    text-align: center;
   }
-}
+  .wrapper p{
+    width: 85vw;
+  }
+  .cardLogo{
+    display: none;
+  }
+}

src/components/Footer/Footer.js

@@ -18,7 +18,7 @@ function Footer() {
           <Link href="/signin" className={styles.link}>
             Sign In
           </Link>
-          <Link href="/" className={styles.link}>
+          <Link href="/feedback" className={styles.link}>
             Feedback
           </Link>
         </div>