Skip to content

Commit 594f380

Browse files
gpickettgpickett
committed
update landing page
1 parent 12a7980 commit 594f380

6 files changed

Lines changed: 54 additions & 80 deletions

File tree

‎content-gen/src/app/frontend/src/App.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { v4 as uuidv4 } from 'uuid';
1515
import { ChatPanel } from './components/ChatPanel';
1616
import { ChatHistory } from './components/ChatHistory';
1717
import type { ChatMessage, CreativeBrief, Product, GeneratedContent } from './types';
18+
import ContosoLogo from './styles/images/contoso.svg';
1819

1920
interface UserInfo {
2021
user_principal_id: string;
@@ -23,16 +24,6 @@ interface UserInfo {
2324
is_authenticated: boolean;
2425
}
2526

26-
// Contoso logo SVG component
27-
function ContosoLogo() {
28-
return (
29-
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
30-
<path d="M14 0L28 14L14 28L0 14L14 0Z" fill="#0078D4"/>
31-
<path d="M14 4L24 14L14 24L4 14L14 4Z" fill="#50E6FF"/>
32-
<path d="M14 8L20 14L14 20L8 14L14 8Z" fill="white"/>
33-
</svg>
34-
);
35-
}
3627

3728
function App() {
3829
const [conversationId, setConversationId] = useState<string>(() => uuidv4());
@@ -640,7 +631,7 @@ function App() {
640631
flexShrink: 0,
641632
}}>
642633
<div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(8px, 1.5vw, 10px)' }}>
643-
<ContosoLogo />
634+
<img src={ContosoLogo} alt="Contoso" width="28" height="28" />
644635
<Text weight="semibold" size={500} style={{ color: tokens.colorNeutralForeground1, fontSize: 'clamp(16px, 2.5vw, 20px)' }}>
645636
Contoso
646637
</Text>

‎content-gen/src/app/frontend/src/components/ChatPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export function ChatPanel({
113113
}}
114114
>
115115
{showWelcome ? (
116-
<WelcomeCard onSuggestionClick={handleSuggestionClick} />
116+
<WelcomeCard onSuggestionClick={handleSuggestionClick} currentInput={inputValue} />
117117
) : (
118118
<>
119119
{messages.map((message) => (

‎content-gen/src/app/frontend/src/components/WelcomeCard.tsx‎

Lines changed: 29 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,35 @@ import {
33
Text,
44
tokens,
55
} from '@fluentui/react-components';
6-
import SamplePromptIcon from '../styles/images/SamplePrompt.png';
7-
8-
// Copilot-style hexagon icon
9-
function CopilotIcon() {
10-
return (
11-
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12-
<defs>
13-
<linearGradient id="copilotGradient" x1="0%" y1="0%" x2="100%" y2="100%">
14-
<stop offset="0%" stopColor="#6366F1" />
15-
<stop offset="50%" stopColor="#8B5CF6" />
16-
<stop offset="100%" stopColor="#06B6D4" />
17-
</linearGradient>
18-
</defs>
19-
<path
20-
d="M24 4L42 14V34L24 44L6 34V14L24 4Z"
21-
fill="url(#copilotGradient)"
22-
/>
23-
<path
24-
d="M24 12L36 18V30L24 36L12 30V18L24 12Z"
25-
fill="white"
26-
fillOpacity="0.3"
27-
/>
28-
<circle cx="24" cy="24" r="6" fill="white"/>
29-
</svg>
30-
);
31-
}
6+
import FirstPromptIcon from '../styles/images/firstprompt.svg';
7+
import SecondPromptIcon from '../styles/images/secondprompt.svg';
328

339
interface SuggestionCard {
3410
title: string;
35-
description: string;
3611
prompt: string;
12+
icon: string;
3713
}
3814

3915
const suggestions: SuggestionCard[] = [
4016
{
41-
title: 'Generate ad copy and image ideas for a social media campaign promoting Paint for Home Décor.',
42-
description: 'Generate compelling copy for your next campaign',
43-
prompt: 'Generate ad copy and image ideas for a social media campaign promoting Paint for Home Décor.',
44-
},
45-
{
46-
title: 'Summarize my creative brief and suggest mood, audience, and image style for the campaign.',
47-
description: 'Summarize your creative brief for better insights',
48-
prompt: 'Summarize my creative brief and suggest mood, audience, and image style for the campaign.',
17+
title: 'Generate a social media campaign with ad copy and an image. This is for "Back to School" and the audience is parents of school age children. Tone is playful and humorous. The image must include children playing.',
18+
prompt: 'Generate a social media campaign with ad copy and an image. This is for "Back to School" and the audience is parents of school age children. Tone is playful and humorous. The image must include children playing.',
19+
icon: FirstPromptIcon,
4920
},
5021
{
51-
title: 'Create a multi-modal content plan with visuals and captions based on brand guidelines.',
52-
description: 'Create a content plan with visuals and captions',
53-
prompt: 'Create a multi-modal content plan with visuals and captions based on brand guidelines.',
54-
},
22+
title: 'I need to create a social media post about paint products for home remodels. The campaign is titled "Brighten Your Springtime" and the audience is new homeowners. I need marketing copy plus an image. The image should be an informal living room with tasteful furnishings.',
23+
prompt: 'I need to create a social media post about paint products for home remodels. The campaign is titled "Brighten Your Springtime" and the audience is new homeowners. I need marketing copy plus an image. The image should be an informal living room with tasteful furnishings.',
24+
icon: SecondPromptIcon,
25+
}
5526
];
5627

5728
interface WelcomeCardProps {
5829
onSuggestionClick: (prompt: string) => void;
30+
currentInput?: string;
5931
}
6032

61-
export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
33+
export function WelcomeCard({ onSuggestionClick, currentInput = '' }: WelcomeCardProps) {
34+
const selectedIndex = suggestions.findIndex(s => s.prompt === currentInput);
6235
return (
6336
<div style={{
6437
display: 'flex',
@@ -71,10 +44,6 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
7144
width: '100%',
7245
boxSizing: 'border-box',
7346
}}>
74-
{/* Today label */}
75-
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
76-
Today
77-
</Text>
7847

7948
{/* Welcome card with suggestions inside */}
8049
<div style={{
@@ -87,9 +56,6 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
8756
}}>
8857
{/* Header with icon and welcome message */}
8958
<div style={{ textAlign: 'center', marginBottom: 'clamp(16px, 3vw, 24px)' }}>
90-
<div style={{ marginBottom: 'clamp(12px, 2vw, 16px)', display: 'flex', justifyContent: 'center' }}>
91-
<CopilotIcon />
92-
</div>
9359
<Text
9460
size={400}
9561
weight="semibold"
@@ -121,24 +87,29 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
12187
flexDirection: 'column',
12288
gap: 'clamp(8px, 1.5vw, 12px)',
12389
}}>
124-
{suggestions.map((suggestion, index) => (
90+
{suggestions.map((suggestion, index) => {
91+
const isSelected = index === selectedIndex;
92+
return (
12593
<Card
12694
key={index}
12795
onClick={() => onSuggestionClick(suggestion.prompt)}
12896
style={{
12997
padding: 'clamp(12px, 2vw, 16px)',
13098
cursor: 'pointer',
131-
backgroundColor: tokens.colorNeutralBackground1,
132-
border: `1px solid ${tokens.colorNeutralStroke1}`,
99+
backgroundColor: isSelected ? tokens.colorBrandBackground2 : tokens.colorNeutralBackground1,
100+
border: 'none',
101+
borderRadius: '16px',
133102
transition: 'all 0.2s ease',
134103
}}
135104
onMouseEnter={(e) => {
136-
e.currentTarget.style.backgroundColor = tokens.colorNeutralBackground1Hover;
137-
e.currentTarget.style.borderColor = tokens.colorBrandStroke1;
105+
if (!isSelected) {
106+
e.currentTarget.style.backgroundColor = tokens.colorBrandBackground2;
107+
}
138108
}}
139109
onMouseLeave={(e) => {
140-
e.currentTarget.style.backgroundColor = tokens.colorNeutralBackground1;
141-
e.currentTarget.style.borderColor = tokens.colorNeutralStroke1;
110+
if (!isSelected) {
111+
e.currentTarget.style.backgroundColor = tokens.colorNeutralBackground1;
112+
}
142113
}}
143114
>
144115
<div style={{
@@ -157,8 +128,8 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
157128
flexShrink: 0,
158129
}}>
159130
<img
160-
src={SamplePromptIcon}
161-
alt="Sample prompt"
131+
src={suggestion.icon}
132+
alt="Prompt icon"
162133
style={{
163134
width: '100%',
164135
height: '100%',
@@ -168,29 +139,19 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
168139
</div>
169140
<div style={{ minWidth: 0, flex: 1 }}>
170141
<Text
171-
weight="semibold"
172142
size={300}
173143
block
174144
style={{
175-
marginBottom: '2px',
176145
fontSize: 'clamp(13px, 1.8vw, 15px)',
177146
}}
178147
>
179148
{suggestion.title}
180149
</Text>
181-
<Text
182-
size={200}
183-
style={{
184-
color: tokens.colorNeutralForeground3,
185-
fontSize: 'clamp(11px, 1.5vw, 13px)',
186-
}}
187-
>
188-
{suggestion.description}
189-
</Text>
190150
</div>
191151
</div>
192152
</Card>
193-
))}
153+
);
154+
})}
194155
</div>
195156
</div>
196157
</div>

‎content-gen/src/app/frontend/src/styles/images/contoso.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎content-gen/src/app/frontend/src/styles/images/firstprompt.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎content-gen/src/app/frontend/src/styles/images/secondprompt.svg‎

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)