From bc08eb312a1bf1d27a1fa8fcca875f682b15b092 Mon Sep 17 00:00:00 2001 From: Anthony Phan <131195703+antphan12@users.noreply.github.com> Date: Tue, 17 Feb 2026 20:37:01 -0600 Subject: [PATCH] Updated the design of landing page Updated the design of the landing page to look more like the Figma drawing. Along with updating the Cognito routing to /account --- .../Components/Layout/Home.razor | 2 +- .../Components/Pages/Welcome.razor | 183 ++++++++++ .../Components/Pages/Welcome.razor.css | 341 ++++++++++++++++++ CulinaryCommandApp/Components/Routes.razor | 3 +- CulinaryCommandApp/wwwroot/css/app.css | 1 + 5 files changed, 528 insertions(+), 2 deletions(-) create mode 100644 CulinaryCommandApp/Components/Pages/Welcome.razor create mode 100644 CulinaryCommandApp/Components/Pages/Welcome.razor.css diff --git a/CulinaryCommandApp/Components/Layout/Home.razor b/CulinaryCommandApp/Components/Layout/Home.razor index 8171bd5..f14e477 100644 --- a/CulinaryCommandApp/Components/Layout/Home.razor +++ b/CulinaryCommandApp/Components/Layout/Home.razor @@ -1,4 +1,4 @@ -@page "/" +@page "/account" @namespace CulinaryCommand.Components.Pages @layout CulinaryCommand.Components.Layout.PublicLayout @rendermode InteractiveServer diff --git a/CulinaryCommandApp/Components/Pages/Welcome.razor b/CulinaryCommandApp/Components/Pages/Welcome.razor new file mode 100644 index 0000000..8a4ff2a --- /dev/null +++ b/CulinaryCommandApp/Components/Pages/Welcome.razor @@ -0,0 +1,183 @@ +@page "/welcome" +@namespace CulinaryCommand.Components.Pages +@layout CulinaryCommand.Components.Layout.PublicLayout + +Culinary Command - Product Overview + +
+ + +
+
+
+
Built for independent restaurants and multi-location operators
+

+ Run Your Restaurant With + Precision. +

+

+ Culinary Command gives you complete control over inventory, ingredients, + recipes, staff, and cost management - all in one intelligent dashboard. +

+
+ + + +
+ Get Started +
+
+

Trusted by the biggest restaurants

+
+
+ 500+ + Happy Users +
+
+ 32 Hrs+ + Time Saved +
+
+ 1000+ + Sales +
+
+
+
+
+ +
+
+

Core Features

+

Full visibility across every station.

+
+
+
+

Inventory Intelligence

+

Track stock, receive reorder alerts, and sync usage across locations.

+
+
+

Recipe Standardization

+

Keep prep consistent with costed recipes and smart yield tracking.

+
+
+

Task Command

+

Assign tasks, monitor completion, and automate daily checklists.

+
+
+

Team Visibility

+

Know who is on shift, what is done, and what needs attention.

+
+
+
+ +
+
+

How It Works

+

Set up once. Run with confidence every service.

+
+
+
+ 01 +

Connect your locations

+

Import inventory, create recipes, and invite managers in minutes.

+
+
+ 02 +

Automate the playbook

+

Set reorder levels, task cadences, and prep workflows.

+
+
+ 03 +

Track results

+

See waste reduction, time saved, and team performance instantly.

+
+
+
+ +
+
+

Pricing

+

Plans designed for growing kitchens.

+
+
+
+

Starter

+
$49/mo
+
    +
  • 1 location
    • +
  • Inventory + recipes
    • +
  • Email support
    • +
+ Start now +
+
+
Most Popular
+

Growth

+
$129/mo
+
    +
  • Up to 5 locations
    • +
  • Tasks + automation
    • +
  • Priority support
    • +
+ Get Started +
+
+

Enterprise

+
Custom
+
    +
  • Unlimited locations
    • +
  • Dedicated success team
    • +
  • Custom integrations
    • +
+ Talk to sales +
+
+
+ +
+
+

FAQ

+

Quick answers to common questions.

+
+
+
+

Does it work for multiple locations?

+

Yes. Monitor inventory, tasks, and costs across every location in one view.

