Your Role: You are an expert frontend developer and UI/UX designer. Your mission is to build a visually stunning, modern, and high-converting landing page for a new SaaS product called "Nexus".Product Context: Nexus is a powerful, AI-native automation platform for developers and small teams, positioned as a smarter, more flexible alternative to Zapier/IFTTT. The core value proposition is the AI-Filter, which adds intelligent decision-making to simple automations.Primary Objective: Translate the provided Product Requirements Document (PRD) into a compelling, single-page marketing website. The page must be beautiful, trustworthy, and clearly communicate the value of Nexus to our target audience (indie hackers, dev power-users, small teams).Key Design Principles:Clarity & Simplicity: The core "Trigger -> AI-Filter -> Action" concept must be immediately understandable.Modern & Minimalist: Generous whitespace, clean lines, strong typography, and a focus on content.Trustworthy & Professional: The design must feel polished and secure, especially since we handle user credentials.Aspirational & Powerful: It should excite developers about the new capabilities they'll unlock.Purposeful Animation: Use subtle, non-intrusive animations (like fade-ins on scroll, subtle hover effects, and animated diagrams) to guide the user's eye and enhance the experience.Technical Stack & SetupFramework: Next.js (App Router)Styling: Tailwind CSSUI Components: shadcn/ui. You will use its components extensively. Initialize the project with the "New York" style.Typography:Headings: Use the Geist font (or a similar clean, modern sans-serif like Inter or Satoshi).Body Text: Use Inter.Icons: Use lucide-react for all iconography.Color Palette: "Orange & White"background: hsl(0 0% 100%) (White) - #FFFFFFforeground: hsl(222.2 84% 4.9%) (Near Black) - #0C0A09primary (Accent Orange): hsl(24.6 95% 53.1%) - #F56513primary-foreground: hsl(60 9.1% 97.8%) (Text on orange buttons) - #FAFAFAcard: hsl(0 0% 100%) (White) - #FFFFFF with a very subtle border hsl(214.3 31.8% 91.4%).muted: hsl(215 20.2% 95%) (Light gray for backgrounds, borders) - #F1F5F9muted-foreground: hsl(215.4 16.3% 56.9%) (Slightly gray text for sub-headlines, descriptions) - #64748BPage Structure & Component BreakdownBuild the landing page as a single page.tsx file, composed of the following sections in order.0. Global ComponentsNavbar:Layout: Clean, sticky, with a subtle background blur (backdrop-blur-lg) and a bottom border on scroll.Left Side: "Nexus" logo (a simple, sharp logotype you can create with text) with a small, stylized orange dot.Center (Desktop): Navigation links: Features, How It Works, Pricing, FAQ.Right Side: A ghost variant Button for "Login" and a primary variant Button for "Get Started for Free" (this is the main CTA).Mobile: Use a Sheet component from shadcn/ui for the hamburger menu.Footer:Layout: Simple, three-column layout on a muted background.Column 1: Nexus Logo & a brief tagline: "AI-native automation for modern makers."Column 2 (Product): Links: Features, Integrations, Roadmap.Column 3 (Company): Links: About Us, Terms of Service, Privacy Policy.Bottom: A simple copyright notice: © 2025 Nexus Labs Inc.1. Hero SectionObjective: Grab attention instantly and explain the core value proposition in one sentence.Layout: Centered, with ample vertical padding.Headline (H1): Use large, bold text. "Go Beyond Automation. Add Intelligence."Sub-headline: Use muted-foreground color. "Nexus is the developer-first platform to build powerful workflows that think. Connect your apps, add a custom AI filter, and let Nexus handle the rest."CTA Buttons:Primary: Button (large size) - "Get Started - It's Free" with a Rocket icon from lucide-react.Secondary: Button (large, outline variant) - "View Demo" (this can just scroll to the "How It Works" section).Visual Element (Crucial):Below the CTAs, create a clean, animated visual representation of the core loop.Use three Card components arranged horizontally:Trigger: Card with the Reddit logo. Title: "New Reddit Post".AI-Filter: Card with a Brain/CPU icon. Title: "AI Purchase Intent Filter". An animated arrow should connect the Reddit card to this one.Action: Card with the Discord logo. Title: "Post to #leads". An animated arrow should connect the AI card to this one.The animation should be subtle: the cards and arrows fade in sequentially to illustrate the flow.2. Social Proof / Integrations BarObjective: Build immediate trust and show what services Nexus works with.Layout: A simple, slim section with a muted background.Content: A centered label: "WORKS WITH YOUR FAVORITE TOOLS". Flanked by high-quality, grayscale logos of Reddit, Discord, OpenAI, Vercel, and AWS. The logos should turn to full color on hover.3. "How It Works" SectionObjective: Detail the 3-step process in a visually engaging way.Layout: A 3-step vertical or horizontal layout.Headline (H2): "Create Your First AI Agent in 3 Minutes."Steps (use Card components for each):Step 1: Connect Your Trigger.Icon: PlugTitle: ConnectDescription: "Securely link your apps like Reddit using OAuth2. Your credentials are encrypted and stored safely."Visual: A small, clean screenshot of the "Connect Reddit" UI from the app.Step 2: Write Your AI Filter.Icon: SparklesTitle: FilterDescription: "Describe the decision you want to make in plain English. Nexus uses GPT-4o to understand your intent and create a smart filter."Visual: A mini code block (use a styled pre tag or react-syntax-highlighter) showing the example filter instruction: If a post mentions Apple or Google and has positive purchase intent...Step 3: Define Your Action.Icon: SendTitle: ActDescription: "Route the filtered, valuable events to where your team works. Get smart alerts in Discord, Slack, and more."Visual: A small, clean screenshot of a Discord message generated by Nexus.4. Features SectionObjective: Highlight the key benefits and features from the PRD for the target audience.Layout: Use shadcn Tabs for an interactive experience.Headline (H2): "A Toolkit Built for Power-Users."Tab Triggers: AI-Powered Decisions, Developer First, Full Observability.Tab Content:Tab 1: AI-Powered Decisions:Headline: Stop reacting to noise. Start acting on signal.Text: Explain how the few-shot prompt and Zod schema validation ensure reliable, structured JSON output. Mention sentiment analysis, purchase intent detection, and custom categorization as examples.Visual: Show the {"proceed": boolean, "reasoning": "..."} JSON output in a beautifully styled code block. This is a key selling point for developers.Tab 2: Developer First:Headline: Built with the tools you already love.Text: Mention the tech stack (Next.js, Vercel, Postgres) and the focus on performance (sub-second latency). Highlight that it’s a robust alternative to self-hosting a cron job + script.Visual: A simple graphic showing the logos for Next.js, Vercel, and Postgres.Tab 3: Full Observability:Headline: Know exactly what's happening, always.Text: Briefly mention OpenTelemetry tracing for every agent run, structured logs, and latency metrics. Reassure users that they have full visibility into their workflows.Visual: A stylized, simplified graphic of a trace waterfall (like in Honeycomb/Datadog).5. User Personas / "Who is Nexus For?" SectionObjective: Help visitors self-identify with the product's target market.Layout: Two side-by-side Card components.Headline (H2): "Designed for Modern Builders."Card 1: For Indie HackersIcon: UserTitle: Indie Hackers & Power-UsersDescription: "Automate market research, monitor brand mentions, and capture leads without the hassle of deploying and maintaining your own services. Focus on building, not plumbing."Card 2: For Small TeamsIcon: UsersTitle: Startups & Small TeamsDescription: "Create real-time intelligence streams for your sales, support, and marketing teams. Pipe qualified leads directly to Discord or Slack with zero engineering overhead."6. FAQ SectionObjective: Proactively answer key questions and overcome objections, especially around security.Layout: A single-column layout with a shadcn Accordion.Headline (H2): "Frequently Asked Questions"Accordion Items (derive from PRD):Q: How do you handle security and my API keys? (A: Mention AES-256 encryption at rest, strict IAM roles, and data isolation by userId.)Q: What is the core technology? (A: Mention Next.js, AWS Fargate worker, and OpenAI GPT-4o.)Q: Can I use this for more than just Reddit and Discord? (A: Explain these are the MVP connectors and more (GitHub, Slack) are on the roadmap.)Q: Is there a free plan? (A: Yes, we have a generous free tier for you to get started and test your ideas.)7. Final Call-to-Action (CTA) SectionObjective: A final, powerful appeal to sign up.Layout: A full-width section with a bold background (use the primary orange or a dark gray foreground color).Headline (H1 or H2, large and inverted color): "Start Building Smarter Workflows Today."Sub-headline: "Sign up in seconds. Your first AI agent is just a few clicks away."Button: A large, prominent Button with a contrasting color. "Sign Up Now for Free".Final Execution NotesResponsiveness: Ensure the entire page is perfectly responsive. Use flexbox/grid and Tailwind's responsive prefixes (md:, lg:). The multi-column layouts should stack gracefully on mobile.Asset Loading: Use the Next.js <Image> component for all images and SVGs for logos/icons to ensure they are optimized.Accessibility (A11y): Use semantic HTML (<header>, <main>, <section>, <footer>). Ensure all interactive elements are keyboard-navigable and have proper aria- labels.Code Quality: Write clean, well-commented code. Structure your components logically.Let's begin. Start by setting up the Next.js project with shadcn/ui and then build the page section by section, starting with the Navbar.