Merge pull request #357 from pendulum-chain/chore/consistent-sections

make Why Vortex section more consistent

src/components/TrustedBy/index.tsx

@@ -45,7 +45,7 @@ export const TrustedBy = () => {
   ];
 
   return (
-    <section className="container mx-auto">
+    <section className="container mt-12 mx-auto">
       <h1 className="mb-4 text-4xl text-center text-black">Trusted by</h1>
       <div className="flex flex-wrap items-center justify-center gap-y-4 gap-x-12">
         <ImageList images={trustedByImages} />

src/components/WhyVortex/index.tsx

@@ -33,16 +33,16 @@ const features: Feature[] = [
 const FeatureCard = ({ icon, title, description, subtext }: Feature) => (
   <div className="flex flex-col items-center text-center">
     <img src={icon} alt={title} className="w-[100px] h-[100px] mb-4" />
-    <h3 className="mb-4 text-2xl font-extrabold text-blue-900">{title}</h3>
-    <p className="mb-2 text-lg text-black">{description}</p>
-    <p className="text-xl text-gray-600 text-pink-600">{subtext}</p>
+    <h3 className="mb-4 text-xl font-bold text-blue-900">{title}</h3>
+    <p className="mb-2 text-black">{description}</p>
+    <p className="text-gray-600 text-pink-600">{subtext}</p>
   </div>
 );
 
 export const WhyVortex = () => (
-  <section className="container py-12 mx-auto mt-12">
-    <h2 className="mb-8 text-4xl font-bold text-center text-blue-900">Why Vortex?</h2>
-    <div className="grid grid-cols-1 gap-x-36 gap-y-8 md:grid-cols-3">
+  <section className="container py-12 mx-auto mt-6">
+    <h1 className="mb-6 text-4xl text-center text-black">Why Vortex?</h1>
+    <div className="grid grid-cols-1 gap-x-20 gap-y-8 md:grid-cols-3">
       {features.map((feature) => (
         <FeatureCard key={feature.title} {...feature} />
       ))}