Skip to content

Commit a167b04

Browse files
CopilotTechQuery
Copilot
and
TechQuery
committed
Reorganize hackathon page with pink gradient cards and LESS styling
Co-authored-by: TechQuery <[email protected]>
1 parent ef55436 commit a167b04

File tree

2 files changed

+191
-246
lines changed

2 files changed

+191
-246
lines changed

‎pages/hackathon/[id].tsx‎

Lines changed: 114 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Badge, Button, Card, Col, Container, Row } from 'react-bootstrap';
66
import { PageHead } from '../../components/Layout/PageHead';
77
import { generateMockHackathon, Hackathon } from '../../models/Hackathon';
88
import { I18nContext } from '../../models/Translation';
9-
import styles from '../../styles/Hackathon.module.scss';
9+
import styles from '../../styles/Hackathon.module.less';
1010

1111
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
1212
const id = params?.id as string;
@@ -110,154 +110,101 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ hackathon }) => {
110110
</section>
111111

112112
<Container className="my-5">
113-
{/* Agenda Section */}
114-
<section className={styles.section}>
115-
<h2 className={styles.sectionTitle}>📅 {t('agenda')}</h2>
116-
<div className="mt-4">
117-
{hackathon.agenda.map((item, index) => (
118-
<div key={index} className={`${styles.agendaItem} ${styles[item.type]}`}>
119-
<Row className="align-items-center">
120-
<Col md={8}>
121-
<h4 className="text-white mb-2">{item.name}</h4>
122-
<p className="text-white-50 mb-0">{item.summary}</p>
123-
</Col>
124-
<Col md={4} className="text-md-end mt-3 mt-md-0">
125-
<Badge bg={getTypeColor(item.type)} className="me-2 mb-2">
126-
{t(item.type as any)}
127-
</Badge>
128-
<div className="text-white-50 small mt-2">
129-
{formatDateTime(item.startedAt)} - {formatDateTime(item.endedAt)}
130-
</div>
131-
</Col>
132-
</Row>
133-
</div>
134-
))}
135-
</div>
136-
</section>
137-
138-
{/* Participants Section */}
139-
<section className={styles.section}>
140-
<h2 className={styles.sectionTitle}>👥 {t('participants')}</h2>
141-
<Row className="mt-4">
142-
{hackathon.people.map((person, index) => (
143-
<Col key={index} md={6} lg={4}>
144-
<Card className={styles.personCard}>
145-
<Card.Body>
146-
<div className="text-center mb-3">
147-
<img src={person.avatar} alt={person.name} className={styles.avatar} />
148-
</div>
149-
<h5 className="text-white text-center mb-3">{person.name}</h5>
150-
<div className="text-white-50 small mb-2">
151-
<strong>{t('gender')}:</strong> {t(person.gender as any)}
152-
</div>
153-
<div className="text-white-50 small mb-2">
154-
<strong>{t('age')}:</strong> {person.age}
155-
</div>
156-
<div className="text-white-50 small mb-2">
157-
<strong>{t('address')}:</strong> {person.address}
158-
</div>
159-
<div className="mb-3">
160-
<div className="text-white-50 small mb-2">
161-
<strong>{t('skills')}:</strong>
113+
{/* Header: Agenda and Prizes side by side */}
114+
<Row>
115+
{/* Agenda Section */}
116+
<Col lg={6}>
117+
<section className={styles.section}>
118+
<h2 className={styles.sectionTitle}>📅 {t('agenda')}</h2>
119+
<div className="mt-4">
120+
{hackathon.agenda.map((item, index) => (
121+
<div key={index} className={`${styles.agendaItem} ${styles[item.type]}`}>
122+
<h5 className="text-white mb-2">{item.name}</h5>
123+
<p className="text-white-50 small mb-2">{item.summary}</p>
124+
<div className="d-flex justify-content-between align-items-center">
125+
<Badge bg={getTypeColor(item.type)} className="me-2">
126+
{t(item.type as any)}
127+
</Badge>
128+
<div className="text-white-50 small">
129+
{formatDateTime(item.startedAt)} - {formatDateTime(item.endedAt)}
162130
</div>
163-
{person.skills.map((skill, idx) => (
164-
<span key={idx} className={styles.skillBadge}>
165-
{skill}
166-
</span>
167-
))}
168131
</div>
169-
<Button
170-
variant="outline-info"
171-
size="sm"
172-
href={person.githubLink}
173-
target="_blank"
174-
className="w-100"
175-
>
176-
{t('view_github')}
177-
</Button>
178-
</Card.Body>
179-
</Card>
180-
</Col>
181-
))}
182-
</Row>
183-
</section>
132+
</div>
133+
))}
134+
</div>
135+
</section>
136+
</Col>
184137

185-
{/* Organizations Section */}
186-
<section className={styles.section}>
187-
<h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2>
188-
<Row className="mt-4">
189-
{hackathon.organizations.map((org, index) => (
190-
<Col key={index} md={6}>
191-
<Card className={styles.orgCard}>
192-
<Card.Body>
138+
{/* Prizes Section - Frameless vertical cards */}
139+
<Col lg={6}>
140+
<section className={styles.section}>
141+
<h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2>
142+
<div className="mt-4">
143+
{hackathon.prizes.map((prize, index) => (
144+
<div key={index} className={styles.prizeCard}>
193145
<Row className="align-items-center">
194146
<Col xs={3}>
195-
<img src={org.logo} alt={org.name} className={styles.logo} />
147+
<img src={prize.image} alt={prize.name} className={styles.prizeImage} />
196148
</Col>
197149
<Col xs={9}>
198-
<h5 className="text-white mb-2">{org.name}</h5>
199-
<a
200-
href={org.link}
201-
target="_blank"
202-
rel="noreferrer"
203-
className="text-info small"
204-
>
205-
{org.link}
206-
</a>
150+
<h5 className="text-white mb-2">{prize.name}</h5>
151+
<div className="d-flex justify-content-between align-items-center mb-2">
152+
<Badge bg={getLevelColor(prize.level)}>{t(prize.level as any)}</Badge>
153+
<span className="text-white fw-bold">
154+
¥{prize.price.toLocaleString()}
155+
</span>
156+
</div>
157+
<div className="text-white-50 small">
158+
<strong>{t('sponsor')}:</strong> {prize.sponsor} • <strong>{t('amount')}:</strong> {prize.amount}
159+
</div>
207160
</Col>
208161
</Row>
209-
<hr className="border-secondary" />
210-
<div className="text-white-50 small mb-2">
211-
<strong>{t('members')}:</strong> {org.members.join(', ')}
212-
</div>
213-
<div className="text-white-50 small">
214-
<strong>{t('prizes')}:</strong> {org.prizes.join(', ')}
215-
</div>
216-
</Card.Body>
217-
</Card>
218-
</Col>
219-
))}
220-
</Row>
221-
</section>
162+
</div>
163+
))}
164+
</div>
165+
</section>
166+
</Col>
167+
</Row>
222168

223-
{/* Prizes Section */}
169+
{/* Mid-front: Organizations - Frameless vertical cards */}
224170
<section className={styles.section}>
225-
<h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2>
226-
<Row className="mt-4">
227-
{hackathon.prizes.map((prize, index) => (
228-
<Col key={index} md={6} lg={4}>
229-
<Card className={`${styles.prizeCard} ${styles[prize.level]}`}>
230-
<Card.Body>
231-
<img src={prize.image} alt={prize.name} className={styles.prizeImage} />
232-
<h5 className="text-white mb-3">{prize.name}</h5>
233-
<div className="d-flex justify-content-between align-items-center mb-2">
234-
<Badge bg={getLevelColor(prize.level)}>{t(prize.level as any)}</Badge>
235-
<span className="text-white fw-bold">¥{prize.price.toLocaleString()}</span>
236-
</div>
237-
<div className="text-white-50 small mb-2">
238-
<strong>{t('amount')}:</strong> {prize.amount}
239-
</div>
240-
<div className="text-white-50 small">
241-
<strong>{t('sponsor')}:</strong> {prize.sponsor}
242-
</div>
243-
</Card.Body>
244-
</Card>
245-
</Col>
171+
<h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2>
172+
<div className="mt-4">
173+
{hackathon.organizations.map((org, index) => (
174+
<div key={index} className={styles.orgCard}>
175+
<Row className="align-items-center mb-3">
176+
<Col xs={2} md={1}>
177+
<img src={org.logo} alt={org.name} className={styles.logo} />
178+
</Col>
179+
<Col xs={10} md={11}>
180+
<h5 className="text-white mb-2">{org.name}</h5>
181+
<a href={org.link} target="_blank" rel="noreferrer" className="text-info small">
182+
{org.link}
183+
</a>
184+
</Col>
185+
</Row>
186+
<div className="text-white-50 small mb-2">
187+
<strong>{t('members')}:</strong> {org.members.join(', ')}
188+
</div>
189+
<div className="text-white-50 small">
190+
<strong>{t('prizes')}:</strong> {org.prizes.join(', ')}
191+
</div>
192+
</div>
246193
))}
247-
</Row>
194+
</div>
248195
</section>
249196

250-
{/* Templates Section */}
197+
{/* Mid-back: Templates - Narrow cards, 3-4 per row */}
251198
<section className={styles.section}>
252199
<h2 className={styles.sectionTitle}>🛠️ {t('templates')}</h2>
253200
<Row className="mt-4">
254201
{hackathon.templates.map((template, index) => (
255-
<Col key={index} md={6}>
202+
<Col key={index} md={6} lg={4} xl={3}>
256203
<Card className={styles.templateCard}>
257204
<Card.Body>
258-
<h5 className="text-white mb-3">{template.name}</h5>
259-
<p className="text-white-50 mb-3">{template.summary}</p>
260-
<div className="d-flex gap-2">
205+
<h6 className="text-white mb-3">{template.name}</h6>
206+
<p className="text-white-50 small mb-3">{template.summary}</p>
207+
<div className="d-flex flex-column gap-2">
261208
<Button
262209
variant="outline-primary"
263210
size="sm"
@@ -282,39 +229,48 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ hackathon }) => {
282229
</Row>
283230
</section>
284231

285-
{/* Projects Section */}
232+
{/* Mid-back: Projects - Narrow cards, 3-4 per row */}
286233
<section className={styles.section}>
287234
<h2 className={styles.sectionTitle}>💡 {t('projects')}</h2>
288-
<div className="mt-4">
235+
<Row className="mt-4">
289236
{hackathon.projects.map((project, index) => (
290-
<Card key={index} className={styles.projectCard}>
291-
<Card.Body>
292-
<Row className="align-items-center">
293-
<Col md={10}>
294-
<h4 className="text-white mb-3">{project.name}</h4>
295-
<p className="text-white-50 mb-3">{project.summary}</p>
296-
<Row className="text-white-50 small">
297-
<Col md={6} className="mb-2">
298-
<strong>{t('created_by')}:</strong> {project.createdBy}
299-
</Col>
300-
<Col md={6} className="mb-2">
301-
<strong>{t('group')}:</strong> {project.group.join(', ')}
302-
</Col>
303-
<Col md={6} className="mb-2">
304-
<strong>{t('members')}:</strong> {project.members.join(', ')}
305-
</Col>
306-
<Col md={6} className="mb-2">
307-
<strong>{t('products')}:</strong> {project.products.join(', ')}
308-
</Col>
309-
</Row>
310-
</Col>
311-
<Col md={2} className="text-center">
237+
<Col key={index} md={6} lg={4} xl={3}>
238+
<Card className={styles.projectCard}>
239+
<Card.Body>
240+
<div className="d-flex justify-content-between align-items-start mb-3">
241+
<h6 className="text-white flex-grow-1">{project.name}</h6>
312242
<div className={styles.scoreCircle}>{project.score}</div>
313-
<div className="text-white-50 small mt-2">{t('score')}</div>
314-
</Col>
315-
</Row>
316-
</Card.Body>
317-
</Card>
243+
</div>
244+
<p className="text-white-50 small mb-3">{project.summary}</p>
245+
<div className="text-white-50 small mb-2">
246+
<strong>{t('created_by')}:</strong> {project.createdBy}
247+
</div>
248+
<div className="text-white-50 small mb-2">
249+
<strong>{t('group')}:</strong> {project.group.join(', ')}
250+
</div>
251+
<div className="text-white-50 small">
252+
<strong>{t('members')}:</strong> {project.members.join(', ')}
253+
</div>
254+
</Card.Body>
255+
</Card>
256+
</Col>
257+
))}
258+
</Row>
259+
</section>
260+
261+
{/* Footer: Participants - Circular avatars only */}
262+
<section className={styles.section}>
263+
<h2 className={styles.sectionTitle}>👥 {t('participants')}</h2>
264+
<div className={styles.participantCloud}>
265+
{hackathon.people.map((person, index) => (
266+
<div key={index} className="text-center">
267+
<img
268+
src={person.avatar}
269+
alt={person.name}
270+
className={styles.avatar}
271+
title={person.name}
272+
/>
273+
</div>
318274
))}
319275
</div>
320276
</section>

0 commit comments

Comments
 (0)