JohnCosta27/savevictoriaway
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor briefing page for print

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-26 09:57:47 +00:00
parent ad0406d4c3
commit 77a451ff64
1 changed files with 40 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/pages/Briefing.tsx
View File

@ -9,7 +9,7 @@ const Briefing = () => {
@media print { @media print {
@page { @page {
size: A4; size: A4;
margin: 1.5cm; margin: 1cm;
} }
body { body {
@ -26,78 +26,75 @@ const Briefing = () => {
} }
.print-compact { .print-compact {
padding: 0.5rem !important; padding: 0.25rem !important;
margin-bottom: 1rem !important;
}
h1 {
font-size: 2.5rem !important;
margin-bottom: 0.5rem !important; margin-bottom: 0.5rem !important;
} }
h1 {
font-size: 2rem !important;
margin-bottom: 0.25rem !important;
}
h2 { h2 {
font-size: 1.5rem !important; font-size: 1.25rem !important;
margin-bottom: 0.75rem !important; margin-bottom: 0.5rem !important;
} }
h3 { h3 {
font-size: 1.125rem !important; font-size: 1rem !important;
} }
section { section {
page-break-inside: avoid; page-break-inside: avoid;
padding: 0.75rem 0 !important; padding: 0.5rem 0 !important;
} }
.stat-grid { .stat-grid {
margin: 1rem 0 !important; margin: 0.5rem 0 !important;
} }
} }
`}</style> `}</style>
{/* Header */} {/* Header */}
<section className="py-8 px-6 print:py-4 print-compact"> <section className="py-6 px-6 print:py-2 print-compact">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h1 className="text-5xl md:text-6xl font-black text-primary mb-4 leading-tight print:text-4xl"> <h1 className="text-4xl md:text-5xl font-black text-primary mb-3 leading-tight print:text-3xl">
Save Victoria Way Carpark Save Victoria Way Carpark
</h1> </h1>
<p className="text-xl md:text-2xl text-foreground font-semibold mb-2 print:text-lg"> <p className="text-lg md:text-xl text-foreground font-semibold mb-2 print:text-base">
Dear Enterprise Place Residents Dear Enterprise Place Residents
</p> </p>
<p className="text-base text-muted-foreground print:text-sm">
Join your neighbors in calling for parking solutions
</p>
</div> </div>
</section> </section>
{/* Impact Stats */} {/* Impact Stats */}
<section className="py-8 px-6 bg-muted print:bg-white print-compact stat-grid"> <section className="py-6 px-6 bg-muted print:bg-white print-compact stat-grid">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 print:gap-3"> <div className="grid grid-cols-4 gap-2 print:gap-2">
<StatCard icon={Home} number="120+" label="Affected Households" /> <StatCard icon={Home} number="120+" label="Households" />
<StatCard icon={Users} number="300+" label="Residents Impacted" /> <StatCard icon={Users} number="300+" label="Residents" />
<StatCard icon={Car} number="0" label="Parking Spaces Provided" /> <StatCard icon={Car} number="0" label="Parking" />
<StatCard icon={AlertTriangle} number="0" label="Council Updates" /> <StatCard icon={AlertTriangle} number="0" label="Updates" />
</div> </div>
</div> </div>
</section> </section>
{/* The Situation */} {/* The Situation */}
<section className="py-8 px-6 print-compact"> <section className="py-6 px-6 print-compact">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="bg-card p-4 rounded-lg border-l-4 border-primary mb-4 print:shadow-none"> <div className="bg-card p-3 rounded-lg border-l-4 border-primary mb-3 print:shadow-none">
<h3 className="text-lg font-semibold text-primary mb-2">What We Need:</h3> <h3 className="text-base font-semibold text-primary mb-2">What We Need:</h3>
<ul className="space-y-2 text-foreground text-sm"> <ul className="space-y-1 text-foreground text-xs">
<li className="flex items-start"> <li className="flex items-start">
<span className="text-accent font-bold mr-2">•</span> <span className="text-accent font-bold mr-2">•</span>
<span><strong>Regular updates</strong> on safety surveys and remediation progress</span> <span><strong>Regular updates</strong> on safety surveys and plans</span>
</li> </li>
<li className="flex items-start"> <li className="flex items-start">
<span className="text-accent font-bold mr-2">•</span> <span className="text-accent font-bold mr-2">•</span>
<span><strong>Parking solutions</strong> for night workers, families, and residents with disabilities</span> <span><strong>Parking solutions</strong> for residents</span>
</li> </li>
<li className="flex items-start"> <li className="flex items-start">
<span className="text-accent font-bold mr-2">•</span> <span className="text-accent font-bold mr-2">•</span>
<span><strong>Recognition</strong> that walking through town late at night isn't safe</span> <span><strong>Recognition</strong> of safety concerns</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -105,21 +102,14 @@ const Briefing = () => {
</section> </section>
{/* Solutions */} {/* Solutions */}
<section className="py-8 px-6 bg-muted print:bg-white print-compact"> <section className="py-6 px-6 bg-muted print:bg-white print-compact">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="bg-accent/10 border-l-4 border-accent p-4 rounded-r-lg mb-4 print:shadow-none"> <div className="bg-card p-3 rounded-lg border border-border print:shadow-none">
<h3 className="text-lg font-semibold text-primary mb-2">The Answer Is Beneath Your Building</h3> <h3 className="text-base font-semibold text-primary mb-2">Long-Term Solutions:</h3>
<p className="text-foreground text-sm"> <ul className="space-y-1 text-foreground text-xs">
The DoubleTree Hilton has an underground car park running directly beneath Enterprise Place. Why don't you have access to parking under your own homes?
</p>
</div>
<div className="bg-card p-4 rounded-lg border border-border print:shadow-none">
<h3 className="text-base font-semibold text-primary mb-3">Long-Term Solutions:</h3>
<ul className="space-y-2 text-foreground text-sm">
<li className="flex items-start"> <li className="flex items-start">
<span className="text-accent font-bold mr-2">1.</span> <span className="text-accent font-bold mr-2">1.</span>
<span>Access to DoubleTree Hilton underground car park</span> <span>Access to DoubleTree Hilton underground car park (beneath Enterprise Place)</span>
</li> </li>
<li className="flex items-start"> <li className="flex items-start">
<span className="text-accent font-bold mr-2">2.</span> <span className="text-accent font-bold mr-2">2.</span>
@ -139,16 +129,16 @@ const Briefing = () => {
</section> </section>
{/* Call to Action */} {/* Call to Action */}
<section className="py-8 px-6 print-compact"> <section className="py-6 px-6 print-compact">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<div className="bg-primary/10 border-2 border-primary p-4 rounded-lg print:shadow-none"> <div className="bg-primary/10 border-2 border-primary p-3 rounded-lg print:shadow-none">
<h2 className="text-2xl font-bold text-primary mb-3">Make Your Voice Heard</h2> <h2 className="text-xl font-bold text-primary mb-2">Make Your Voice Heard</h2>
<p className="text-base text-foreground mb-4"> <p className="text-sm text-foreground mb-3">
Join your fellow Enterprise Place residents in demanding parking solutions. Join your fellow Enterprise Place residents
</p> </p>
<div className="bg-card p-3 rounded-lg inline-block print:shadow-none"> <div className="bg-card p-2 rounded-lg inline-block print:shadow-none">
<p className="text-xs text-muted-foreground mb-1">Sign the petition:</p> <p className="text-xs text-muted-foreground mb-1">Sign the petition:</p>
<p className="text-xl font-bold text-primary">savevictoriawaycarpark.com</p> <p className="text-lg font-bold text-primary">savevictoriawaycarpark.com</p>
</div> </div>
</div> </div>
</div> </div>