Skip to content

Commit 97360bb

Browse files
ADefWebserverADefWebserver
committed
Refactor Home.razor layout for improved UX
Redesigned the Home.razor file to streamline the user experience: - Replaced the hero section with a "Two Powerful Modes" layout. - Removed the value strip section highlighting key features. - Added a new workflow section with step-by-step `RadzenTabs`. - Updated the features section to focus on general RFP features. - Redesigned the FAQ section with customizable `RadzenAccordion`. - Removed the CTA footer to declutter the layout. - Introduced `selectedAccordionIndex` to manage FAQ state. These changes enhance interactivity, simplify navigation, and better showcase the application's functionality.
1 parent 390ee59 commit 97360bb

1 file changed

Lines changed: 122 additions & 119 deletions

File tree

  • RFPResponsePOC/RFPResponsePOC.Client/Pages

‎RFPResponsePOC/RFPResponsePOC.Client/Pages/Home.razor‎

Lines changed: 122 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -72,21 +72,11 @@ else
7272
<!-- HERO -->
7373
<RadzenCard Style="background: linear-gradient(180deg, #0d47a1 0%, #1565c0 100%); color: white;">
7474
<div class="rz-grid rz-align-center rz-justify-between">
75-
<div class="rz-col-12 rz-sm-7 rz-py-4">
7675
<h1 class="rz-my-1">RFP Response Creator</h1>
7776
<p class="rz-mt-0 rz-mb-3 rz-text-lg">
7877
Automate professional RFP responses with AI—extract questions, generate answers, and produce polished proposals.
7978
Includes intelligent venue assignment with conflict-free scheduling.
80-
</p>
81-
<div class="rz-mb-2">
82-
<RadzenButton Icon="play_circle" Text="Watch Demo" Style="margin-right: 8px;" ButtonStyle="ButtonStyle.Light" />
83-
<RadzenButton Icon="rocket_launch" Text="Start Free Trial" ButtonStyle="ButtonStyle.Primary" />
84-
</div>
85-
<div class="rz-mt-2 rz-opacity-80 rz-text-sm">
86-
<RadzenIcon Icon="verified" Style="vertical-align: middle; margin-right:6px;" />
87-
Works with GPT-4o, GPT-5, and more via secure API keys.
88-
</div>
89-
</div>
79+
</p>
9080
<div class="rz-col-12 rz-sm-5 rz-text-center rz-py-4">
9181
<RadzenCard Style="background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);">
9282
<h3 class="rz-my-1">Two Powerful Modes</h3>
@@ -114,27 +104,67 @@ else
114104
</div>
115105
</RadzenCard>
116106

117-
<!-- VALUE STRIP -->
118-
<div class="rz-mt-4 rz-grid">
119-
<div class="rz-col-12 rz-sm-4">
120-
<RadzenCard>
121-
<h3 class="rz-flex rz-align-center rz-gap-2"><RadzenIcon Icon="auto_awesome" /> AI-Powered Answers</h3>
122-
<p>Extracts questions and drafts responses using your private knowledge base.</p>
123-
</RadzenCard>
124-
</div>
125-
<div class="rz-col-12 rz-sm-4">
126-
<RadzenCard>
127-
<h3 class="rz-flex rz-align-center rz-gap-2"><RadzenIcon Icon="meeting_room" /> Smart Venue Scheduling</h3>
128-
<p>Assigns rooms by capacity, setup, time, and availability—with conflict prevention.</p>
129-
</RadzenCard>
130-
</div>
131-
<div class="rz-col-12 rz-sm-4">
132-
<RadzenCard>
133-
<h3 class="rz-flex rz-align-center rz-gap-2"><RadzenIcon Icon="description" /> Professional Docs</h3>
134-
<p>Generates formatted Word files plus PDF/CSV exports and detailed venue tables.</p>
135-
</RadzenCard>
136-
</div>
137-
</div>
107+
<!-- WORKFLOW (TABS) -->
108+
<h2 class="rz-mt-5">How It Works</h2>
109+
<RadzenTabs @bind-SelectedIndex="selectedWorkflowTabIndex" Style="max-width: 1100px;">
110+
<Tabs>
111+
<RadzenTabsItem Text="Template">
112+
<Template>
113+
<RadzenIcon Icon="article" Style="margin-right: 0.5rem;" />
114+
1. Template
115+
</Template>
116+
<ChildContent>
117+
<div class="rz-p-4">
118+
<p>Select a built-in template (Default or DefaultVenue) or create your own with tokens.</p>
119+
</div>
120+
</ChildContent>
121+
</RadzenTabsItem>
122+
<RadzenTabsItem Text="Upload RFP">
123+
<Template>
124+
<RadzenIcon Icon="upload" Style="margin-right: 0.5rem;" />
125+
2. Upload RFP
126+
</Template>
127+
<ChildContent>
128+
<div class="rz-p-4">
129+
<p>Upload .docx/.pdf/images; OCR extracts text for analysis.</p>
130+
</div>
131+
</ChildContent>
132+
</RadzenTabsItem>
133+
<RadzenTabsItem Text="Review Q&A">
134+
<Template>
135+
<RadzenIcon Icon="question_answer" Style="margin-right: 0.5rem;" />
136+
3. Review Q&A
137+
</Template>
138+
<ChildContent>
139+
<div class="rz-p-4">
140+
<p>AI detects questions and drafts answers from your knowledge base—edit as needed.</p>
141+
</div>
142+
</ChildContent>
143+
</RadzenTabsItem>
144+
<RadzenTabsItem Text="Venue Assignment">
145+
<Template>
146+
<RadzenIcon Icon="event" Style="margin-right: 0.5rem;" />
147+
4. Venue Assignment
148+
</Template>
149+
<ChildContent>
150+
<div class="rz-p-4">
151+
<p>(Venue mode) Auto-assign rooms by capacity, setup, and schedule with conflict checks.</p>
152+
</div>
153+
</ChildContent>
154+
</RadzenTabsItem>
155+
<RadzenTabsItem Text="Generate">
156+
<Template>
157+
<RadzenIcon Icon="download" Style="margin-right: 0.5rem;" />
158+
5. Generate
159+
</Template>
160+
<ChildContent>
161+
<div class="rz-p-4">
162+
<p>Export professional Word documents, plus PDF/CSV tables for venues.</p>
163+
</div>
164+
</ChildContent>
165+
</RadzenTabsItem>
166+
</Tabs>
167+
</RadzenTabs>
138168

