{plan.title}

{plan.price}

{plan.description}

{feature}

); ``` -------------------------------- ### Responsive Flex Row with Box Component Source: https://context7.com/brijr/components/llms.txt Shows how to use the `Box` component for creating responsive flex rows. Adapts from a single column on small screens to a row on medium screens, with wrapping enabled. ```tsx // Box – responsive flex row export function FlexRow() { return (

Item 1

Item 2

Item 3

); } ``` -------------------------------- ### Full Page Layout Shell with Craft-DS Source: https://context7.com/brijr/components/llms.txt Demonstrates the root layout structure using Brijr's `Layout` and `Main` components for a full-page shell. Applies custom fonts and basic body structure. ```tsx // components/craft.tsx import { Layout, Main, Section, Container, Article, Box } from "@/components/craft"; // Full page layout shell export default function RootLayout({ children }: { children: React.ReactNode }) { return (

{children}

); } ``` -------------------------------- ### Typical Page Section Structure with Craft-DS Source: https://context7.com/brijr/components/llms.txt Illustrates a standard page section using `Section`, `Container`, `h2`, and `p` from Brijr's `craft-ds`. Suitable for organizing content within a page. ```tsx // Typical page section structure export function PageSection() { return (

Section Title

Section content goes here.

); } ``` -------------------------------- ### Background Component Source: https://context7.com/brijr/components/llms.txt A fixed, full-viewport decorative background with a CSS grid dot pattern and a radial gradient fade. It is positioned at a low z-index to avoid interfering with content. ```APIDOC ## Background Component (`components/backgrounds.tsx`) ### Description A fixed full-viewport decorative background using a CSS grid dot pattern with a radial gradient fade. Placed at `z-index: -50` so it never interferes with content. ### Usage Include the `Background` component in your `app/layout.tsx` file. ```tsx // In app/layout.tsx import { Background } from "@/components/backgrounds"; export default function RootLayout({ children }) { return ( {children} ); } ``` ### Features - Fixed full-screen positioning - CSS grid dot pattern - Radial gradient overlay fades edges to transparent - `z-index: -50` to ensure it stays behind content - Adapts grid color based on theme (light/dark mode) ``` -------------------------------- ### Left-Aligned Hero with Badge Link and Image Source: https://context7.com/brijr/components/llms.txt Use this component for a left-aligned hero section featuring a badge link, a prominent heading, a subheading, and a full-width image. It utilizes Next.js Image, Lucide React icons, and components from craft-ds and shadcn/ui. ```tsx // components/heros/hero-one.tsx – left-aligned hero with image import Image from "next/image"; import Link from "next/link"; import Balancer from "react-wrap-balancer"; import { ArrowRight } from "lucide-react"; import { Section, Container } from "@/components/craft"; import { Button } from "@/components/ui/button"; import Placeholder from "@/public/placeholder.jpg"; const Hero = () => (

Your compelling headline goes here

Your product description. Keep it short — one or two sentences that describe the value.

); export default Hero; ``` -------------------------------- ### Nav Component Source: https://context7.com/brijr/components/llms.txt A sticky, animated navigation bar that auto-hides on scroll down and reappears on scroll up. It includes desktop links, a dark/light mode toggle, a GitHub link, and a responsive mobile drawer. ```APIDOC ## Nav Component (`components/nav.tsx`) ### Description A sticky, animated navigation bar using Framer Motion that auto-hides on scroll down and reappears on scroll up (after 150px threshold). Includes a desktop link list, dark/light mode toggle, GitHub link, and a responsive mobile `Sheet` drawer. ### Usage Place the `Nav` component above the page content in your `app/layout.tsx` file. ```tsx // In app/layout.tsx – place Nav above page content import { Nav } from "@/components/nav"; export default function RootLayout({ children }: { children: React.ReactNode }) { return (

