Skip to content

Update Follow section: trip is live now, link to Instagram #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
TomProkop wants to merge 1 commit into from
Closed

Update Follow section: trip is live now, link to Instagram #17

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 54 additions & 6 deletions src/sections/FollowSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { Radio } from 'lucide-react';
import { MapPinned } from 'lucide-react';

const INSTAGRAM_HANDLE = 'networg_expedition';
const INSTAGRAM_URL = `https://www.instagram.com/${INSTAGRAM_HANDLE}/`;

export default function FollowSection() {
return (
Expand All @@ -11,17 +14,62 @@ export default function FollowSection() {
WATCH THE TRIP
</h2>

<div className="card p-10 border-dashed border-asphalt-600">
<Radio size={40} strokeWidth={1} className="text-asphalt-500 mx-auto mb-6" />
<div className="card p-10 border-rally-500/30">
<span className="inline-flex items-center gap-2 rounded-full bg-rally-500/10 text-rally-400 text-xs font-semibold uppercase tracking-widest px-3 py-1 mb-6">
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rally-400 opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-rally-500" />
</span>
Live now
</span>

<p className="text-asphalt-100 text-lg font-medium mb-3">
Live map and stories - coming July 2026
The trip is happening right now.
</p>
<p className="text-asphalt-400 text-sm leading-relaxed max-w-md mx-auto">
We'll share live location during the trip. Photos and updates as things happen. Check back in July.
<p className="text-asphalt-400 text-sm leading-relaxed max-w-md mx-auto mb-8">
Track everyone's live location on the map above, and follow{' '}
<span className="text-asphalt-200 font-medium">@{INSTAGRAM_HANDLE}</span> on
Instagram for photos and stories as they happen.
</p>

<div className="flex flex-wrap items-center justify-center gap-4">
<a
href={INSTAGRAM_URL}
target="_blank"
rel="noopener noreferrer"
className="btn-primary inline-flex items-center gap-2"
>
<InstagramIcon size={18} />
Follow @{INSTAGRAM_HANDLE}
</a>
<a href="#route" className="btn-outline inline-flex items-center gap-2">
<MapPinned size={16} strokeWidth={1.75} />
See the live map
</a>
</div>
</div>
</div>
</section>
);
}

function InstagramIcon({ size = 18 }: { size?: number }) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={1.75}
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
);
}