139169
<!-- FEATURES (TABS) -->
140170
<RadzenTabs Class="rz-mt-4" @bind-SelectedIndex="selectedTabIndex">
@@ -272,69 +302,7 @@ else
272302
</ChildContent>
273303
</RadzenTabsItem>
274304
</Tabs>
275-
</RadzenTabs>
276-
277-
<!-- WORKFLOW (TABS) -->
278-
<h2 class="rz-mt-5">How It Works</h2>
279-
<RadzenTabs @bind-SelectedIndex="selectedWorkflowTabIndex" Style="max-width: 1100px;">
280-
<Tabs>
281-
<RadzenTabsItem Text="Template">
282-
<Template>
283-
<RadzenIcon Icon="article" Style="margin-right: 0.5rem;" />
284-
1. Template
285-
</Template>
286-
<ChildContent>
287-
<div class="rz-p-4">
288-
<p>Select a built-in template (Default or DefaultVenue) or create your own with tokens.</p>
289-
</div>
290-
</ChildContent>
291-
</RadzenTabsItem>
292-
<RadzenTabsItem Text="Upload RFP">
293-
<Template>
294-
<RadzenIcon Icon="upload" Style="margin-right: 0.5rem;" />
295-
2. Upload RFP
296-
</Template>
297-
<ChildContent>
298-
<div class="rz-p-4">
299-
<p>Upload .docx/.pdf/images; OCR extracts text for analysis.</p>
300-
</div>
301-
</ChildContent>
302-
</RadzenTabsItem>
303-
<RadzenTabsItem Text="Review Q&A">
304-
<Template>
305-
<RadzenIcon Icon="question_answer" Style="margin-right: 0.5rem;" />
306-
3. Review Q&A
307-
</Template>
308-
<ChildContent>
309-
<div class="rz-p-4">
310-
<p>AI detects questions and drafts answers from your knowledge base—edit as needed.</p>
311-
</div>
312-
</ChildContent>
313-
</RadzenTabsItem>
314-
<RadzenTabsItem Text="Venue Assignment">
315-
<Template>
316-
<RadzenIcon Icon="event" Style="margin-right: 0.5rem;" />
317-
4. Venue Assignment
318-
</Template>
319-
<ChildContent>
320-
<div class="rz-p-4">
321-
<p>(Venue mode) Auto-assign rooms by capacity, setup, and schedule with conflict checks.</p>
322-
</div>
323-
</ChildContent>
324-
</RadzenTabsItem>
325-
<RadzenTabsItem Text="Generate">
326-
<Template>
327-
<RadzenIcon Icon="download" Style="margin-right: 0.5rem;" />
328-
5. Generate
329-
</Template>
330-
<ChildContent>
331-
<div class="rz-p-4">
332-
<p>Export professional Word documents, plus PDF/CSV tables for venues.</p>
333-
</div>
334-
</ChildContent>
335-
</RadzenTabsItem>
336-
</Tabs>
337-
</RadzenTabs>
305+
</RadzenTabs>
338306

339307
<!-- TARGET USERS -->
340308
<div class="rz-mt-5 rz-grid rz-gap-2">
@@ -366,32 +334,66 @@ else
366334