{/* sticky top-4, hides on scroll down > 150px */} {children} ); } ``` ### Customization Nav links are defined inline within the component. Customize them by editing the `links` array: ```javascript const links = [ { name: "Heros", href: "/hero" }, { name: "Features", href: "/feature" }, { name: "CTAs", href: "/cta" }, { name: "FAQs", href: "/faq" }, { name: "Pricing", href: "/pricing" }, { name: "Headers", href: "/header" }, { name: "Footers", href: "/footer" }, ]; ``` ### Features - Sticky positioning - Auto-hides on scroll down (> 150px threshold) - Reappears on scroll up - Desktop link list - Dark/light mode toggle - GitHub link - Responsive mobile `Sheet` drawer ``` -------------------------------- ### Monthly/Yearly Billing Toggle (React) Source: https://context7.com/brijr/components/llms.txt Implements a monthly/yearly billing toggle using shadcn/ui Tabs. Requires state management for the selected billing period. The 'Save 17%' badge is applied to the yearly option. ```tsx // components/pricing/pricing-two.tsx – with monthly/yearly toggle "use client"; import { useState } from "react"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; const Pricing2 = () => { const [billingPeriod, setBillingPeriod] = useState<"monthly" | "yearly">("monthly"); return (

Pricing

setBillingPeriod(v as "monthly" | "yearly")} className="w-[300px]"> Monthly Yearly Save 17% {/* PricingCard receives billingPeriod and renders monthlyPrice or yearlyPrice */}

); }; ``` -------------------------------- ### 3-Column Icon Grid Feature Component Source: https://context7.com/brijr/components/llms.txt Use this component for a 3-column layout displaying icons, titles, and descriptions. It requires importing `Section` and `Container` from '@/components/craft', and icons from 'lucide-react'. ```tsx // components/features/feature-one.tsx – 3-column icon grid import { Section, Container } from "@/components/craft"; import { Zap, Shield, Globe } from "lucide-react"; type FeatureText = { icon: JSX.Element; title: string; description: string }; const featureText: FeatureText[] = [ { icon: , title: "Fast", description: "Optimized for performance from day one." }, { icon: , title: "Secure", description: "Enterprise-grade security built in." }, { icon: , title: "Global", description: "Deploy to any region in seconds." }, ]; const Feature = () => (

Everything you need to ship

No configuration required

{featureText.map(({ icon, title, description }, index) => (

{icon}

{title}

{description}

))}

); ``` -------------------------------- ### Subscribe API Route Source: https://context7.com/brijr/components/llms.txt A Next.js App Router POST handler to create a contact in Loops.so. It accepts email, source, and userGroup in the request body and uses the LOOPS_API_KEY environment variable for authentication. ```APIDOC ## POST /api/subscribe ### Description Creates a contact in Loops.so. ### Method POST ### Endpoint /api/subscribe ### Parameters #### Request Body - **email** (string) - Required - The email address of the contact. - **source** (string) - Optional - The source URL where the contact originated. - **userGroup** (string) - Optional - The user group the contact belongs to. ### Request Example ```json { "email": "user@example.com", "source": "https://yoursite.com/landing", "userGroup": "Beta" } ``` ### Response #### Success Response (201) - **success** (boolean) - Indicates if the operation was successful. - **id** (string) - The ID of the created contact. #### Error Response (400) - **error** (string) - Message indicating that the email is required. #### Error Response (500) - **error** (string) - Message indicating an API configuration error or internal server error. ### Example fetch call: ```javascript const response = await fetch("/api/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: "user@example.com", source: "https://yoursite.com/landing", userGroup: "Beta", }), }); const data = await response.json(); ``` ### curl equivalent: ```bash curl -X POST https://yoursite.com/api/subscribe \ -H "Content-Type: application/json" \ -d '{"email":"user@example.com","source":"landing","userGroup":"Beta"}' ``` ``` -------------------------------- ### Comprehensive Footer with Subscription Form Source: https://context7.com/brijr/components/llms.txt A footer component including logo, description, social links, an email subscription form using Zod and react-hook-form, and legal links. The form submits to the '/api/subscribe' route. ```tsx "use client"; import * as z from "zod"; import Image from "next/image"; import Link from "next/link"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { Github, Twitter, Facebook } from "lucide-react"; import Logo from "@/public/logo.svg"; import { Section, Container } from "../craft"; import { Button } from "../ui/button"; import { Input } from "@/components/ui/input"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"; const formSchema = z.object({ email: z.string().email({ message: "Please enter a valid email address." }), }); export default function Footer() { const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { email: "" }, }); async function onSubmit(values: z.infer) { await fetch("/api/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: values.email, source: "footer", userGroup: "Newsletter" }), }); } return ( ); } ``` -------------------------------- ### Subscribe API Route Source: https://context7.com/brijr/components/llms.txt A Next.js App Router POST handler for creating contacts in Loops.so. Requires the LOOPS_API_KEY environment variable. Accepts email, source, and userGroup in the request body. ```typescript // app/api/subscribe/route.ts // Environment: LOOPS_API_KEY=your_loops_api_key // POST /api/subscribe // Request body: { email: string, source?: string, userGroup?: string } // Response 201: { success: true, id: string } // Response 400: { error: "Email is required" } // Response 500: { error: "API configuration error" | "Internal Server Error" } // Example fetch call: const response = await fetch("/api/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: "user@example.com", source: "https://yoursite.com/landing", userGroup: "Beta", }), }); const data = await response.json(); // Success: { success: true, id: "contact_abc123" } // Error: { error: "Email is required" } // curl equivalent: // curl -X POST https://yoursite.com/api/subscribe \ // -H "Content-Type: application/json" \ // -d '{"email":"user@example.com","source":"landing","userGroup":"Beta"}' ``` -------------------------------- ### 2-Column Text and Image Feature Component Source: https://context7.com/brijr/components/llms.txt This component is suitable for a 2-column layout featuring text on one side and an image on the other. It requires `Section` and `Container` from '@/components/craft', and `Button` and `Link` components, along with an `Image` component and a placeholder image. ```tsx // components/features/feature-four.tsx – 2-column text + image const FeatureSplit = () => (

