improve cloud page

Author: endel

assets/cloud/locations.png

@@ -22,7 +22,7 @@ function DeploymentLocation(props: AddedLocation) {
   );
 }
 
-export default function SimulatePriceComponent({title = "Pricing Simulator"}) {
+export default function SimulatePriceComponent({ title = "Pricing Simulator" }) {
   const [tierNames, setTierNames] = useState<any>([]);
   const [plans, setPlans] = useState<any>([]);
 
@@ -131,12 +131,12 @@ export default function SimulatePriceComponent({title = "Pricing Simulator"}) {
 
   return (
     <div>
-      <h1 className="text-3xl text-center">{title}</h1>
+      {(title && <h1 className="text-3xl text-center">{title}</h1>)}
 
       <div className="flex flex-col mt-4 space-y-4">
         <div className="space-y-1">
           <span className="font-semibold block">Location</span>
-          <select className="border p-3 rounded" onChange={onChangeLocation} placeholder="Select a location" value={selectedLocation}>
+          <select className="border p-3 rounded text-slate-900" onChange={onChangeLocation} placeholder="Select a location" value={selectedLocation}>
             <option className="hidden" value="">Select a location</option>
             {Object.keys(regions).map((region_code: any) => (
               <optgroup key={region_code} label={regions[region_code]} >
@@ -154,7 +154,7 @@ export default function SimulatePriceComponent({title = "Pricing Simulator"}) {
 
         <div className="space-y-1">
           <span className="font-semibold block">Plan</span>
-          <select disabled={!selectedLocation} className="border p-3 rounded disabled:bg-gray-100" onChange={onChangePlan} value={selectedPlan} placeholder="Select plan">
+          <select disabled={!selectedLocation} className="border p-3 rounded disabled:bg-gray-100 text-slate-900" onChange={onChangePlan} value={selectedPlan} placeholder="Select plan">
             {(selectedLocation)
               ? Object.keys(tierNames).map((tierName: any) => (
                   <optgroup key={tierName} label={tierName}>

public/images/home/gladios.png

@@ -18,11 +18,13 @@ const subtitle = "Own your authoritative game servers. Versatile for any genre o
       <source src="/images/background/video.mp4" type="video/mp4">
     </video>
 
-    <div class="bg-gradient-black z-10 min-h-[50vh] lg:min-h-[99vh] flex">
-      <div class="container mx-auto px-6 flex items-center flex-col lg:flex-row relative py-16 lg:py-20">
+    <div class="bg-gradient-black z-10 min-h-[50vh] lg:min-h-[99vh] flex overflow-hidden">
+      <div class="container mx-auto px-6 flex items-center flex-col lg:flex-row relative py-16 lg:py-20 ">
+        <!-- <img src="/images/home/gladios.png" class="absolute -right-8 bottom-0 top-32 m-auto w-[26%] animate-leftToRight animation-delay-1" alt="Gladios" />
+        <img src="/images/home/valerya.png" class="absolute -left-12 bottom-0 -top-48 m-auto w-[26%] animate-rightToLeft animation-delay-1" alt="Valerya" /> -->
         <div class="w-full text-center ">
           <div class="py-16 lg:py-20 animate-from-top-fade">
-            <h1 class="text-5xl lg:text-7xl mb-2 font-medium drop-shadow-[0px_2px_1px_rgba(0,0,0,1)] ">
+            <h1 class="text-5xl lg:text-7xl mb-2 font-medium drop-shadow-[0px_3px_2px_rgba(0,0,0,1)] ">
               <span class="text-lg lg:text-4xl tracking-tight text-gray-300 inline-block mb-2 lg:mb-0">Free and Open-source</span> <br/>
               <span class="gradient-text">Multiplayer Framework</span>
             </h1>