feat(ui): add pricing section to landing page

Three honest tiers (Free / Pro £9-mo / Bring-your-own-key £3-mo) billed monthly
or yearly — never by the week (the anti-Teal positioning from
docs/remaster/RESEARCH_COMPETITORS.md), with a "Most popular" highlight and the
assistive-not-autonomous trust note. Prices are indicative placeholders for the
SaaS direction.

Verified live: pricing section + all three tiers render at "/".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

JobTrackerApi/Program.cs

@@ -166,6 +166,10 @@ builder.Services.AddScoped<IGmailOAuthService, GmailOAuthService>();
 builder.Services.AddSingleton<IGmailJobMatchingService, GmailJobMatchingService>();
 builder.Services.AddSingleton<IGmailCorrespondenceEnrichmentService, NoOpGmailCorrespondenceEnrichmentService>();
 
+// Provider-neutral email seam (multi-provider: Gmail today; Microsoft Graph / IMAP / manual next).
+builder.Services.AddScoped<JobTrackerApi.Services.EmailProviders.IEmailProvider, JobTrackerApi.Services.EmailProviders.GmailProvider>();
+builder.Services.AddScoped<JobTrackerApi.Services.EmailProviders.IEmailProviderRegistry, JobTrackerApi.Services.EmailProviders.EmailProviderRegistry>();
+
 builder.Services.AddIdentityCore<ApplicationUser>(options =>
     {
         options.User.RequireUniqueEmail = true;

JobTrackerApi/Services/EmailProviders/GmailProvider.cs

@@ -0,0 +1,63 @@
+using JobTrackerApi.Services;
+
+namespace JobTrackerApi.Services.EmailProviders
+{
+    /// <summary>
+    /// Gmail implementation of <see cref="IEmailProvider"/>. Adapts the existing
+    /// <see cref="IGmailOAuthService"/> (Gmail REST client) to the provider-neutral contract,
+    /// mapping Gmail DTOs to the neutral shapes.
+    /// </summary>
+    public sealed class GmailProvider : IEmailProvider
+    {
+        private readonly IGmailOAuthService _gmail;
+
+        public GmailProvider(IGmailOAuthService gmail)
+        {
+            _gmail = gmail;
+        }
+
+        public string ProviderKey => "gmail";
+
+        public async Task<EmailConnectionInfo?> GetConnectionAsync(string ownerUserId, CancellationToken cancellationToken)
+        {
+            var connection = await _gmail.GetConnectionAsync(ownerUserId, cancellationToken);
+            return connection is null ? null : new EmailConnectionInfo("gmail", connection.GmailAddress ?? "");
+        }
+
+        public async Task<IReadOnlyList<EmailMessageSummary>> SearchAsync(string ownerUserId, string? query, int maxResults, CancellationToken cancellationToken)
+        {
+            var messages = await _gmail.ListMessagesAsync(ownerUserId, query, maxResults, cancellationToken);
+            return messages.Select(ToSummary).ToList();
+        }
+
+        public async Task<IReadOnlyList<EmailMessageSummary>> ListThreadMessagesAsync(string ownerUserId, string threadId, CancellationToken cancellationToken)
+        {
+            var messages = await _gmail.ListThreadMessagesAsync(ownerUserId, threadId, cancellationToken);
+            return messages.Select(ToSummary).ToList();
+        }
+
+        public async Task<EmailMessageDetail> GetMessageAsync(string ownerUserId, string messageId, CancellationToken cancellationToken)
+        {
+            var detail = await _gmail.GetMessageAsync(ownerUserId, messageId, cancellationToken);
+            var attachments = detail.Attachments
+                .Select(a => new EmailAttachmentRef(a.FileName, a.MimeType, a.SizeBytes, a.GmailAttachmentId, a.Inline))
+                .ToList();
+
+            return new EmailMessageDetail(
+                detail.Id,
+                detail.ThreadId,
+                detail.Subject,
+                detail.From,
+                detail.To,
+                detail.Date,
+                detail.Snippet,
+                detail.BodyText,
+                detail.BodyHtml,
+                detail.Labels,
+                attachments);
+        }
+
+        private static EmailMessageSummary ToSummary(GmailMessageSummary m)
+            => new(m.Id, m.ThreadId, m.Subject, m.From, m.To, m.Date, m.Snippet);
+    }
+}

JobTrackerApi/Services/EmailProviders/IEmailProvider.cs

@@ -0,0 +1,69 @@
+namespace JobTrackerApi.Services.EmailProviders
+{
+    /// <summary>
+    /// Provider-neutral email operations so job correspondence can be sourced from Gmail,
+    /// Microsoft Graph, generic IMAP, or manual/free-text entry behind a single seam.
+    /// See docs/remaster/PRODUCT_DIRECTION.md (multi-provider email). Gmail is the first
+    /// implementation (<see cref="GmailProvider"/>); the controller migration and additional
+    /// providers land in follow-up slices.
+    /// </summary>
+    public interface IEmailProvider
+    {
+        /// <summary>Stable key: "gmail" | "microsoft" | "imap" | "manual".</summary>
+        string ProviderKey { get; }
+
+        /// <summary>The user's active connection for this provider, or null if not connected.</summary>
+        Task<EmailConnectionInfo?> GetConnectionAsync(string ownerUserId, CancellationToken cancellationToken);
+
+        /// <summary>Search the user's mailbox. <paramref name="query"/> is provider-specific syntax.</summary>
+        Task<IReadOnlyList<EmailMessageSummary>> SearchAsync(string ownerUserId, string? query, int maxResults, CancellationToken cancellationToken);
+
+        /// <summary>All messages in a thread/conversation.</summary>
+        Task<IReadOnlyList<EmailMessageSummary>> ListThreadMessagesAsync(string ownerUserId, string threadId, CancellationToken cancellationToken);
+
+        /// <summary>Full message content (body + attachments metadata).</summary>
+        Task<EmailMessageDetail> GetMessageAsync(string ownerUserId, string messageId, CancellationToken cancellationToken);
+    }
+
+    public sealed record EmailConnectionInfo(string ProviderKey, string Address);
+
+    public sealed record EmailMessageSummary(string Id, string ThreadId, string Subject, string From, string To, DateTimeOffset? Date, string Snippet);
+
+    public sealed record EmailAttachmentRef(string? FileName, string? MimeType, long? SizeBytes, string? ExternalAttachmentId, bool Inline);
+
+    public sealed record EmailMessageDetail(
+        string Id,
+        string ThreadId,
+        string Subject,
+        string From,
+        string To,
+        DateTimeOffset? Date,
+        string Snippet,
+        string BodyText,
+        string? BodyHtml,
+        IReadOnlyList<string> Labels,
+        IReadOnlyList<EmailAttachmentRef> Attachments);
+
+    /// <summary>Resolves a registered <see cref="IEmailProvider"/> by its key.</summary>
+    public interface IEmailProviderRegistry
+    {
+        IReadOnlyList<IEmailProvider> All { get; }
+        IEmailProvider? Get(string? providerKey);
+    }
+
+    public sealed class EmailProviderRegistry : IEmailProviderRegistry
+    {
+        private readonly Dictionary<string, IEmailProvider> _byKey;
+
+        public EmailProviderRegistry(IEnumerable<IEmailProvider> providers)
+        {
+            All = providers.ToList();
+            _byKey = All.ToDictionary(p => p.ProviderKey, StringComparer.OrdinalIgnoreCase);
+        }
+
+        public IReadOnlyList<IEmailProvider> All { get; }
+
+        public IEmailProvider? Get(string? providerKey)
+            => !string.IsNullOrWhiteSpace(providerKey) && _byKey.TryGetValue(providerKey, out var p) ? p : null;
+    }
+}

job-tracker-ui/src/App.tsx

@@ -28,6 +28,7 @@ import JobTable from "./components/JobTable";
 import type { JobTableColumns } from "./components/JobTable";
 import { I18nProvider, useI18n } from "./i18n/I18nProvider";
 import LoginPage from "./pages/LoginPage";
+import LandingPage from "./pages/LandingPage";
 import ForgotPasswordPage from "./pages/ForgotPasswordPage";
 import ResetPasswordPage from "./pages/ResetPasswordPage";
 import RouteErrorPage from "./pages/RouteErrorPage";
@@ -344,6 +345,7 @@ export default function App() {
   });
 
   const router = useMemo(() => createBrowserRouter([
+    { path: "/", element: <LandingPage />, errorElement: <RouteErrorPage /> },
     { path: "/login", element: <LoginPage />, errorElement: <RouteErrorPage /> },
     { path: "/forgot-password", element: <ForgotPasswordPage />, errorElement: <RouteErrorPage /> },
     { path: "/reset-password", element: <ResetPasswordPage />, errorElement: <RouteErrorPage /> },

job-tracker-ui/src/pages/LandingPage.tsx

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from "react";
+
+import { Box, Button, Container, Stack, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
+
+import DashboardIcon from "@mui/icons-material/SpaceDashboardOutlined";
+import AlarmIcon from "@mui/icons-material/NotificationsActiveOutlined";
+import MatchIcon from "@mui/icons-material/FactCheckOutlined";
+import MailIcon from "@mui/icons-material/MarkEmailReadOutlined";
+import AttachIcon from "@mui/icons-material/DescriptionOutlined";
+import InsightsIcon from "@mui/icons-material/InsightsOutlined";
+
+import { api } from "../api";
+
+const BRAND_DARK = "#0b1020";
+const BRAND_PANEL = "#111a33";
+
+const FEATURES: { icon: React.ReactNode; title: string; body: string }[] = [
+  { icon: <DashboardIcon />, title: "Centralized pipeline", body: "Track every application across Applied, Waiting, Interview, Offer, Rejected and Ghosted — drag to update." },
+  { icon: <AlarmIcon />, title: "Smart follow-ups", body: "Reminders surface what needs attention next, with a grounded draft ready to review and send." },
+  { icon: <MatchIcon />, title: "Honest CV match", body: "A deterministic keyword-coverage score with matched vs missing skills — not an opaque black box." },
+  { icon: <MailIcon />, title: "Email correspondence", body: "Link Gmail threads to a job; new replies appear automatically without re-importing." },
+  { icon: <AttachIcon />, title: "Attachments & docs", body: "Keep resumes, cover letters and portfolios versioned per application, right where you need them." },
+  { icon: <InsightsIcon />, title: "Dashboard & insights", body: "Response rates, funnel, time-in-stage and skill demand across your whole search." },
+];
+
+const STEPS: { n: number; title: string; body: string }[] = [
+  { n: 1, title: "Import", body: "Paste a job URL or use the bookmarklet — we parse the role into structured fields." },
+  { n: 2, title: "Match", body: "See how your CV covers the role: matched keywords and the gaps to close." },
+  { n: 3, title: "Tailor", body: "AI drafts a tailored CV and cover letter — you review every word before it goes out." },
+  { n: 4, title: "Track", body: "Move it through the pipeline; documents, notes and history stay attached." },
+  { n: 5, title: "Follow up", body: "Linked email threads and reminders keep momentum with grounded replies." },
+  { n: 6, title: "Analyze", body: "See what's working — response rate, funnel and time-in-stage — and focus your effort." },
+];
+
+const PRICING: { name: string; price: string; cadence: string; highlight: boolean; features: string[]; cta: string }[] = [
+  { name: "Free", price: "£0", cadence: "forever", highlight: false, cta: "Get started", features: ["Unlimited job tracking & pipeline", "One-click capture (bookmarklet + PWA)", "Deterministic CV↔job match score", "3 AI CV tailors / month"] },
+  { name: "Pro", price: "£9", cadence: "/ month · billed monthly or yearly", highlight: true, cta: "Start Pro", features: ["Everything in Free", "Unlimited AI CV & cover-letter tailoring", "CV versions + factuality guardrail", "Gmail correspondence CRM", "Analytics drill-downs"] },
+  { name: "Bring your own key", price: "£3", cadence: "/ month + your AI key", highlight: false, cta: "Get started", features: ["Everything in Pro", "Use your own Gemini / Groq key", "Unlimited AI at provider cost", "Privacy-first & self-host friendly"] },
+];
+
+export default function LandingPage() {
+  const navigate = useNavigate();
+  const [checking, setChecking] = useState(true);
+
+  // If the visitor already has a session, send them straight into the app.
+  useEffect(() => {
+    let active = true;
+    api
+      .get("/auth/me")
+      .then(() => { if (active) navigate("/jobs", { replace: true }); })
+      .catch(() => { if (active) setChecking(false); });
+    return () => { active = false; };
+  }, [navigate]);
+
+  if (checking) {
+    return (
+      <Box sx={{ minHeight: "100vh", display: "grid", placeItems: "center", bgcolor: BRAND_DARK }}>
+        <Typography sx={{ color: "#94a3b8" }}>Loading…</Typography>
+      </Box>
+    );
+  }
+
+  const gradientText = {
+    background: "linear-gradient(90deg,#6366f1,#22d3ee)",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+  } as const;
+
+  return (
+    <Box sx={{ bgcolor: "background.default" }}>
+      {/* Top bar */}
+      <Box sx={{ position: "sticky", top: 0, zIndex: 10, bgcolor: alpha(BRAND_DARK, 0.85), backdropFilter: "blur(8px)", borderBottom: `1px solid ${alpha("#ffffff", 0.08)}` }}>
+        <Container maxWidth="lg">
+          <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ height: 64 }}>
+            <Stack direction="row" alignItems="center" spacing={1.25}>
+              <Box sx={{ width: 30, height: 30, borderRadius: "8px", background: "linear-gradient(135deg,#6366f1,#22d3ee)", display: "grid", placeItems: "center", color: BRAND_DARK, fontWeight: 900 }}>✓</Box>
+              <Typography sx={{ color: "#fff", fontWeight: 800, fontSize: 20 }}>JobTrack</Typography>
+            </Stack>
+            <Button variant="contained" onClick={() => navigate("/login")} sx={{ background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 700 }}>
+              Sign in
+            </Button>
+          </Stack>
+        </Container>
+      </Box>
+
+      {/* Hero */}
+      <Box sx={{ background: `radial-gradient(1200px 500px at 80% -10%, ${alpha("#6366f1", 0.35)}, transparent), linear-gradient(180deg, ${BRAND_DARK}, ${BRAND_PANEL})`, color: "#fff", py: { xs: 8, md: 12 } }}>
+        <Container maxWidth="lg">
+          <Box sx={{ maxWidth: 760 }}>
+            <Box sx={{ display: "inline-block", px: 1.5, py: 0.5, borderRadius: 999, bgcolor: alpha("#ffffff", 0.08), color: "#a5b4fc", fontSize: 13, fontWeight: 600, letterSpacing: 0.5, mb: 3 }}>
+              AI-ASSISTED JOB SEARCH WORKSPACE
+            </Box>
+            <Typography component="h1" sx={{ fontWeight: 800, fontSize: { xs: 40, md: 60 }, lineHeight: 1.05, mb: 2 }}>
+              Run your job search without losing <Box component="span" sx={gradientText}>the thread</Box>.
+            </Typography>
+            <Typography sx={{ color: "#94a3b8", fontSize: { xs: 17, md: 20 }, mb: 4 }}>
+              Import a role, tailor your CV, track every application, and keep recruiter correspondence tied to the
+              right job — all in one focused workspace. Assistive, never autonomous: you approve every draft.
+            </Typography>
+            <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+              <Button size="large" variant="contained" onClick={() => navigate("/login")} sx={{ background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 800, px: 4, py: 1.25 }}>
+                Get started
+              </Button>
+              <Button size="large" variant="outlined" href="#features" sx={{ color: "#e2e8f0", borderColor: alpha("#ffffff", 0.25), px: 3, py: 1.25 }}>
+                See features
+              </Button>
+            </Stack>
+            <Typography sx={{ color: "#64748b", fontSize: 14, mt: 3 }}>
+              React · TypeScript · ASP.NET Core · EF Core · FastAPI AI · Gmail
+            </Typography>
+          </Box>
+        </Container>
+      </Box>
+
+      {/* Features */}
+      <Container id="features" maxWidth="lg" sx={{ py: { xs: 7, md: 10 } }}>
+        <Box sx={{ textAlign: "center", mb: 6 }}>
+          <Typography sx={{ color: "primary.main", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>WHAT IT DOES</Typography>
+          <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>One workspace for the whole search</Typography>
+          <Typography sx={{ color: "text.secondary", fontSize: 18, mt: 1.5 }}>
+            Everything from a single import to the final offer — no more spreadsheets and scattered inboxes.
+          </Typography>
+        </Box>
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr", md: "1fr 1fr 1fr" }, gap: 3 }}>
+          {FEATURES.map((f) => (
+            <Box key={f.title} sx={{ p: 3, borderRadius: 3, border: "1px solid", borderColor: "divider", bgcolor: "background.paper", transition: "box-shadow .2s, transform .2s", "&:hover": { boxShadow: 6, transform: "translateY(-2px)" } }}>
+              <Box sx={{ width: 48, height: 48, borderRadius: 2.5, display: "grid", placeItems: "center", bgcolor: alpha("#6366f1", 0.12), color: "primary.main", mb: 2 }}>{f.icon}</Box>
+              <Typography sx={{ fontWeight: 700, fontSize: 19, mb: 0.75 }}>{f.title}</Typography>
+              <Typography sx={{ color: "text.secondary", fontSize: 15 }}>{f.body}</Typography>
+            </Box>
+          ))}
+        </Box>
+      </Container>
+
+      {/* How it works */}
+      <Box sx={{ background: `linear-gradient(180deg, ${BRAND_DARK}, ${BRAND_PANEL})`, color: "#fff", py: { xs: 7, md: 10 } }}>
+        <Container maxWidth="lg">
+          <Box sx={{ textAlign: "center", mb: 6 }}>
+            <Typography sx={{ color: "#a5b4fc", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>HOW IT WORKS</Typography>
+            <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>From a link to an offer</Typography>
+          </Box>
+          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr", md: "1fr 1fr 1fr" }, gap: 3 }}>
+            {STEPS.map((s) => (
+              <Box key={s.n} sx={{ p: 3, borderRadius: 3, border: `1px solid ${alpha("#ffffff", 0.1)}`, bgcolor: alpha("#ffffff", 0.03) }}>
+                <Box sx={{ width: 40, height: 40, borderRadius: 999, display: "grid", placeItems: "center", background: "linear-gradient(135deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 900, mb: 1.5 }}>{s.n}</Box>
+                <Typography sx={{ fontWeight: 700, fontSize: 18, mb: 0.5 }}>{s.title}</Typography>
+                <Typography sx={{ color: "#94a3b8", fontSize: 15 }}>{s.body}</Typography>
+              </Box>
+            ))}
+          </Box>
+        </Container>
+      </Box>
+
+      {/* Pricing */}
+      <Container id="pricing" maxWidth="lg" sx={{ py: { xs: 7, md: 10 } }}>
+        <Box sx={{ textAlign: "center", mb: 6 }}>
+          <Typography sx={{ color: "primary.main", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>PRICING</Typography>
+          <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>Honest, simple pricing</Typography>
+          <Typography sx={{ color: "text.secondary", fontSize: 18, mt: 1.5 }}>
+            Billed monthly or yearly — never by the week. Cancel anytime.
+          </Typography>
+        </Box>
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" }, gap: 3, alignItems: "start" }}>
+          {PRICING.map((tier) => (
+            <Box
+              key={tier.name}
+              sx={{
+                p: 3.5,
+                borderRadius: 3,
+                position: "relative",
+                bgcolor: "background.paper",
+                border: "2px solid",
+                borderColor: tier.highlight ? "primary.main" : "divider",
+                boxShadow: tier.highlight ? 8 : 0,
+              }}
+            >
+              {tier.highlight && (
+                <Box sx={{ position: "absolute", top: -13, left: 24, px: 1.5, py: 0.5, borderRadius: 999, background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontSize: 12, fontWeight: 800 }}>
+                  Most popular
+                </Box>
+              )}
+              <Typography sx={{ fontWeight: 700, fontSize: 18 }}>{tier.name}</Typography>
+              <Stack direction="row" alignItems="baseline" spacing={0.75} sx={{ my: 1.5 }}>
+                <Typography sx={{ fontWeight: 900, fontSize: 40, lineHeight: 1 }}>{tier.price}</Typography>
+                <Typography sx={{ color: "text.secondary", fontSize: 14 }}>{tier.cadence}</Typography>
+              </Stack>
+              <Stack spacing={1.25} sx={{ my: 2.5 }}>
+                {tier.features.map((f) => (
+                  <Stack key={f} direction="row" spacing={1.25} alignItems="flex-start">
+                    <Box sx={{ color: "success.main", fontWeight: 900, lineHeight: 1.4 }}>✓</Box>
+                    <Typography sx={{ fontSize: 15, color: "text.secondary" }}>{f}</Typography>
+                  </Stack>
+                ))}
+              </Stack>
+              <Button
+                fullWidth
+                variant={tier.highlight ? "contained" : "outlined"}
+                onClick={() => navigate("/login")}
+                sx={tier.highlight ? { background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 800 } : { fontWeight: 700 }}
+              >
+                {tier.cta}
+              </Button>
+            </Box>
+          ))}
+        </Box>
+        <Typography sx={{ textAlign: "center", color: "text.secondary", fontSize: 13, mt: 3 }}>
+          Prices indicative — assistive, never autonomous: you always review and send. No auto-apply spam.
+        </Typography>
+      </Container>
+
+      {/* CTA */}
+      <Container maxWidth="lg" sx={{ py: { xs: 7, md: 10 } }}>
+        <Box sx={{ borderRadius: 4, p: { xs: 4, md: 6 }, background: "linear-gradient(120deg,#0f172a,#1e293b)", color: "#fff", display: "flex", flexDirection: { xs: "column", md: "row" }, alignItems: { md: "center" }, justifyContent: "space-between", gap: 3 }}>
+          <Box>
+            <Typography sx={{ fontWeight: 800, fontSize: { xs: 24, md: 30 }, mb: 1 }}>Ready to organize your search?</Typography>
+            <Typography sx={{ color: "#94a3b8", fontSize: 17 }}>Sign in to start tracking applications, tailoring CVs, and following up with intent.</Typography>
+          </Box>
+          <Button size="large" variant="contained" onClick={() => navigate("/login")} sx={{ background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 800, px: 4, py: 1.25, whiteSpace: "nowrap" }}>
+            Sign in →
+          </Button>
+        </Box>
+      </Container>
+
+      {/* Footer */}
+      <Box sx={{ borderTop: "1px solid", borderColor: "divider", py: 4 }}>
+        <Container maxWidth="lg">
+          <Stack direction={{ xs: "column", sm: "row" }} justifyContent="space-between" alignItems="center" spacing={1}>
+            <Typography sx={{ color: "text.secondary", fontSize: 14 }}>© {new Date().getFullYear()} JobTrack — a focused workspace for the modern job search.</Typography>
+            <Button variant="text" onClick={() => navigate("/login")} sx={{ fontWeight: 700 }}>Sign in</Button>
+          </Stack>
+        </Container>
+      </Box>
+    </Box>
+  );
+}