diff --git a/apps/landing/app/coming-soon/page.tsx b/apps/landing/app/coming-soon/page.tsx new file mode 100644 index 0000000..f9e55c9 --- /dev/null +++ b/apps/landing/app/coming-soon/page.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import Link from 'next/link' + +export default function ComingSoon() { + return ( +
+

Coming Soon!

+ Back to Home +
+ ) +} diff --git a/apps/landing/app/not-found.tsx b/apps/landing/app/not-found.tsx new file mode 100644 index 0000000..f1b64e7 --- /dev/null +++ b/apps/landing/app/not-found.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import Link from 'next/link' + +export default function NotFound() { + return ( +
+

404 - Page Not Found

+

The page you are looking for does not exist.

+ Back to Home +
+ ) +} diff --git a/apps/landing/app/page.tsx b/apps/landing/app/page.tsx index bcc7ebb..9d2dcaa 100644 --- a/apps/landing/app/page.tsx +++ b/apps/landing/app/page.tsx @@ -1,39 +1,20 @@ import React from "react"; -import ThemeToggler from "../components/theme/theme-toggler"; - -import Link from "next/link"; -import { Button } from "@repo/ui"; -import Image from "next/image"; +import { Header } from "../components/landing/header/header"; +import { Home } from "../components/landing/home/home"; +import { Features } from "../components/landing/features/features"; +import { FAQ } from "../components/landing/faq/faq"; +import { Footer } from "../components/landing/footer/footer"; export default function App() { return (
- {/* Header */} -
-
- CoBrain Logo - CoBrain -
-
- - - - - - - -
-
- - {/* Main Content */} -
-

- Welcome to CoBrain -

-

- CoBrain is a platform for mental health and wellness. -

+
+
+ + +
+
); } diff --git a/apps/landing/components/auth/auth-card.tsx b/apps/landing/components/auth/auth-card.tsx index 9620d74..02e39f7 100644 --- a/apps/landing/components/auth/auth-card.tsx +++ b/apps/landing/components/auth/auth-card.tsx @@ -24,10 +24,12 @@ export function AuthCard({
Auth Background {imageOverlay && (
{imageOverlay}
diff --git a/apps/landing/components/landing/faq/accordion.tsx b/apps/landing/components/landing/faq/accordion.tsx new file mode 100644 index 0000000..3079eda --- /dev/null +++ b/apps/landing/components/landing/faq/accordion.tsx @@ -0,0 +1,101 @@ +"use client"; + +import { useState } from "react"; +import { motion, AnimatePresence } from "motion/react"; +import { cn } from "@repo/ui"; + +interface AccordionItemProps { + question: string; + answer: string; + isOpen: boolean; + onClick: () => void; +} + +const AccordionItem = ({ + question, + answer, + isOpen, + onClick, +}: AccordionItemProps) => { + return ( +
+ + + {isOpen && ( + +
+ {answer} +
+ + )} + +
+ ); +}; + +interface AccordionProps { + items: { question: string; answer: string }[]; +} + +export const Accordion = ({ items }: AccordionProps) => { + const [openIndex, setOpenIndex] = useState(null); + + const handleItemClick = (index: number) => { + setOpenIndex(openIndex === index ? null : index); + }; + + return ( +
+ {items.map((item, index) => ( + handleItemClick(index)} + /> + ))} +
+ ); +}; diff --git a/apps/landing/components/landing/faq/faq.tsx b/apps/landing/components/landing/faq/faq.tsx new file mode 100644 index 0000000..3915697 --- /dev/null +++ b/apps/landing/components/landing/faq/faq.tsx @@ -0,0 +1,28 @@ +import { Capsule } from "@repo/ui"; +import { Accordion } from "./accordion"; +import content from "../../../content/landing.json"; + +export const FAQ = () => { + return ( +
+ {/* Subtle background decoration */} +
+ +
+
+ +

+ {content.faq.title} +

+

+ {content.faq.description} +

+
+ +
+
+ ); +}; diff --git a/apps/landing/components/landing/features/features.tsx b/apps/landing/components/landing/features/features.tsx new file mode 100644 index 0000000..70665dc --- /dev/null +++ b/apps/landing/components/landing/features/features.tsx @@ -0,0 +1,51 @@ +import { Capsule } from "@repo/ui"; +import { cn } from "@repo/ui"; +import content from "../../../content/landing.json"; + +export const Features = () => { + return ( +
+
+
+
+ +
+

+ {content.features.main_title} +

+

+ {content.features.description} +

+
+
+
+ {content.features.list.map((feature, idx) => ( +
+
+
+ {feature.name} +
+
+ {feature.description} +
+
+
+ ))} +
+
+
+
+ ); +}; diff --git a/apps/landing/components/landing/footer/footer.tsx b/apps/landing/components/landing/footer/footer.tsx new file mode 100644 index 0000000..2aa8fa6 --- /dev/null +++ b/apps/landing/components/landing/footer/footer.tsx @@ -0,0 +1,70 @@ +import Link from "next/link"; +import Image from "next/image"; +import { Button } from "@repo/ui"; +import { logo } from "@assets"; +import content from "../../../content/landing.json"; + +export const Footer = () => { + return ( +
+
+
+ {/* Logo & Info */} +
+
+ CoBrain Logo + + CoBrain + +
+

+ {content.footer.description} +

+ + + +
+ + {/* Spacer for desktop */} +
+ + {/* Socials Column */} +
+

Socials

+ +
+
+ + {/* Bottom Bar */} +
+

+ {content.footer.all_rights_reserved} ©{" "} + {new Date().getFullYear()} CoBrain +

+

+ {content.footer.copyright} +

+
+
+
+ ); +}; diff --git a/apps/landing/components/landing/header/header.tsx b/apps/landing/components/landing/header/header.tsx new file mode 100644 index 0000000..0d7302b --- /dev/null +++ b/apps/landing/components/landing/header/header.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import Image from "next/image"; +import { useScroll, useMotionValueEvent, motion } from "motion/react"; +import { Button } from "@repo/ui"; +import { Menu, X } from "lucide-react"; +import ThemeToggler from "../../theme/theme-toggler"; +import { NavDesktop } from "./nav-desktop"; +import { NavMobile } from "./nav-mobile"; +import { cn } from "@repo/ui"; +import { logo } from "@assets"; + +const navItems = [ + { name: "Home", href: "#home" }, + { name: "Features", href: "#features" }, + { name: "FAQ", href: "#faq" }, +]; + +export const Header = () => { + const { scrollY } = useScroll(); + const [isScrolled, setIsScrolled] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + + useMotionValueEvent(scrollY, "change", (latest) => { + setIsScrolled(latest > 0); + }); + + return ( + +
+ {/* Logo */} + + CoBrain Logo + + CoBrain + + + + {/* Desktop Nav */} +
+ +
+ + {/* Right Side (Desktop) */} +
+ + + + +
+ + {/* Mobile Actions */} +
+ + +
+
+ + {/* Mobile Nav */} + setIsMobileMenuOpen(false)} + /> + + ); +}; diff --git a/apps/landing/components/landing/header/nav-desktop.tsx b/apps/landing/components/landing/header/nav-desktop.tsx new file mode 100644 index 0000000..31cbde7 --- /dev/null +++ b/apps/landing/components/landing/header/nav-desktop.tsx @@ -0,0 +1,37 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { cn } from "@repo/ui"; + +interface NavItem { + name: string; + href: string; +} + +interface NavDesktopProps { + navItems: NavItem[]; +} + +export const NavDesktop = ({ navItems }: NavDesktopProps) => { + const pathname = usePathname(); + + return ( + + ); +}; diff --git a/apps/landing/components/landing/header/nav-mobile.tsx b/apps/landing/components/landing/header/nav-mobile.tsx new file mode 100644 index 0000000..f1eec1b --- /dev/null +++ b/apps/landing/components/landing/header/nav-mobile.tsx @@ -0,0 +1,57 @@ +import { motion, AnimatePresence } from "motion/react"; +import Link from "next/link"; +import { Button } from "@repo/ui"; +import { cn } from "@repo/ui"; + +interface NavItem { + name: string; + href: string; +} + +interface NavMobileProps { + navItems: NavItem[]; + isOpen: boolean; + onClose: () => void; +} + +export const NavMobile = ({ navItems, isOpen, onClose }: NavMobileProps) => { + return ( + + {isOpen && ( + + + + )} + + ); +}; diff --git a/apps/landing/components/landing/home/home.tsx b/apps/landing/components/landing/home/home.tsx new file mode 100644 index 0000000..7b434fc --- /dev/null +++ b/apps/landing/components/landing/home/home.tsx @@ -0,0 +1,53 @@ +import { Button } from "@repo/ui"; +import Link from "next/link"; +import content from "../../../content/landing.json"; + +export const Home = () => { + return ( +
+
+ {/* Linear Gradient */} +
+
+
+ +
+

+ {content.home.title} +

+

+ {content.home.description} +

+
+ + + + + + +
+
+
+ ); +}; diff --git a/apps/landing/content/landing.json b/apps/landing/content/landing.json new file mode 100644 index 0000000..7867f04 --- /dev/null +++ b/apps/landing/content/landing.json @@ -0,0 +1,62 @@ +{ + "home": { + "title": "Amplify your intelligence.", + "description": "CoBrain is a smart knowledge management app that helps you capture, organize, and reuse everything you care about — links, tweets, code, and thoughts — all structured into brains, slices, and memos you can access anytime.", + "buttons": { + "primary": "Get Started", + "secondary": "Access Brain" + } + }, + "features": { + "section_title": "Build your second brain", + "main_title": "Organize knowledge, your way", + "description": "Store anything, structure it with slices and memos, and keep your knowledge private or share it effortlessly.", + "list": [ + { + "name": "Store Anything", + "description": "Save text notes, important links, tweets, documents, code snippets, and todo lists in one place." + }, + { + "name": "Slices & Memos", + "description": "Divide your brain into slices (categories) and use memos to neatly store and manage related information." + }, + { + "name": "Share or Stay Private", + "description": "Keep your brain private or share specific slices with anyone using a simple link." + }, + { + "name": "Edit Anytime", + "description": "Update, delete, or add new brains to a slice whenever your knowledge evolves." + } + ] + }, + "faq": { + "capsule_title": "Support", + "title": "Frequent Questions", + "description": "Everything you need to know about CoBrain. Can't find what you're looking for? Reach out to us.", + "items": [ + { + "question": "What is CoBrain?", + "answer": "CoBrain is a personal knowledge management app designed to act as your second brain." + }, + { + "question": "What can I store?", + "answer": "Text, links, tweets, documents, videos, code snippets, and todo lists." + }, + { + "question": "Can I share my brain?", + "answer": "Yes, you can share individual slices or keep everything private." + } + ] + }, + "footer": { + "description": "CoBrain is a smart knowledge management app that helps you capture, organize, and reuse everything you care about.", + "socials": [ + { "label": "X", "href": "https://x.com/orcatwt" }, + { "label": "LinkedIn", "href": "https://www.linkedin.com/in/dhanush27/" }, + { "label": "Portfolio", "href": "http://dhanush.tech/" } + ], + "copyright": "Made by Dhanush", + "all_rights_reserved": "All Rights Reserved 2026" + } +} diff --git a/apps/landing/public/logo.png b/apps/landing/public/logo.png deleted file mode 100644 index 011a5da..0000000 Binary files a/apps/landing/public/logo.png and /dev/null differ diff --git a/bun.lockb b/bun.lockb index 92f20b1..c925e32 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/assets/index.ts b/packages/assets/index.ts index fd9ee43..a608191 100644 --- a/packages/assets/index.ts +++ b/packages/assets/index.ts @@ -1,3 +1 @@ -export { default as logo } from './logo.png'; - - +export { default as logo } from "./public/logo.png"; diff --git a/packages/assets/logo.png b/packages/assets/logo.png deleted file mode 100644 index 76cdfea..0000000 Binary files a/packages/assets/logo.png and /dev/null differ diff --git a/packages/tailwind-config/theme.css b/packages/tailwind-config/theme.css index 32ac3ef..6b64cc9 100644 --- a/packages/tailwind-config/theme.css +++ b/packages/tailwind-config/theme.css @@ -51,6 +51,8 @@ --color-surface-elevated: var(--color-neutral-50); --color-surface-hover: var(--color-neutral-100); + --color-surface-muted: var(--color-arctic-powder); + /* Borders */ --color-border: var(--color-mystic-mint); --color-border-muted: var(--color-arctic-powder); @@ -117,6 +119,11 @@ ======================================== */ --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05); + + --color-home-1: var(--color-oceanic-noir); + --color-home-2: var(--color-nocturnal-expedition); + --color-home-3: var(--color-mystic-mint); + --color-home-4: var(--color-arctic-powder); } @@ -376,6 +383,8 @@ --color-surface-elevated: hsl(201 40% 30%); --color-surface-hover: hsl(201 40% 35%); + --color-surface-muted: var(--color-oceanic-noir); + /* Borders */ --color-border: var(--color-mystic-mint); --color-border-muted: var(--color-oceanic-noir); @@ -383,7 +392,7 @@ /* Muted & Accent */ --color-muted: var(--color-nocturnal-expedition); - --color-muted-foreground: var(--color-neutral-400); + --color-muted-foreground: var(--color-neutral-300); --color-accent: var(--color-mystic-mint); --color-accent-foreground: var(--color-oceanic-noir); @@ -426,7 +435,9 @@ --button-texted-pressed-bg: var(--color-mystic-mint); --button-hover-text: var(--color-oceanic-noir); /* Contrast on Mystic Mint */ - - + --color-home-1: var(--color-arctic-powder); + --color-home-2: var(--color-mystic-mint); + --color-home-3: var(--color-nocturnal-expedition); + --color-home-4: var(--color-oceanic-noir); } } \ No newline at end of file diff --git a/packages/ui/src/components/button/icon-button.tsx b/packages/ui/src/components/button/icon-button.tsx index 7c5cf55..dac97fe 100644 --- a/packages/ui/src/components/button/icon-button.tsx +++ b/packages/ui/src/components/button/icon-button.tsx @@ -43,7 +43,7 @@ export const IconButton = forwardRef( )} size="icon" // passed to satisfy underlying requirements or effectively ignored due to className overrides icon={Icon} - iconClassName="h-6 w-6" + iconClassName="h-5 w-5" {...props} /> ); diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 3b5eb8f..e19c7f2 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -2,3 +2,4 @@ export * from "./components/button"; export * from "./components/card"; export * from "./components/input"; export * from "./components/capsule-message/capsule"; +export * from "./lib/utils";