367335
<!-- FAQ (ACCORDION) -->
368336
<h2 class="rz-mt-5">FAQ</h2>
369-
<RadzenAccordion>
370-
<RadzenAccordionItem Text="How does the AI find answers in my documents?" Icon="travel_explore">
371-
<p>Your uploads are chunked and embedded (vector embeddings). The system semantically matches RFP questions to your stored content.</p>
372-
</RadzenAccordionItem>
373-
<RadzenAccordionItem Text="Can I override AI answers?" Icon="edit">
374-
<p>Yes. Review and edit any response before exporting. Your edits can be saved into templates or tokens for reuse.</p>
375-
</RadzenAccordionItem>
376-
<RadzenAccordionItem Text="How do venue assignments work?" Icon="event_seat">
377-
<p>We use a first-fit algorithm to assign the smallest suitable rooms based on capacity, setup, and availability, with conflict detection and re-calculation that preserves existing assignments.</p>
378-
</RadzenAccordionItem>
379-
<RadzenAccordionItem Text="What file formats are supported?" Icon="attach_file">
380-
<p>Uploads: .docx, .pdf, .png, .jpg, .jpeg. Exports: Word (.docx), PDF, and CSV.</p>
381-
</RadzenAccordionItem>
382-
<RadzenAccordionItem Text="Which models are supported?" Icon="hub">
383-
<p>Works with GPT-4o, GPT-5, and other OpenAI-compatible models via API keys.</p>
384-
</RadzenAccordionItem>
337+
<RadzenAccordion @bind-SelectedIndex="selectedAccordionIndex" Multiple="true">
338+
<Items>
339+
<RadzenAccordionItem Text="How does the AI find answers in my documents?">
340+
<Template>
341+
<RadzenIcon Icon="travel_explore" Style="margin-right: 0.5rem;" />
342+
How does the AI find answers in my documents?
343+
</Template>
344+
<ChildContent>
345+
<div class="rz-p-4">
346+
<p>Your uploads are chunked and embedded (vector embeddings). The system semantically matches RFP questions to your stored content.</p>
347+
</div>
348+
</ChildContent>
349+
</RadzenAccordionItem>
350+
<RadzenAccordionItem Text="Can I override AI answers?">
351+
<Template>
352+
<RadzenIcon Icon="edit" Style="margin-right: 0.5rem;" />
353+
Can I override AI answers?
354+
</Template>
355+
<ChildContent>
356+
<div class="rz-p-4">
357+
<p>Yes. Review and edit any response before exporting. Your edits can be saved into templates or tokens for reuse.</p>
358+
</div>
359+
</ChildContent>
360+
</RadzenAccordionItem>
361+
<RadzenAccordionItem Text="How do venue assignments work?">
362+
<Template>
363+
<RadzenIcon Icon="event_seat" Style="margin-right: 0.5rem;" />
364+
How do venue assignments work?
365+
</Template>
366+
<ChildContent>
367+
<div class="rz-p-4">
368+
<p>We use a first-fit algorithm to assign the smallest suitable rooms based on capacity, setup, and availability, with conflict detection and re-calculation that preserves existing assignments.</p>
369+
</div>
370+
</ChildContent>
371+
</RadzenAccordionItem>
372+
<RadzenAccordionItem Text="What file formats are supported?">
373+
<Template>
374+
<RadzenIcon Icon="attach_file" Style="margin-right: 0.5rem;" />
375+
What file formats are supported?
376+
</Template>
377+
<ChildContent>
378+
<div class="rz-p-4">
379+
<p>Uploads: .docx, .pdf, .png, .jpg, .jpeg. Exports: Word (.docx), PDF, and CSV.</p>
380+
</div>
381+
</ChildContent>
382+
</RadzenAccordionItem>
383+
<RadzenAccordionItem Text="Which models are supported?">
384+
<Template>
385+
<RadzenIcon Icon="hub" Style="margin-right: 0.5rem;" />
386+
Which models are supported?
387+
</Template>
388+
<ChildContent>
389+
<div class="rz-p-4">
390+
<p>Works with GPT-4o, GPT-5, and other OpenAI-compatible models via API keys.</p>
391+
</div>
392+
</ChildContent>
393+
</RadzenAccordionItem>
394+
</Items>
385395
</RadzenAccordion>
386396

387-
<!-- CTA FOOTER -->
388-
<RadzenCard class="rz-mt-5 rz-text-center">
389-
<h2 class="rz-my-1">Create Better RFP Responses—Faster</h2>
390-
<p class="rz-mb-3">Try RFP Response Creator to automate Q&amp;A, streamline venue scheduling, and export professional documents.</p>
391-
<RadzenButton Icon="rocket_launch" Text="Start Free Trial" ButtonStyle="ButtonStyle.Primary" Style="margin-right:8px;" />
392-
<RadzenButton Icon="chat" Text="Talk to Sales" ButtonStyle="ButtonStyle.Light" />
393-
</RadzenCard>
394-
395397
</div>
396398
<br />
397399
<br />
@@ -442,6 +444,7 @@ else
442444
int selectedTabIndex = 0;
443445
int selectedStepIndex = 0;
444446
int selectedWorkflowTabIndex = 0;
447+
int selectedAccordionIndex = -1; // -1 means no item is expanded by default
445448
446449
// Track active menu item for highlighting
447450
string ActiveMenuItem = "Home";

0 commit comments

Comments
 (0)