Skip to content

Commit 5f0329a

Browse files
hunterjamhunterjam
authored
Merge pull request #13 from hunterjam/updateLangingpage
update landing page
2 parents 12a7980 + 8ea872c commit 5f0329a

6 files changed

Lines changed: 36 additions & 81 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 & 69 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.png';
7+
import SecondPromptIcon from '../styles/images/secondprompt.png';
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,11 +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>
78-
7947
{/* Welcome card with suggestions inside */}
8048
<div style={{
8149
padding: 'clamp(16px, 4vw, 32px)',
@@ -87,9 +55,6 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
8755
}}>
8856
{/* Header with icon and welcome message */}
8957
<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>
9358
<Text
9459
size={400}
9560
weight="semibold"
@@ -121,24 +86,29 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
12186
flexDirection: 'column',
12287
gap: 'clamp(8px, 1.5vw, 12px)',
12388
}}>
124-
{suggestions.map((suggestion, index) => (
89+
{suggestions.map((suggestion, index) => {
90+
const isSelected = index === selectedIndex;
91+
return (
12592
<Card
12693
key={index}
12794
onClick={() => onSuggestionClick(suggestion.prompt)}
12895
style={{
12996
padding: 'clamp(12px, 2vw, 16px)',
13097
cursor: 'pointer',
131-
backgroundColor: tokens.colorNeutralBackground1,
132-
border: `1px solid ${tokens.colorNeutralStroke1}`,
98+
backgroundColor: isSelected ? tokens.colorBrandBackground2 : tokens.colorNeutralBackground1,
99+
border: 'none',
100+
borderRadius: '16px',
133101
transition: 'all 0.2s ease',
134102
}}
135103
onMouseEnter={(e) => {
136-
e.currentTarget.style.backgroundColor = tokens.colorNeutralBackground1Hover;
137-
e.currentTarget.style.borderColor = tokens.colorBrandStroke1;
104+
if (!isSelected) {
105+
e.currentTarget.style.backgroundColor = tokens.colorBrandBackground2;
106+
}
138107
}}
139108
onMouseLeave={(e) => {
140-
e.currentTarget.style.backgroundColor = tokens.colorNeutralBackground1;
141-
e.currentTarget.style.borderColor = tokens.colorNeutralStroke1;
109+
if (!isSelected) {
110+
e.currentTarget.style.backgroundColor = tokens.colorNeutralBackground1;
111+
}
142112
}}
143113
>
144114
<div style={{
@@ -157,8 +127,8 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
157127
flexShrink: 0,
158128
}}>
159129
<img
160-
src={SamplePromptIcon}
161-
alt="Sample prompt"
130+
src={suggestion.icon}
131+
alt="Prompt icon"
162132
style={{
163133
width: '100%',
164134
height: '100%',
@@ -168,29 +138,19 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
168138
</div>
169139
<div style={{ minWidth: 0, flex: 1 }}>
170140
<Text
171-
weight="semibold"
172141
size={300}
173142
block
174143
style={{
175-
marginBottom: '2px',
176144
fontSize: 'clamp(13px, 1.8vw, 15px)',
177145
}}
178146
>
179147
{suggestion.title}
180148
</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>
190149
</div>
191150
</div>
192151
</Card>
193-
))}
152+
);
153+
})}
194154
</div>
195155
</div>
196156
</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.png‎

1.99 KB
Loading

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

2.8 KB
Loading

0 commit comments

Comments
 (0)