Updated installer preview

Installer preview image updated to a more recent representation. Perspective styling and drop shadow now implemented via Tailwind styling rather than baked into the image, thus allowing for easy asset updates.

Author: CameronCarlyon

public/pages/index/installerPreview.png

@@ -7,7 +7,7 @@ const Installer = () => {
     const router = useRouter();
     return (
         <Section theme="dark">
-            <Container className="grid gap-y-20 lg:grid-cols-3">
+            <Container className="grid gap-y-10 lg:grid-cols-3">
                 <div className="flex items-center justify-center">
                     <div className="grid gap-y-5">
                         <h2>Custom-built Installer</h2>
@@ -18,9 +18,17 @@ const Installer = () => {
                     </div>
                 </div>
 
-                {/* TODO: Change placeholder image */}
-                <div className="-m-8 -mb-32 lg:col-span-2 lg:m-0 lg:grid lg:p-12">
-                    <img alt="Installer" src="/pages/index/installerPreview.png" />
+                <div className="-mr-10 -mb-21 lg:col-span-2 lg:m-0 lg:grid lg:p-12">
+                    <img
+                        alt="FlyByWire Installer screenshot"
+                        src="/pages/index/installerPreview.png"
+                        className={`m-0 shadow-2xl 
+                            [transform:perspective(600px)_rotateY(20deg)_rotateX(20deg)_rotateZ(0deg)_scale(0.93)] 
+                            sm:[transform:perspective(800px)_rotateY(20deg)_rotateX(20deg)_rotateZ(0deg)_scale(0.93)] 
+                            md:[transform:perspective(1000px)_rotateY(20deg)_rotateX(20deg)_rotateZ(0deg)_scale(0.93)] 
+                            lg:[transform:perspective(1200px)_rotateY(20deg)_rotateX(20deg)_rotateZ(2deg)_scale(0.95)] 
+                            xl:[transform:perspective(1400px)_rotateY(20deg)_rotateX(20deg)_rotateZ(2deg)_scale(0.90)]`}
+                    />
                 </div>
             </Container>
         </Section>