Fixes and updates to the website. (#19350)

This PR implements a whole lot of fixes and updates to the website. It adds a release-notes page, terms and conditions page, privacy policy page, while fixing HomeStepper, ProductStepper, and WhyTwentyStepper. 3D models still need to be styled and their sizes need to be fixed.
2026-04-06 12:42:30 +05:00
parent e062343802
commit 3a1e112b86
150 changed files with 3690 additions and 1275 deletions
@@ -4,6 +4,7 @@ import {
 } from "@/design-system/components/Heading/Heading";
 import { theme } from "@/theme";
 import { css } from "@linaria/core";
+import { styled } from "@linaria/react";

 const problemHeadingClassName = css`
  margin-top: calc(${theme.spacing(2)} - ${theme.spacing(10)});
@@ -13,6 +14,14 @@ const problemHeadingClassName = css`
  }
 `;

+const HeadingWrapper = styled.div`
+  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &:hover {
+    transform: scale(1.02);
+  }
+`;
+
 export function Heading({
  as = "h2",
  size = "md",
@@ -20,12 +29,14 @@ export function Heading({
  ...props
 }: HeadingProps) {
  return (
-    <BaseHeading
-      className={problemHeadingClassName}
-      as={as}
-      size={size}
-      weight={weight}
-      {...props}
-    />
+    <HeadingWrapper>
+      <BaseHeading
+        className={problemHeadingClassName}
+        as={as}
+        size={size}
+        weight={weight}
+        {...props}
+      />
+    </HeadingWrapper>
  );
 }
@@ -33,6 +33,10 @@ const StyledPoint = styled.div`
  }
 `;

+const StyledBody = styled(Body)`
+  color: ${theme.colors.primary.text[80]};
+`;
+
 export type PointsProps = { points: ProblemPointType[] };

 export function Points({ points }: PointsProps) {
@@ -43,7 +47,7 @@ export function Points({ points }: PointsProps) {
          <StyledDivider />
          <StyledPoint>
            <Heading segments={point.heading} weight="medium" size="xs" />
-            <Body body={point.body} size="sm" />
+            <StyledBody body={point.body} size="sm" />
          </StyledPoint>
        </React.Fragment>
      ))}
@@ -16,6 +16,23 @@ const StyledContainer = styled(Container)`
  padding-right: ${theme.spacing(4)};
  padding-top: ${theme.spacing(12)};

+  /* Smooth transition for the children elements */
+  & > * {
+    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* When hovering one column, aggressively push the other one down and fade it out */
+  &:has(> div:hover) > div:not(:hover) {
+    opacity: 0.1;
+    transform: translateY(24px) scale(0.95);
+  }
+
+  /* Scale up the hovered column slightly */
+  &:has(> div:hover) > div:hover {
+    transform: scale(1.02);
+    z-index: 2;
+  }
+
  @media (min-width: ${theme.breakpoints.md}px) {
    column-gap: ${theme.spacing(4)};
    grid-template-columns: 1fr 1fr;