added logo
This commit is contained in:
Corey Blais
+10
-8
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import flockPalLandingArt from './assets/flockpal-landing-art.png';
|
||||
|
||||
type BillingPlan = 'rescue_free' | 'household_basic' | 'household_plus';
|
||||
type WorkspaceType = 'standard' | 'rescue';
|
||||
@@ -1500,20 +1501,21 @@ function App() {
|
||||
<main className="auth-shell">
|
||||
<section className="panel auth-panel">
|
||||
<div className="auth-copy">
|
||||
<p className="eyebrow">FlockPal</p>
|
||||
<h1>Bird care for households and rescues</h1>
|
||||
<figure className="auth-illustration-card">
|
||||
<img src={flockPalLandingArt} alt="FlockPal branding with a colorful trio of birds perched together." />
|
||||
</figure>
|
||||
<h1>A calmer way to care for every bird in your flock</h1>
|
||||
<p className="muted">
|
||||
Households can keep personal flocks in their own billed workspace, while rescue teams can share access to birds under a separate
|
||||
rescue workspace at no charge.
|
||||
Track weights, vet visits, hatchdays, gotcha days, and the little routines that help your birds thrive.
|
||||
</p>
|
||||
<div className="summary-grid">
|
||||
<article className="summary-card">
|
||||
<strong>Standard household</strong>
|
||||
<span>Personal birds, optional collaborators, and household billing by workspace.</span>
|
||||
<strong>Daily care, all together</strong>
|
||||
<span>Keep reminders, records, and notes in one cheerful home for your flock.</span>
|
||||
</article>
|
||||
<article className="summary-card">
|
||||
<strong>Rescue workspace</strong>
|
||||
<span>Shared care for rescue birds with free access and team roles.</span>
|
||||
<strong>Made for real bird people</strong>
|
||||
<span>From one spoiled companion bird to a lively whole flock, FlockPal keeps the details easy to revisit.</span>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 614 KiB |
@@ -0,0 +1,102 @@
|
||||
<svg width="960" height="720" viewBox="0 0 960 720" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="sky" x1="120" y1="80" x2="820" y2="640" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#FFF6E4"/>
|
||||
<stop offset="0.48" stop-color="#F5F4E8"/>
|
||||
<stop offset="1" stop-color="#E1F0E6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="branch" x1="228" y1="478" x2="762" y2="540" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#8E5630"/>
|
||||
<stop offset="1" stop-color="#5E3A24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="redBird" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#E65243"/>
|
||||
<stop offset="1" stop-color="#C22F35"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="goldBird" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#FFD063"/>
|
||||
<stop offset="1" stop-color="#F0A93A"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="blueBird" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#53A7E7"/>
|
||||
<stop offset="1" stop-color="#2769B3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="greenBird" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#5DBF79"/>
|
||||
<stop offset="1" stop-color="#238A5A"/>
|
||||
</linearGradient>
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="14" stdDeviation="16" flood-color="#8F6853" flood-opacity="0.18"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="960" height="720" rx="48" fill="url(#sky)"/>
|
||||
<text x="102" y="118" fill="#214137" font-family="Avenir Next, Segoe UI, sans-serif" font-size="58" font-weight="800" letter-spacing="-1.4">
|
||||
FlockPal
|
||||
</text>
|
||||
<text x="106" y="156" fill="#6C7364" font-family="Avenir Next, Segoe UI, sans-serif" font-size="20" font-weight="600" letter-spacing="1.8">
|
||||
CARE FOR YOUR WHOLE FLOCK
|
||||
</text>
|
||||
<circle cx="208" cy="162" r="88" fill="#FFF9ED" opacity="0.95"/>
|
||||
<path d="M108 624C182 560 286 538 396 560C516 584 606 668 742 662C826 658 888 628 930 594V720H0V654C34 660 74 654 108 624Z" fill="#DCEBDB"/>
|
||||
<path d="M152 90C206 114 254 152 300 214" stroke="#E4EEDC" stroke-width="26" stroke-linecap="round" opacity="0.65"/>
|
||||
<path d="M744 108C686 154 654 212 624 280" stroke="#D7EAD8" stroke-width="22" stroke-linecap="round" opacity="0.7"/>
|
||||
<path d="M768 504C676 470 588 468 472 486C352 506 272 500 192 468" stroke="url(#branch)" stroke-width="22" stroke-linecap="round"/>
|
||||
<path d="M758 480C696 460 626 460 538 474C418 492 306 494 210 464" stroke="#B57B49" stroke-width="7" stroke-linecap="round" opacity="0.45"/>
|
||||
|
||||
<g filter="url(#shadow)">
|
||||
<g transform="translate(196 298)">
|
||||
<ellipse cx="72" cy="96" rx="68" ry="54" fill="url(#redBird)"/>
|
||||
<ellipse cx="58" cy="72" rx="34" ry="28" fill="#F9D273"/>
|
||||
<path d="M118 60C146 48 170 50 188 70C170 80 150 86 128 84L118 60Z" fill="#F3A24A"/>
|
||||
<ellipse cx="30" cy="82" rx="26" ry="22" fill="url(#blueBird)"/>
|
||||
<circle cx="48" cy="72" r="4.5" fill="#1F2A2A"/>
|
||||
<path d="M12 74C0 76 -12 72 -22 62C-10 58 4 58 18 62L12 74Z" fill="#F0B63F"/>
|
||||
<path d="M84 130C112 146 136 176 146 208C110 198 82 178 70 150L84 130Z" fill="url(#blueBird)"/>
|
||||
<path d="M46 132C22 150 10 180 12 210C38 192 54 168 62 144L46 132Z" fill="url(#greenBird)"/>
|
||||
<path d="M92 160C98 174 110 184 126 190" stroke="#FFE7AF" stroke-width="8" stroke-linecap="round" opacity="0.8"/>
|
||||
<path d="M50 142C42 154 34 166 30 182" stroke="#F8F1DE" stroke-width="6" stroke-linecap="round" opacity="0.75"/>
|
||||
<path d="M58 144L48 182" stroke="#5E3A24" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M72 144L64 184" stroke="#5E3A24" stroke-width="5" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(398 228)">
|
||||
<ellipse cx="88" cy="124" rx="84" ry="66" fill="url(#goldBird)"/>
|
||||
<ellipse cx="64" cy="90" rx="42" ry="34" fill="url(#greenBird)"/>
|
||||
<ellipse cx="32" cy="96" rx="24" ry="20" fill="#F9DD79"/>
|
||||
<circle cx="60" cy="82" r="5" fill="#1F2A2A"/>
|
||||
<path d="M130 74C162 64 192 72 216 98C192 108 164 112 138 106L130 74Z" fill="#CB3A35"/>
|
||||
<path d="M98 176C132 194 158 226 168 266C124 256 94 232 80 196L98 176Z" fill="url(#greenBird)"/>
|
||||
<path d="M54 180C26 202 14 232 18 264C46 246 66 220 74 190L54 180Z" fill="url(#blueBird)"/>
|
||||
<path d="M98 206C110 220 126 230 146 236" stroke="#FFF3CB" stroke-width="9" stroke-linecap="round" opacity="0.8"/>
|
||||
<path d="M70 194C62 208 52 222 48 240" stroke="#FEF8EA" stroke-width="7" stroke-linecap="round" opacity="0.75"/>
|
||||
<path d="M78 192L70 240" stroke="#5E3A24" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M96 194L88 242" stroke="#5E3A24" stroke-width="5" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(640 326)">
|
||||
<ellipse cx="68" cy="94" rx="62" ry="50" fill="url(#blueBird)"/>
|
||||
<ellipse cx="54" cy="68" rx="30" ry="24" fill="#7EDBB4"/>
|
||||
<path d="M102 56C126 46 148 50 164 68C148 78 128 82 108 80L102 56Z" fill="#F0B63F"/>
|
||||
<ellipse cx="26" cy="76" rx="22" ry="18" fill="#E75345"/>
|
||||
<circle cx="46" cy="68" r="4.2" fill="#1F2A2A"/>
|
||||
<path d="M10 70C-2 72 -14 68 -24 58C-12 54 2 54 14 58L10 70Z" fill="#FFD063"/>
|
||||
<path d="M78 126C104 142 126 168 134 196C100 188 76 170 64 144L78 126Z" fill="url(#greenBird)"/>
|
||||
<path d="M42 128C20 146 8 172 8 198C32 182 48 160 56 138L42 128Z" fill="url(#redBird)"/>
|
||||
<path d="M52 138L44 174" stroke="#5E3A24" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M66 138L60 176" stroke="#5E3A24" stroke-width="5" stroke-linecap="round"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g opacity="0.96">
|
||||
<circle cx="744" cy="128" r="12" fill="#FFD97A"/>
|
||||
<circle cx="770" cy="128" r="12" fill="#52B3E8"/>
|
||||
<circle cx="796" cy="128" r="12" fill="#54BE74"/>
|
||||
<circle cx="822" cy="128" r="12" fill="#E55345"/>
|
||||
<circle cx="848" cy="128" r="12" fill="#F0B63F"/>
|
||||
</g>
|
||||
|
||||
<path d="M154 186C176 164 210 162 232 184" stroke="#F0B63F" stroke-width="12" stroke-linecap="round"/>
|
||||
<path d="M706 248C726 226 756 224 776 246" stroke="#238A5A" stroke-width="10" stroke-linecap="round"/>
|
||||
<path d="M782 284C796 272 818 272 832 286" stroke="#CB3A35" stroke-width="8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
@@ -138,6 +138,10 @@ textarea {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-copy {
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
padding: 1.25rem;
|
||||
border-radius: 24px;
|
||||
@@ -145,6 +149,24 @@ textarea {
|
||||
border: 1px solid rgba(39, 105, 179, 0.12);
|
||||
}
|
||||
|
||||
.auth-illustration-card {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
border-radius: 28px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 44%),
|
||||
linear-gradient(180deg, rgba(255, 249, 238, 0.92), rgba(234, 245, 238, 0.84));
|
||||
border: 1px solid rgba(39, 105, 179, 0.12);
|
||||
box-shadow: 0 18px 34px rgba(89, 48, 42, 0.1);
|
||||
}
|
||||
|
||||
.auth-illustration-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.auth-tabs {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user