-
+
About Us
diff --git a/components/Home/Benefits.jsx b/components/Home/Benefits.jsx
index 7c88348..70ce7b1 100644
--- a/components/Home/Benefits.jsx
+++ b/components/Home/Benefits.jsx
@@ -35,7 +35,7 @@ export default function Benefits() {
return (
-
+
Benefits
diff --git a/components/Home/Body.tsx b/components/Home/Body.tsx
index 234e7d0..140b207 100644
--- a/components/Home/Body.tsx
+++ b/components/Home/Body.tsx
@@ -1,160 +1,149 @@
-import React, { useEffect } from "react";
+import Image from "next/image";
+import { useEffect } from "react";
export default function Body() {
useEffect(() => {
function reveal() {
- var reveals = document.querySelectorAll(".showbody");
- for (var i = 0; i < reveals.length; i++) {
+ var headingleft = document.querySelectorAll(".headingleft");
+ var headingright = document.querySelectorAll(".headingright");
+ var heading = document.querySelectorAll(".revealtitle");
+ var paragraph = document.querySelectorAll(".paragraph");
+ for (var i = 0; i < headingleft.length; i++) {
var windowHeight = window.innerHeight;
- var elementTop = reveals[i]?.getBoundingClientRect().top;
+ var headingleftTop = headingleft[i].getBoundingClientRect().top;
var elementVisible = 150;
- if (elementTop < windowHeight - elementVisible) {
- reveals[i].classList.add("active");
+ if (headingleftTop < windowHeight - elementVisible) {
+ headingleft[i]?.classList.add("show");
+ headingright[i]?.classList.add("show");
}
}
- }
+ for (var j = 0; j < paragraph.length; j++) {
+ var windowHeight = window.innerHeight;
+ var paragraphTop = paragraph[j].getBoundingClientRect().top;
+ var elementVisible = 150;
+ if (paragraphTop < windowHeight - elementVisible) {
+ paragraph[j]?.classList.add("show");
+ }
+ }
+ for (var k = 0; k < heading.length; k++) {
+ var windowHeight = window.innerHeight;
+ var headingTop = heading[k].getBoundingClientRect().top;
+ var elementVisible = 150;
+ if (headingTop < windowHeight - elementVisible) {
+ heading[k]?.classList.add("show");
+ }
+ }
+ }
window.addEventListener("scroll", reveal);
}, []);
+
return (
-
-
-
Why OwnBoon?
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+
Why OwnBoon?
+
+ Elevate Your Self-Improvement Journey
-
-
-
-

+
+
+
-
-
- Lorem ipsum dolor sit amet consectetur
-
-
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi
- accusamus quo officiis nam.
Accusantium, reprehenderit harum
- et incidunt facilis, corporis provident velit modi numquam magni{" "}
-
- assumenda odit cumque culpa similique.
+
+
+ Supportive Community
+
+
+ OwnBoon provides a welcoming community of like-minded individuals
+ who are dedicated to personal growth and self-improvement. Connect
+ with others who share your goals, join specific group chats based on
+ your interests, and access a wealth of resources to help you on your
+ journey.
-
-
-
- Lorem ipsum dolor sit amet consectetur
-
-
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi
- accusamus quo officiis nam.
Accusantium, reprehenderit harum
- et incidunt facilis, corporis provident velit modi numquam magni{" "}
-
- assumenda odit cumque culpa similique.
+
+
+
+ Find Support and Encouragement
+
+
+ Whether you need advice or simply a listening ear, the OwnBoon
+ community is here to support you. Use the vent zone to share your
+ feelings and receive life advice, or connect with a gym buddy or
+ study partner to stay on track and motivated.
-
-

+
+
-
-
-
-

+
+
+
+
+
+
+
+ Grow Your Self-Improvement Journey
+
+
+ With OwnBoon, you'll have access to personalized roadmaps and
+ exclusive blog content on self-improvement and productivity. Stay
+ informed with the latest tips and techniques from top influencers
+ across different platforms and share your own progress and
+ experiences with a supportive community
+
-
-
- Lorem ipsum dolor sit amet consectetur
-
-
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi
- accusamus quo officiis nam.
Accusantium, reprehenderit harum
- et incidunt facilis, corporis provident velit modi numquam magni{" "}
-
- assumenda odit cumque culpa similique.
+
+
+
+
+ Boost Your Productivity
+
+
+ OwnBoon offers a variety of productivity tools, Focus Planet and
+ Lofi sessions, and an AI scheduler to help you stay organized and
+ focused. You can also access the right study techniques and tips
+ based on your mood to help you stay on track and improve your
+ workflow.
+
+
+
);
diff --git a/components/Home/Hero.jsx b/components/Home/Hero.jsx
index 8fc1702..a30afb4 100644
--- a/components/Home/Hero.jsx
+++ b/components/Home/Hero.jsx
@@ -1,8 +1,6 @@
-import { useRouter } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
export default function Hero() {
- const router = useRouter();
const [pc, setPc] = useState(true);
useEffect(() => {
function setInitialPositions() {
@@ -33,10 +31,12 @@ export default function Hero() {
-
-
+
+
Ignite your{" "}
- GROWTH
+
+ GROWTH
+
{pc && (
<>
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index 08fbf8a..9c4fc86 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -4,6 +4,8 @@ import Head from "next/head";
import Sidebar from "./Sidebar";
import Navbar from "./Navbar";
import { Goals, User } from "../../typings";
+import SidebarMobile from "./SidebarMobile";
+import Sidebarfix from "./Sidebarfix";
interface Props {
children?: ReactNode;
bgColor: string;
@@ -13,6 +15,7 @@ interface Props {
text: string;
border: string;
hasBg: Boolean;
+ bgBlur?: boolean;
setLoading?: (value: boolean) => void;
}
@@ -24,16 +27,12 @@ const Layout = ({
border,
hasBg,
users,
+ bgBlur,
goals,
setLoading,
}: Props) => {
const [showsidebar, setShowsidebar] = useState(false);
- const selectRandomBg = () => {
- const bgImages = ["lofi_1.png", "lofi_2.png", "lofi_3.png", "bg-6.png"];
- const random = 3;
- return bgImages[random];
- };
return (
-
{text} | OwnBoon
+
{text.charAt(0).toUpperCase() + text.slice(1)} | OwnBoon
-
-
+ {text == "Users" ? (
+
+
+
+ ) : (
+
+ )}
+
+
+
+ {hasBg && (
+
+
+
+
+ )}
{children}
diff --git a/components/Layout/Navbar.tsx b/components/Layout/Navbar.tsx
index 99842ec..9dfe3d2 100644
--- a/components/Layout/Navbar.tsx
+++ b/components/Layout/Navbar.tsx
@@ -47,18 +47,18 @@ const Navbar = ({
const todos = goals?.filter((goal) => goal.username == user?.username);
const filteredTodos =
search === "todos" ||
- search === "goals" ||
- search === "tod" ||
- search === "todo" ||
- search === "todos" ||
- search === "goa" ||
- search === "goal" ||
- search === "goals"
+ search === "goals" ||
+ search === "tod" ||
+ search === "todo" ||
+ search === "todos" ||
+ search === "goa" ||
+ search === "goal" ||
+ search === "goals"
? todos
: // @ts-ignore
- todos.filter((todos) =>
- todos.title?.toLowerCase().includes(search.toLowerCase())
- );
+ todos?.filter((todos) =>
+ todos.title?.toLowerCase().includes(search.toLowerCase())
+ );
const now = new Date();
useEffect(() => {
if (isLoaded) {
@@ -109,34 +109,38 @@ const Navbar = ({
/>
) : null}
-
-
-
-
{text}
+
+
+

+
+
+ {text.charAt(0).toUpperCase() + text.slice(1)}
+
setshowsearch(true)}
- className={`p-2 ${
- showsearch ? "hidden" : ""
- } rounded hover:brightness-150 fade hidden md:inline transition-all cursor-pointer`}
- src="search.svg"
+ className={`p-2 ${showsearch ? "hidden" : ""
+ } rounded hover:brightness-150 fade hidden md:inline transition-all cursor-pointer`}
+ src="/search.svg"
alt={"search"}
/>
{showsearch && (
@@ -195,8 +199,8 @@ const Navbar = ({
width={70}
onClick={() => togglenotification()}
height={70}
- className=" p-2 rounded hover:brightness-150 transition-all cursor-pointer"
- src="notification.svg"
+ className=" p-2 rounded ml-6 md:ml-0 hover:brightness-150 transition-all cursor-pointer"
+ src="/notification.svg"
alt={"notification"}
/>
@@ -205,8 +209,8 @@ const Navbar = ({
width={70}
onClick={() => togglenotification()}
height={70}
- className=" p-2 rounded hover:brightness-150 transition-all cursor-pointer"
- src="notification.svg"
+ className=" p-2 ml-6 md:ml-0 rounded hover:brightness-150 transition-all cursor-pointer"
+ src="/notification.svg"
alt={"notification"}
/>
)}
@@ -217,7 +221,7 @@ const Navbar = ({
onClick={() => togglenotification()}
height={70}
className=" p-2 rounded hover:brightness-150 transition-all cursor-pointer"
- src="notification.svg"
+ src="/notification.svg"
alt={"notification"}
/>
)}
diff --git a/components/Layout/Sidebar.tsx b/components/Layout/Sidebar.tsx
index c9d90d3..072707b 100644
--- a/components/Layout/Sidebar.tsx
+++ b/components/Layout/Sidebar.tsx
@@ -3,20 +3,32 @@ import Image from "next/image";
import { useRouter } from "next/router";
import Dialog from "../ChapterPopup/ChapterPopup";
import Link from "next/link";
+import { Box, Drawer, SwipeableDrawer } from "@mui/material";
interface Props {
border: string;
showsidebar: boolean;
setShowsidebar: (value: boolean) => void;
+ window?: () => Window;
}
+const drawerBleeding = 56;
+const Sidebar = ({ border, showsidebar, setShowsidebar, window }: Props) => {
+ const [open, setOpen] = React.useState(false);
+
+ const container =
+ window !== undefined ? () => window().document.body : undefined;
+
+ const toggleDrawer = (newOpen: boolean) => () => {
+ setOpen(newOpen);
+ };
-const Sidebar = ({ border, showsidebar, setShowsidebar }: Props) => {
const router = useRouter();
const selected =
"transition-all duration-50 sidebar brightness-150 w-fit cursor-pointer flex items-center gap-y-8 gap-x-4 text-white";
const normal =
"w-fit cursor-pointer sidebar brightness-[-50] flex items-center text-gray-400 gap-y-8 gap-x-4";
const [showBuddyModal, setShowBuddyModal] = React.useState(false);
+ const [showFeedbackModal, setShowFeedbackModal] = React.useState(false);
const [showChatsModal, setShowChatsModal] = useState(false);
const [showSocialsModal, setShowSocialsModal] = useState(false);
@@ -24,204 +36,214 @@ const Sidebar = ({ border, showsidebar, setShowsidebar }: Props) => {
setShowsidebar(true)}
onMouseLeave={() => setShowsidebar(false)}
- className="w-0"
+ className={`h-screen transition-all group hidden md:inline-flex lg:inline-flex fixed z-50 duration-[2000] p-[3px] md:p-2 lg:p-2 border-r-2 border-[#3a3a3b] w-[60px] md:w-[80px] lg:w-[90px]
+ hover:w-[240px] bg-[#101010]
+ text-[#FFFFFF] text-[15px] flex-col items-start justify-between `}
>
-
-
-
-

+
+

+
+ OwnBoon
+
+
+
+ router.push("/socials")}
+ className={router.pathname == "/socials" ? selected : normal}
+ >
+
-
- OwnBoon
-
-
-
-
router.push("/socials")}
- className={router.pathname == "/socials" ? selected : normal}
- >
-
-
-
+ {showsidebar && (
+
Socials
-
- router.push("/chats")}
- className={router.pathname == "/chats" ? selected : normal}
- >
-
-
+ )}
+
+ router.push("/chats")}
+ className={router.pathname == "/chat" ? selected : normal}
+ >
+
+ {showsidebar && (
+
Chats
-
- setShowBuddyModal(true)}
- // onClick={() => router.push("/buddies")}
- className={router.pathname == "/buddies" ? selected : normal}
- >
-
-
+ )}
+
+ setShowBuddyModal(true)}
+ // onClick={() => router.push("/buddies")}
+ className={router.pathname == "/buddies" ? selected : normal}
+ >
+
+ {showsidebar && (
+
Buddies
-
- router.push("/workspace")}
- className={router.pathname == "/workspace" ? selected : normal}
- >
-
-
+ )}
+
+
+
+ {showsidebar && (
+
Workspace
-
- router.push("/roadmap")}
- className={router.pathname == "/roadmap" ? selected : normal}
- >
-
-
- Roadmap
-
-
- router.push("/lofi")}
- className={router.pathname == "/lofi" ? selected : normal}
- >
-
-
- Lofi
+ )}
+
+
+
+ {showsidebar && (
+
+ Roadmaps
-
-
-
+ )}
+
+
router.push("/lofi")}
+ className={router.pathname == "/lofi" ? selected : normal}
+ >
-
- Feedback
-
+ {showsidebar && (
+
+ Lofi
+
+ )}
-
- {/*