Graphical PDS migrator for AT Protocol
knotbin.com
1/**
2 * The airport sign component, used on the landing page.
3 * Looks like a physical airport sign with a screen.
4 * @returns The airport sign component
5 * @component
6 */
7export default function AirportSign() {
8 return (
9 <div class="relative inline-block mb-8 sm:mb-12">
10 {/* Left Pole */}
11 <div class="absolute left-4 sm:left-8 -top-16 sm:-top-24 w-3 sm:w-4 h-16 sm:h-24 bg-gradient-to-r from-slate-800 via-slate-600 to-slate-800 rounded-t-lg">
12 </div>
13 {/* Right Pole */}
14 <div class="absolute right-4 sm:right-8 -top-16 sm:-top-24 w-3 sm:w-4 h-16 sm:h-24 bg-gradient-to-r from-slate-800 via-slate-600 to-slate-800 rounded-t-lg">
15 </div>
16 {/* Display Board */}
17 <div class="relative bg-gradient-to-b from-slate-800 to-slate-900 p-0.5 sm:p-1 rounded-lg shadow-[0_2px_10px_rgba(0,0,0,0.3)]">
18 {/* Metallic Frame */}
19 <div class="bg-gradient-to-b from-slate-600 via-slate-700 to-slate-800 p-1 sm:p-2 rounded-[6px]">
20 {/* Inner Frame */}
21 <div class="bg-black px-2 sm:px-4 py-0.5 rounded-[4px] relative overflow-hidden">
22 {/* Screen Background with Effects */}
23 <div class="absolute inset-0 bg-[#0a0a2f]">
24 {/* Scan lines */}
25 <div class="absolute inset-0 bg-[linear-gradient(transparent_0%,_rgba(255,255,255,0.02)_50%,_transparent_100%)] bg-[length:100%_4px]">
26 </div>
27 {/* Screen noise */}
28 <div class="absolute inset-0 opacity-[0.03] [background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iMC4wNSIvPjwvc3ZnPg==')]">
29 </div>
30 </div>
31
32 {/* Display Board Text */}
33 <div className="relative flex justify-center items-center py-0.5 sm:py-2 pb-1 sm:pb-4 px-1 sm:px-4">
34 <div className="relative text-center">
35 <span className="font-mono text-[1.5em] sm:text-[2em] md:text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white
36 [text-shadow:0_0_20px_rgba(255,255,255,0.2),0_0_40px_rgba(255,255,255,0.1)]
37 relative z-10">
38 ATP INTERNECTIONAL AIRPORT
39 </span>
40 {/* Text glow effect */}
41 <div className="absolute inset-0 blur-[2px] opacity-50">
42 <span className="font-mono text-[1.5em] sm:text-[2em] md:text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white">
43 ATP INTERNECTIONAL AIRPORT
44 </span>
45 </div>
46 </div>
47 </div>
48
49 {/* Screen reflection overlay */}
50 <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white/[0.03]">
51 </div>
52 {/* Vignette effect */}
53 <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.2)_100%)]">
54 </div>
55 </div>
56 </div>
57 </div>
58
59 {/* Under Construction Extension */}
60 <div className="absolute left-1/2 top-full -translate-x-1/2">
61 <div className="bg-gradient-to-b from-slate-800 to-slate-900 pb-0.5 sm:pb-1 px-0.5 sm:px-1 rounded-b-lg rounded-t-none shadow-[0_2px_10px_rgba(0,0,0,0.3)] border-t-0">
62 <div className="bg-gradient-to-b from-slate-600 via-slate-700 to-slate-800 pb-1 sm:pb-2 px-1 sm:px-2 rounded-b-[6px] rounded-t-none border-t-0">
63 <div className="bg-black px-2 sm:px-4 pt-0 pb-0.5 rounded-b-[4px] rounded-t-none border-t-0">
64 <span className="font-mono text-xs sm:text-sm font-medium tracking-wider text-yellow-400 [text-shadow:0_0_10px_rgba(255,255,0,0.3)] animate-pulse">
65 UNDER CONSTRUCTION
66 </span>
67 </div>
68 </div>
69 </div>
70 </div>
71 </div>
72 );
73}