+
+
+

How fast can we get started?

+

Most teams are live within a day. Import inventory and invite staff in minutes.

+
+
+

Can we customize workflows?

+

Absolutely. Build checklists, reorder points, and roles to match your operation.

+
+
+
+ +
+
+

Ready to run service with clarity?

+

Sign in and launch your command center.

+
+ Get Started +
+
diff --git a/CulinaryCommandApp/Components/Pages/Welcome.razor.css b/CulinaryCommandApp/Components/Pages/Welcome.razor.css new file mode 100644 index 0000000..a9927f1 --- /dev/null +++ b/CulinaryCommandApp/Components/Pages/Welcome.razor.css @@ -0,0 +1,341 @@ +.welcome { + padding: 30px 24px 70px; + background: #f4f4f4; + color: #1f2937; + min-height: 100vh; +} + +.welcome-nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + padding: 8px 14px; + background: #ffffff; + border-radius: 12px; + border: 1px solid #e5e7eb; + box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); + margin-bottom: 22px; +} + +.nav-brand { + font-weight: 700; + color: #16a34a; + padding-left: 8px; +} + +.nav-pill { + display: flex; + gap: 8px; + padding: 6px 8px; + border-radius: 999px; + background: linear-gradient(135deg, #22c55e, #10b981); +} + +.nav-pill a { + color: #ffffff; + text-decoration: none; + padding: 6px 12px; + border-radius: 999px; + font-size: 0.85rem; + letter-spacing: 0.02em; + border: 1px solid rgba(255, 255, 255, 0.45); + transition: background 0.2s ease; +} + +.nav-pill a.active, +.nav-pill a:hover { + background: rgba(255, 255, 255, 0.2); +} + +.hero-banner { + background: #ffffff; + border-radius: 14px; + padding: 16px; + border: 1px solid #e5e7eb; + box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1); +} + +.hero-image { + position: relative; + border-radius: 14px; + min-height: 420px; + overflow: hidden; + background-image: linear-gradient(120deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.2)), + url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=2000&auto=format&fit=crop"); + background-size: cover; + background-position: center; +} + +.hero-overlay { + position: absolute; + top: 26px; + left: 26px; + max-width: 520px; + color: #ffffff; +} + +.hero-badge { + display: inline-flex; + align-items: center; + padding: 6px 12px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.18); + font-size: 0.75rem; + margin-bottom: 14px; +} + +.hero-overlay h1 { + font-size: clamp(2.5rem, 4.5vw, 3.8rem); + font-weight: 700; + margin-bottom: 12px; +} + +.hero-overlay h1 span { + display: block; + font-family: "Playfair Display", serif; + font-size: clamp(2.6rem, 4.8vw, 4rem); +} + +.hero-overlay p { + font-size: 0.95rem; + line-height: 1.5; + margin-bottom: 18px; +} + +.hero-social { + display: flex; + gap: 8px; + margin-bottom: 14px; +} + +.social-btn { + width: 32px; + height: 32px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.2); + color: #ffffff; + display: inline-flex; + align-items: center; + justify-content: center; + text-decoration: none; + border: 1px solid rgba(255, 255, 255, 0.55); +} + +.btn-cta { + background: #22c55e; + color: #ffffff; + padding: 10px 16px; + border-radius: 999px; + font-weight: 600; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 6px; + border: 1px solid rgba(22, 163, 74, 0.6); +} + +.welcome .btn-primary { + background: #22c55e; + color: #111827; + padding: 10px 18px; + border-radius: 999px; + font-weight: 700; + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid rgba(22, 163, 74, 0.7); +} + +.btn-ghost { + color: #111827; + border: 1px solid rgba(22, 163, 74, 0.85); + padding: 10px 18px; + border-radius: 999px; + text-decoration: none; + font-weight: 600; + display: inline-flex; + align-items: center; + justify-content: center; + background: #22c55e; +} + +.btn-ghost:hover { + color: #0f172a; + border-color: rgba(22, 163, 74, 0.95); + box-shadow: 0 10px 22px rgba(34, 197, 94, 0.28); +} + +.hero-stats { + position: absolute; + right: 24px; + bottom: 18px; + color: #ffffff; + text-align: right; +} + +.hero-stats h3 { + font-size: 1.2rem; + margin-bottom: 10px; +} + +.stats-row { + display: flex; + gap: 18px; + justify-content: flex-end; +} + +.stats-row strong { + display: block; + font-size: 1.1rem; +} + +.stats-row span { + font-size: 0.7rem; + letter-spacing: 0.04em; +} + +.welcome-section { + margin-top: 60px; +} + +.section-header { + margin-bottom: 24px; +} + +.section-kicker { + text-transform: uppercase; + letter-spacing: 0.2em; + font-size: 0.75rem; + color: #16a34a; +} + +.section-header h2 { + font-size: clamp(1.8rem, 3vw, 2.4rem); +} + +.feature-grid, +.steps, +.pricing-grid, +.faq-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 18px; +} + +.feature-card, +.step-card, +.pricing-card, +.faq-card { + background: #ffffff; + border-radius: 18px; + padding: 20px; + border: 1px solid #e5e7eb; + box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08); +} + +.step-number { + color: #16a34a; + font-weight: 700; + letter-spacing: 0.1em; + font-size: 0.85rem; +} + +.pricing-card ul { + list-style: none; + padding: 0; + margin: 14px 0 18px; + color: #6b7280; +} + +.pricing-card li { + margin-bottom: 8px; +} + +.price { + font-size: 2rem; + font-weight: 700; + margin: 8px 0; +} + +.price span { + font-size: 0.9rem; + color: #6b7280; + margin-left: 4px; +} + +.pricing-card.featured { + border-color: rgba(34, 197, 94, 0.6); + box-shadow: 0 20px 50px rgba(34, 197, 94, 0.2); +} + +.featured-tag { + display: inline-flex; + padding: 4px 10px; + border-radius: 999px; + background: rgba(34, 197, 94, 0.18); + color: #15803d; + border: 1px solid rgba(22, 163, 74, 0.35); + font-size: 0.75rem; + margin-bottom: 8px; +} + +.welcome-cta { + margin-top: 60px; + padding: 28px; + border-radius: 18px; + background: #ffffff; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + border: 1px solid #e5e7eb; + box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08); +} + +.welcome-cta p { + color: #6b7280; + margin: 6px 0 0; +} + +@media (max-width: 900px) { + .welcome-nav { + flex-direction: column; + align-items: flex-start; + } + + .nav-pill { + flex-wrap: wrap; + } + + .hero-stats { + position: static; + padding: 16px 18px 22px; + text-align: left; + } + + .stats-row { + justify-content: flex-start; + } + + .welcome-cta { + flex-direction: column; + align-items: flex-start; + } +} + +@media (max-width: 600px) { + .welcome { + padding: 28px 20px 60px; + } + + .hero-overlay { + position: static; + padding: 22px 18px 10px; + } + + .hero-image { + min-height: 520px; + } +} diff --git a/CulinaryCommandApp/Components/Routes.razor b/CulinaryCommandApp/Components/Routes.razor index a6c78ec..9b7624d 100644 --- a/CulinaryCommandApp/Components/Routes.razor +++ b/CulinaryCommandApp/Components/Routes.razor @@ -6,7 +6,8 @@ @if (routeData.PageType == typeof(CulinaryCommand.Components.Pages.SignIn) || routeData.PageType == typeof(CulinaryCommand.Components.Pages.SignUp) || routeData.PageType == typeof(CulinaryCommand.Components.Pages.AdminSignUp) - || routeData.PageType == typeof(CulinaryCommand.Components.Pages.Home)) + || routeData.PageType == typeof(CulinaryCommand.Components.Pages.Home) + || routeData.PageType == typeof(CulinaryCommand.Components.Pages.Welcome)) { } diff --git a/CulinaryCommandApp/wwwroot/css/app.css b/CulinaryCommandApp/wwwroot/css/app.css index e954a58..0393b79 100644 --- a/CulinaryCommandApp/wwwroot/css/app.css +++ b/CulinaryCommandApp/wwwroot/css/app.css @@ -1,5 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Spline+Sans:wght@400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Space+Grotesk:wght@500;600&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap"); html, body {