Skip to content

📝 Add docstrings to feat/docs-and-branding #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
coderabbitai wants to merge 1 commit into from
Closed

📝 Add docstrings to feat/docs-and-branding #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions frontend/src/components/Layout/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import { Link } from 'react-router-dom';
import { Github, ArrowRight, Database } from 'lucide-react';
import { ADMIN_EMAIL } from '../../config';

/**
* Renders the site footer with branding, product/connect navigation, a newsletter input, social links, legal text, and a large decorative background wordmark.
*
* The component is presentational and includes responsive styles for desktop and mobile layouts.
* @returns {JSX.Element} The footer element containing the footer layout and embedded styles.
*/
export default function Footer() {
return (
<footer className="modern-footer">
Expand All @@ -12,9 +18,8 @@ export default function Footer() {

{/* Brand / Newsletter Column */}
<div className="footer-brand-col">
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '1rem' }}>
<Database size={24} color="var(--color-primary)" />
<span style={{ fontSize: '1.2rem', fontWeight: 700, color: '#fff' }}>urBackend</span>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
<img src="/urBACKEND_NAV_LOGO (2).png" alt="urBackend Logo" style={{ height: '80px', width: 'auto' }} />
</div>
<p style={{ color: 'var(--color-text-muted)', marginBottom: '1.5rem', maxWidth: '300px' }}>
The instant Backend-as-a-Service for frontend developers. Ship faster.
Expand Down
12 changes: 11 additions & 1 deletion frontend/src/components/Layout/MainLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,18 @@ import { useLocation, matchPath } from 'react-router-dom';
import Sidebar from './Sidebar';
import Header from './Header';
import ProjectNavbar from './ProjectNavbar';
import logoImage from '../../assets/logo_u.png';
// Use the new official logo from public directory
const logoImage = "/urBACKEND_NAV_LOGO (2).png";

/**
* App shell that renders the global sidebar, header, or a project-specific navbar and places page content.
*
* Renders a mobile overlay and global sidebar/header when not on a project route; renders a project navbar and a full-width main area when the current path matches `/project/:projectId/*`. Adjusts top padding and content padding for project routes and for paths that include `/database`.
*
* @param {object} props - Component props.
* @param {import('react').ReactNode} props.children - The page content to render inside the layout.
* @returns {JSX.Element} The composed layout element containing navigation and the provided children.
*/
function MainLayout({ children }) {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const location = useLocation();
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/components/Layout/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,15 @@ import {
ArrowLeft, FileText, UserCog, LogOut, X, Rocket // Import Rocket
} from 'lucide-react';

/**
* Render the application's sidebar with navigation links for either project-specific modules or general pages.
*
* @param {Object} props
* @param {string} props.logo - URL or import for the logo image shown when no project is selected.
* @param {boolean} props.isOpen - Whether the sidebar is open on mobile (adds mobile-open class when true).
* @param {Function} props.onClose - Callback invoked to close the sidebar (used for mobile navigation and the header close button).
* @returns {JSX.Element} The sidebar React element.
*/
function Sidebar({ logo, isOpen, onClose }) { // Props received
const location = useLocation();
const { projectId } = useParams();
Expand All @@ -27,8 +36,7 @@ function Sidebar({ logo, isOpen, onClose }) { // Props received
</Link>
) : (
<div style={{ display: 'flex', alignItems: 'center' }}>
<img src={logo} alt="Logo" style={{ height: '24px' }} />
<span className="sidebar-logo-text">urBackend</span>
<img src={logo} alt="urBackend Logo" style={{ height: '32px', width: 'auto' }} />
</div>
)}

Expand Down
44 changes: 25 additions & 19 deletions frontend/src/pages/LandingPage/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,13 @@ import { motion as Motion } from 'framer-motion';
import Footer from '../../components/Layout/Footer';
import './style.css';

/**
* Render the full landing page UI for the product, including responsive navigation, hero, demo panel, feature and pricing sections, BYO infrastructure content, FAQ, and footer.
*
* The component manages UI state for the mobile menu, scroll-based nav visibility, a simulated demo request, and FAQ expansion. It adapts navigation and CTAs based on authentication and provides a lightweight demo that simulates an API response.
*
* @returns {JSX.Element} The rendered landing page element.
*/
function LandingPage() {
const { isAuthenticated } = useAuth();
const navigate = useNavigate();
Expand Down Expand Up @@ -114,9 +121,8 @@ function LandingPage() {

<nav className={`nav-glass ${!isNavVisible ? 'nav-hidden' : ''} ${scrolled ? 'nav-scrolled' : ''}`}>
<div className="nav-container">
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontWeight: 800, fontSize: '1.2rem', flex: 1 }}>
<img src="/logo_u.png" alt="urBackend Logo" style={{ height: '32px', width: 'auto' }} />
<span style={{ letterSpacing: '-0.5px' }}>urBackend</span>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<img src="/urBACKEND_NAV_LOGO (2).png" alt="urBackend Logo" style={{ height: '40px', width: 'auto' }} />
</div>

<div className="nav-links" style={{ display: window.innerWidth > 768 ? 'flex' : 'none', gap: '32px', alignItems: 'center', fontSize: '0.95rem', color: '#888', fontWeight: 500 }}>
Expand Down Expand Up @@ -157,8 +163,8 @@ function LandingPage() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: "easeOut" }}
>
Instant Backend.<br />
<span className="text-gradient-primary">Just for Frontend Devs.</span>
Bring your own MongoDB.<br />
<span className="text-gradient-primary">Get a production-ready backend in 60 seconds.</span>
</Motion.h1>

