chore: Improve image positioning and rotation in Hero component

IhsenBouallegue · Jul 17, 2024 · ebda0d2 · ebda0d2
1 parent 852973a
commit ebda0d2
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/src/slices/CallToAction/index.tsx b/src/slices/CallToAction/index.tsx
@@ -21,23 +21,23 @@ const CallToAction = ({ slice }: CallToActionProps): JSX.Element => {
       data-slice-variation={slice.variation}
       withExtraPadding
     >
-      <Card className="relative isolate overflow-hidden px-6 pt-16 w-full rounded-3xl sm:px-64 md:pt-64 lg:gap-x-60 lg:px-24 lg:pt-0">
+      <Card className="relative isolate overflow-hidden p-6 md:p-16 w-full rounded-3xl">
         <svg
           viewBox="0 0 1024 1024"
           className="absolute left-1/2 top-1/2 bg-gradient-to-r from-accent to-transparent -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
           aria-hidden="true"
         >
           <circle cx={512} cy={512} r={512} fill="url(#gradient)" fillOpacity="1" />
         </svg>
-        <div className="flex w-full flex-col lg:flex-row">
-          <div className="max-w-md text-center my-8 md:my-32 lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
+        <div className="flex w-full flex-col lg:flex-row  gap-6 items-center justify-center">
+          <div className="max-w-md my-8 lg:flex-auto text-left">
             <div className="text-3xl font-bold tracking-tight sm:text-4xl">
               <PrismicRichText field={slice.primary.title} />
             </div>
             <div className="mt-6 text-lg leading-8 text-muted">
               <PrismicRichText field={slice.primary.body} />
             </div>
-            <div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
+            <div className="mt-10 flex items-center justify-between gap-x-6 lg:justify-start">
               <PrismicNextLink
                 field={slice.primary.call_to_action_link}
                 className={buttonVariants({ variant: "default" })}

diff --git a/src/slices/Hero/index.tsx b/src/slices/Hero/index.tsx
@@ -19,19 +19,19 @@ const Hero = ({ slice }: HeroProps): JSX.Element => {
       <div className="absolute top-0  w-full h-full  overflow-hidden">
         <div className="absolute w-full h-full top-0 left-0 -z-30">
           <PrismicNextImage
-            className="absolute transform-gpu origin-top-left animate-fly h-[300px] md:-rotate-[15deg] md:h-[400px] w-auto"
+            height={100}
+            width={100}
+            className="absolute transform-gpu origin-top-left animate-fly h-[300px] w-auto object-contain  md:-rotate-[15deg] md:h-[400px]"
             field={slice.primary.background_image_2}
-            width={300}
-            height={300}
           />
         </div>
         <div className="absolute w-[80vmin] h-[80vmin] -translate-x-[50%] -translate-y-[50%] top-[50%] left-[50%] -z-30">
-          <div className="w-full h-full  animate-spin" style={{ animationDuration: "60s" }}>
+          <div className="w-full h-full animate-spin" style={{ animationDuration: "60s" }}>
             <PrismicNextImage
-              className="h-[100px] md:h-[150px] w-auto -rotate-[30deg]"
+              height={100}
+              width={100}
+              className="h-[100px] w-auto object-contain md:h-[150px] -rotate-[30deg]"
               field={slice.primary.background_image_1}
-              width={300}
-              height={300}
             />
           </div>
         </div>

diff --git a/src/slices/Sponsors/index.tsx b/src/slices/Sponsors/index.tsx
@@ -133,7 +133,7 @@ const SponsorCarousel = ({
             <PrismicNextLink field={sponsor.link}>
               <PrismicNextImage
                 field={sponsor.logo}
-                height={64}
+                className="object-contain h-20 w-auto"
                 style={{ filter: "drop-shadow(-3px -3px 8px rgba(255,255,255,0.3))" }}
               />
             </PrismicNextLink>

diff --git a/src/slices/Testemonials/index.tsx b/src/slices/Testemonials/index.tsx
@@ -37,7 +37,7 @@ const Testemonials = ({ slice }: TestemonialsProps): JSX.Element => {
       data-slice-variation={slice.variation}
       className="relative my-16 sm:my-24 lg:my-28"
     >
-      <div className="absolute backdrop-blur-sm backdrop-saturate-200 inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] rounded-xl shadow-xl shadow-primary/10 ring-2 ring-accent/90 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center" />
+      <div className="absolute backdrop-blur-sm rounded-xl ring-2 ring-accent/90 backdrop-saturate-200 inset-y-0 right-1/2 -z-10 mr-20 w-[200%] origin-bottom-left skew-x-[-30deg] sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center" />
       <div className="absolute bg-gradient-to-l from-primary to-transparent to-60% inset-0 -z-10 opacity-60" />
       <Carousel
         setApi={setApi}
@@ -91,8 +91,8 @@ function Testemonial({
   return (
     <div className="mx-auto py-24">
       <figure className="mt-2">
-        <blockquote className="text-center text-lg font-bold tracking-wide leading-8 sm:text-4xl sm:leading-9">
-          <p>{quote}</p>
+        <blockquote className="text-center text-xl font-bold tracking-wide sm:leading-loose sm:text-[2.15rem]">
+          {quote}
         </blockquote>
         <figcaption className="mt-10">
           <PrismicNextImage