A feature worth highlighting

Describe the benefit in one or two sentences. Focus on the outcome for your customer.

); ``` -------------------------------- ### Centered Hero with Logo and Dual CTA Buttons Source: https://context7.com/brijr/components/llms.txt This component renders a centered hero section with a company logo above the heading and two call-to-action buttons below. It's suitable for scenarios requiring a prominent brand presence and clear user engagement points. Includes imports for Next.js Image, Lucide React icons, and components from craft-ds and shadcn/ui. ```tsx // components/heros/hero-two.tsx – centered hero with logo + dual CTA import Logo from "@/public/logo.svg"; import { Camera } from "lucide-react"; const Hero2 = () => (

Your headline for a centered hero

Supporting description text that explains what you do.

); ``` -------------------------------- ### Animated Email Subscription Form Source: https://context7.com/brijr/components/llms.txt An animated client-side email capture form with Framer Motion transitions, Zod validation, and states for loading and success. It POSTs to '/api/subscribe' and displays a 'Thank you' message upon successful submission. ```tsx "use client"; import { EmailForm } from "@/components/email-form"; // Usage: drop onto any page or hero section export default function Page() { return (

Get early access

{/* On submit: POSTs { email, source, userGroup } to /api/subscribe */} {/* On success: animates to "Thank you for subscribing." */} {/* On error: shows "Failed to subscribe. Please try again." inline */}

); } // Internal behavior summary: // - Zod schema: z.object({ email: z.string().email() }) // - POST /api/subscribe with { email, source: "https://components.work", userGroup: "Components" } // - Framer Motion AnimatePresence swaps form ↔ thank-you message // - useMeasure animates container height change smoothly ``` -------------------------------- ### Safe Tailwind Class Merging with cn() Source: https://context7.com/brijr/components/llms.txt Illustrates the usage of the `cn()` utility function for safely merging Tailwind CSS classes. Handles conditional classes and ensures correct class concatenation. ```tsx // cn() utility – merges Tailwind classes safely import { cn } from "@/components/craft"; const className = cn("px-4 py-2", isActive && "bg-primary text-white", "rounded-md"); ``` -------------------------------- ### Clean Header Block (React) Source: https://context7.com/brijr/components/llms.txt A clean page-header block with an H1 title, a descriptive subheading using react-wrap-balancer for text wrapping, and two action buttons. Ensure 'craft' components and UI button are imported. ```tsx // components/headers/header-one.tsx import Balancer from "react-wrap-balancer"; import { Button } from "../ui/button"; import { Container, Section } from "@/components/craft"; const Header = () => (

Your Page Title Here

A short, punchy description of this page or feature set.

); export default Header; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.