<Motion.p
Expand All @@ -167,7 +173,7 @@ function LandingPage() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
>
No boilerplate. No servers. Get Database, Auth, and Storage APIs in seconds.
your backend — your database — your rules.
</Motion.p>

<Motion.div
Expand Down Expand Up @@ -284,7 +290,7 @@ function LandingPage() {
</div>

<div id="features" style={{ padding: '8rem 0', background: '#030303', borderTop: '1px solid rgba(255, 255, 255, 0.05)', position: 'relative', overflow: 'hidden' }}>
<div className="section-glow" style={{ bottom: '-10%', left: '-10%', background: 'radial-gradient(circle, rgba(62,207,142,0.06) 0%, transparent 70%)' }}></div>
<div className="section-glow" style={{ bottom: '-10%', left: '-10%', background: 'radial-gradient(circle, rgba(0, 245, 212, 0.06) 0%, transparent 70%)' }}></div>
<div style={{ textAlign: 'center', marginBottom: '5rem', position: 'relative', zIndex: 1 }}>
<h2 className="section-title">Complete Backend Suite</h2>
<p className="section-desc">Enterprise-grade tools packaged for individual developers.</p>
Expand All @@ -293,7 +299,7 @@ function LandingPage() {
<div className="bento-grid">
<div className="bento-item bento-span-8">
<div>
<div className="bento-icon" style={{ background: 'rgba(62, 207, 142, 0.1)', color: '#3ECF8E', boxShadow: '0 0 20px rgba(62, 207, 142, 0.2)' }}>
<div className="bento-icon" style={{ background: 'rgba(0, 245, 212, 0.1)', color: '#00f5d4', boxShadow: '0 0 20px rgba(0, 245, 212, 0.2)' }}>
<Database strokeWidth={1.5} />
</div>
<h3 className="bento-title">Managed NoSQL Database</h3>
Expand All @@ -302,9 +308,9 @@ function LandingPage() {
Scale from 10 to 10M records without managing servers.
</p>
<ul style={{ marginTop: '1rem', color: '#666', listStyle: 'none', padding: 0, display: 'grid', gap: '8px' }}>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><CheckCircle size={14} color="#3ECF8E" /> Strict Type Validation</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><CheckCircle size={14} color="#3ECF8E" /> Auto-generated API Endpoints</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><CheckCircle size={14} color="#3ECF8E" /> Real-time Indexing</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><CheckCircle size={14} color="#00f5d4" /> Strict Type Validation</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><CheckCircle size={14} color="#00f5d4" /> Auto-generated API Endpoints</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><CheckCircle size={14} color="#00f5d4" /> Real-time Indexing</li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -363,7 +369,7 @@ function LandingPage() {
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '2rem' }}>
<div className="card" style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: '12px', padding: '3rem', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.02)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
<div style={{ padding: '12px', background: 'rgba(62, 207, 142, 0.1)', borderRadius: '12px', color: '#3ECF8E', boxShadow: '0 0 20px rgba(62, 207, 142, 0.2)' }}>
<div style={{ padding: '12px', background: 'rgba(0, 245, 212, 0.1)', borderRadius: '12px', color: '#00f5d4', boxShadow: '0 0 20px rgba(0, 245, 212, 0.2)' }}>
<Database strokeWidth={1.5} size={32} />
</div>
<h3 style={{ fontSize: '1.5rem', fontWeight: 600, color: '#fff' }}>BYO Database</h3>
Expand Down Expand Up @@ -404,7 +410,7 @@ function LandingPage() {

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem', marginBottom: '6rem' }}>
<div className="use-case-card">
<Layers strokeWidth={1.5} size={32} color="#3ECF8E" style={{ marginBottom: '1.5rem' }} />
<Layers strokeWidth={1.5} size={32} color="#facc15" style={{ marginBottom: '1.5rem' }} />
<h3 style={{ fontSize: '1.25rem', fontWeight: 600, marginBottom: '0.5rem', color: '#fff' }}>SaaS Platforms</h3>
<p style={{ color: '#a1a1aa', lineHeight: 1.6 }}>Handle complex data relationships, multi-tenant auth, and subscriptions securely.</p>
</div>
Expand Down Expand Up @@ -433,15 +439,15 @@ function LandingPage() {

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem', maxWidth: '900px', margin: '0 auto' }}>
<div className="pricing-card" style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.08)', padding: '3rem', borderRadius: '16px', position: 'relative' }}>
<div style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'rgba(62, 207, 142, 0.1)', color: '#3ECF8E', padding: '4px 12px', borderRadius: '99px', fontSize: '0.75rem', fontWeight: 700 }}>ACTIVE</div>
<div style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'rgba(0, 245, 212, 0.1)', color: '#00f5d4', padding: '4px 12px', borderRadius: '99px', fontSize: '0.75rem', fontWeight: 700 }}>ACTIVE</div>
<h3 style={{ fontSize: '1.25rem', fontWeight: 600, color: '#fff', marginBottom: '0.5rem' }}>Developer Beta</h3>
<div style={{ fontSize: '3rem', fontWeight: 800, color: '#fff', marginBottom: '1rem' }}>$0<span style={{ fontSize: '1rem', color: '#666', fontWeight: 400 }}>/mo</span></div>
<p style={{ color: '#888', marginBottom: '2rem', fontSize: '0.95rem' }}>Perfect for side projects, MVPs, and learning.</p>
<ul style={{ listStyle: 'none', padding: 0, margin: '0 0 2rem 0', display: 'grid', gap: '12px' }}>
<li style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#ccc' }}><CheckCircle size={16} color="#3ECF8E" /> Unlimited Projects</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#ccc' }}><CheckCircle size={16} color="#3ECF8E" /> 500MB Storage</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#ccc' }}><CheckCircle size={16} color="#3ECF8E" /> Community Support</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#ccc' }}><CheckCircle size={16} color="#3ECF8E" /> BYO Infrastructure</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#ccc' }}><CheckCircle size={16} color="#00f5d4" /> Unlimited Projects</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#ccc' }}><CheckCircle size={16} color="#00f5d4" /> 500MB Storage</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#ccc' }}><CheckCircle size={16} color="#00f5d4" /> Community Support</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#ccc' }}><CheckCircle size={16} color="#00f5d4" /> BYO Infrastructure</li>
</ul>
<Link to="/signup" className="btn btn-primary" style={{ width: '100%', textAlign: 'center', padding: '12px', fontWeight: 600 }}>Get Started Now</Link>
</div>
Expand All @@ -461,7 +467,7 @@ function LandingPage() {
</div>
</div>

<div className="cta-section" style={{ padding: '8rem 0', background: 'radial-gradient(circle at 50% 50%, rgba(62, 207, 142, 0.05) 0%, transparent 70%)', textAlign: 'center' }}>
<div className="cta-section" style={{ padding: '8rem 0', background: 'radial-gradient(circle at 50% 50%, rgba(0, 245, 212, 0.05) 0%, transparent 70%)', textAlign: 'center' }}>
<div style={{ maxWidth: '800px', margin: '0 auto', padding: '0 1.5rem' }}>
<h2 style={{ fontSize: '3rem', fontWeight: 800, marginBottom: '1.5rem', letterSpacing: '-0.04em' }}>Ready to ship?</h2>
<p style={{ fontSize: '1.25rem', color: '#a1a1aa', marginBottom: '3rem' }}>Join hundreds of developers building the future without the backend headaches.</p>
Expand Down