updated version

anon-aadhaar · Apr 23, 2024 · dd774b8 · dd774b8
1 parent b12eba2
commit dd774b8
Show file tree

Hide file tree

Showing 12 changed files with 286 additions and 211 deletions.
diff --git a/app/build/page.tsx b/app/build/page.tsx
@@ -7,24 +7,20 @@ import React from "react";
 const Illustration = () => {
   return (
     <>
-      <div className="hidden md:flex relative w-full inset-0">
-        <div
-          className="right-0 top-0 ml-auto md:absolute md:-right-20 md:top-0 w-[330px] h-[330px] lg:w-[854px] md:h-[292px] md:w-[762px] lg:h-[507px] md:translate-x-40 lg:translate-x-32 xl:translate-x-5 bg-no-repeat"
-          style={{
-            backgroundImage: "url('illustrations/build-shape-big.svg')",
-            backgroundPosition: "top right",
-          }}
-        />
-      </div>
-      <div className="flex md:hidden relative w-full inset-0">
-        <div
-          className="-right-40 top-0 ml-auto h-[134px] w-[411px] bg-no-repeat"
-          style={{
-            backgroundImage: "url('illustrations/build-shape.svg')",
-            backgroundPosition: "top right",
-          }}
-        ></div>
-      </div>
+      <div
+        className="hidden right-0 top-0 ml-auto md:absolute md:-right-20 md:top-0 w-[330px] h-[330px] lg:w-[854px] md:h-[292px] md:w-[762px] lg:h-[507px] md:translate-x-40 lg:translate-x-32 xl:translate-x-5 bg-no-repeat"
+        style={{
+          backgroundImage: "url('illustrations/build-shape-big.svg')",
+          backgroundPosition: "top right",
+        }}
+      />
+      <div
+        className="md:hidden -right-40 top-0 ml-auto h-[134px] w-[411px] bg-no-repeat"
+        style={{
+          backgroundImage: "url('illustrations/build-shape.svg')",
+          backgroundPosition: "top right",
+        }}
+      ></div>
     </>
   );
 };
@@ -35,6 +31,7 @@ export default function BuildPage() {
       <PageHeader
         title={LABELS.BUILD_PAGE.TITLE}
         description={LABELS.BUILD_PAGE.DESCRIPTION}
+        containerClass="flex flex-col-reverse"
       >
         <Illustration />
       </PageHeader>

diff --git a/app/page.tsx b/app/page.tsx
@@ -14,13 +14,20 @@ import { ProjectSection } from "@/sections/homePage/ProjectsSection";
 import { LABELS } from "@/shared/labels";
 import Link from "next/link";
 import { motion } from "framer-motion";
+import { AppContainer } from "@/components/AppContainer";
+import { Label } from "@/components/ui/Label";
 
 export default function Home() {
   return (
     <main>
       <PageHeader
         preTitle={LABELS.HOME_PAGE.TITLE_LABEL}
-        title={LABELS.HOME_PAGE.TITLE}
+        title={
+          <div className="max-w-[340px] sm:max-w-[480px] lg:max-w-full w-full">
+            {LABELS.HOME_PAGE.TITLE}
+          </div>
+        }
+        containerClass="flex h-[560px] md:h-[645px]"
         actions={
           <Link href={LINKS.WEBSITE_DEMO} target="_blank">
             <Button icon={<Icons.ArrowRight />} className="uppercase">
@@ -57,12 +64,21 @@ export default function Home() {
             );
           }}
           aria-label="Homepage shapes"
-          className="md:absolute top-0 right-0 w-[830px] h-[645px] translate-x-20 md:translate-x-52 lg:translate-x-10"
         >
-          <Shapes.Homepage id="homepage-svg" />
+          <Shapes.Homepage
+            className="absolute top-14 lg:top-0 right-0 w-[546px] h-[421px] sm:w-[546px] sm:h-[497px] md:w-[730px] md:h-[545px] xl:w-[900px] xl:h-[705px] translate-x-72 md:translate-x-48 lg:translate-x-20"
+            id="homepage-svg"
+          />
         </motion.div>
       </PageHeader>
+
       <IntroSection />
+      <AppContainer className="pb-30 pt-16">
+        <Label.Section className="uppercase md:text-center">
+          Developers, dive into a new era of security and privacy in your
+          applications effortlessly!
+        </Label.Section>
+      </AppContainer>
       <PainPointSection />
       <ProjectSection />
       <FeatureSection />

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -40,14 +40,12 @@ const SectionTitle = classed.div(
 
 const Illustration = () => {
   return (
-    <div className="relative w-full inset-0">
-      <div
-        className="right-0 ml-auto md:absolute md:top-0 w-[330px] h-[330px] md:right-[100px] md:w-[427px] md:h-[236px] lg:w-[854px] lg:h-[507px] lg:-right-[260px] xl:right-[-110px] lg:top-14 bg-no-repeat"
-        style={{
-          backgroundImage: "url('illustrations/projects-shape-big.svg')",
-        }}
-      ></div>
-    </div>
+    <div
+      className="right-0 ml-auto absolute top-0 w-[330px] h-[330px] md:right-[100px] md:w-[427px] md:h-[236px] lg:w-[854px] lg:h-[507px] lg:-right-[260px] xl:right-[-110px] lg:top-14 bg-no-repeat"
+      style={{
+        backgroundImage: "url('illustrations/projects-shape-big.svg')",
+      }}
+    ></div>
   );
 };
 

diff --git a/components/AppContainer.tsx b/components/AppContainer.tsx
@@ -1,13 +1,44 @@
 import { classed } from "@tw-classed/react";
+import { HTMLAttributes, ReactNode } from "react";
+import type * as Classed from "@tw-classed/react";
+import { cn } from "@/shared/utils";
 
-export const AppContainer = classed.div("mx-auto max-w-screen-2xl", {
+const AppContainerWrapper = classed.div("mx-auto max-w-screen-xl", {
   variants: {
     size: {
-      default: "px-8 md:px-20",
-      small: "px-8 md:px-32",
+      default: "px-8 xl:px-0",
+      small: "px-8 xl:px-0",
     },
   },
   defaultVariants: {
     size: "default",
   },
 });
+
+interface AppContainerWrapperVariants
+  extends Classed.VariantProps<typeof AppContainerWrapper> {
+  containerClass?: string;
+}
+interface AppContainerProps
+  extends AppContainerWrapperVariants,
+    HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  element?: ReactNode;
+}
+
+export const AppContainer = ({
+  children,
+  element,
+  size,
+  containerClass,
+  ...props
+}: AppContainerProps) => {
+  return (
+    <div className={cn("relative w-full", containerClass)}>
+      {element}
+      <AppContainerWrapper size={size} {...props}>
+        {children}
+      </AppContainerWrapper>
+    </div>
+  );
+};
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
@@ -1,9 +1,9 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { AppContainer } from "./AppContainer";
 import { Label } from "./ui/Label";
 import { cn } from "@/shared/utils";
 import { classed } from "@tw-classed/react";
 import type * as Classed from "@tw-classed/react";
+import { AppContainer } from "./AppContainer";
 
 const ContentHeaderWrapper = classed.div("", {
   variants: {
@@ -19,13 +19,14 @@ const ContentHeaderWrapper = classed.div("", {
 interface ContentHeaderWrapperVariants
   extends Classed.VariantProps<typeof ContentHeaderWrapper> {}
 interface PageHeaderProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title">,
     ContentHeaderWrapperVariants {
   preTitle?: string;
-  title: string;
+  title: ReactNode;
   description?: ReactNode;
   actions?: ReactNode;
   children?: ReactNode;
+  containerClass?: string;
 }
 
 export const PageHeader = ({
@@ -35,41 +36,47 @@ export const PageHeader = ({
   actions,
   children,
   contentFullWidth = false,
+  containerClass,
   className = "",
 }: PageHeaderProps) => {
   return (
-    <div className="pt-20 pb-14 md:pt-12 w-full">
-      <div className="relative grid grid-cols-1 md:grid-cols-[1fr_minmax(0px,_1fr)] gap-5 md:gap-0">
-        <div
-          className={cn(
-            "flex relative md:min-h-[610px] md:flex md:items-center w-full",
-            className
-          )}
-        >
-          <div className="flex flex-col gap-10 px-8 md:pl-20">
-            <ContentHeaderWrapper
-              contentFullWidth={contentFullWidth}
-              className="flex flex-col gap-5"
-            >
-              <div className="flex flex-col">
-                {preTitle && (
-                  <span className="uppercase text-[28px] font-medium text-anon md:text-4xl">
-                    {preTitle}
+    <AppContainer
+      className="w-full"
+      containerClass={containerClass}
+      element={children}
+    >
+      <div className="pt-20 pb-14 md:pt-12 w-full">
+        <div className="relative grid grid-cols-1 md:grid-cols-[1fr_minmax(0px,_1fr)] gap-5 md:gap-0">
+          <div
+            className={cn(
+              "flex relative md:min-h-[610px] md:flex md:items-center w-full",
+              className
+            )}
+          >
+            <div className="flex flex-col gap-10">
+              <ContentHeaderWrapper
+                contentFullWidth={contentFullWidth}
+                className="flex flex-col gap-5"
+              >
+                <div className="flex flex-col">
+                  {preTitle && (
+                    <span className="uppercase text-[28px] font-medium text-anon md:text-4xl">
+                      {preTitle}
+                    </span>
+                  )}
+                  <Label.Title>{title}</Label.Title>
+                </div>
+                {description && (
+                  <span className="text-scarpa-500 text-base font-inter md:text-lg">
+                    {description}
                   </span>
                 )}
-                <Label.Title>{title}</Label.Title>
-              </div>
-              {description && (
-                <span className="text-scarpa-500 text-base font-inter md:text-lg">
-                  {description}
-                </span>
-              )}
-            </ContentHeaderWrapper>
-            {actions}
+              </ContentHeaderWrapper>
+              {actions}
+            </div>
           </div>
         </div>
-        {children}
       </div>
-    </div>
+    </AppContainer>
   );
 };
diff --git a/components/elements/Banner.tsx b/components/elements/Banner.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@/shared/utils";
 import { classed } from "@tw-classed/react";
+import { AppContainer } from "../AppContainer";
 
 export const BannerWrapper = classed.div("bg-primary");
 
@@ -26,7 +27,7 @@ const Banner = ({
 }: BannerProps) => {
   return (
     <BannerWrapper className="py-14">
-      <div className={cn("mx-auto px-8 md:px-40 max-w-screen-2xl", className)}>
+      <AppContainer className={cn(className)}>
         <div className="flex flex-col gap-9 items-center justify-between lg:flex-row lg:items-center">
           <div className="flex flex-col gap-4">
             <BannerTitle className={className}>{title}</BannerTitle>
@@ -38,7 +39,7 @@ const Banner = ({
           </div>
           {actions}
         </div>
-      </div>
+      </AppContainer>
     </BannerWrapper>
   );
 };

diff --git a/components/header/AppHeaderMobile.tsx b/components/header/AppHeaderMobile.tsx
@@ -1,15 +1,16 @@
 "use client";
 
-import useSettings, { LINKS, SETTINGS } from "@/hooks/useSettings";
+import useSettings, { SETTINGS } from "@/hooks/useSettings";
 import { Icons } from "../Icons";
 import { MenuItem } from "@/shared/types";
 import Link from "next/link";
 import { AppContainer } from "../AppContainer";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { cn } from "@/shared/utils";
 import Image from "next/image";
 import { LABELS } from "@/shared/labels";
 import { classed } from "@tw-classed/react";
+import { constants } from "buffer";
 
 type NavItemProps = {
   items: MenuItem[];
@@ -22,7 +23,7 @@ const NavItem = classed.span(
 
 const NavItems = ({ items, onClick }: NavItemProps) => {
   return (
-    <div className="flex flex-col gap-[10px] items-center sm:items-start">
+    <div className="flex flex-col gap-1 md:gap-[10px] items-center sm:items-start">
       {items.map((item) => {
         return (
           <div key={item.href}>
@@ -43,6 +44,14 @@ export const AppHeaderMobile = () => {
   const { leftNavItems, rightNavItems, socialNavItems } = useSettings();
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => {
+    console.log("isOpen", isOpen);
+    const clientHeight = document.documentElement.clientHeight;
+
+    document.body.style.height = isOpen ? `${clientHeight}px` : `auto`;
+    document.body.style.overflow = isOpen ? "hidden" : "scroll";
+  }, [isOpen]);
+
   return (
     <div className="flex sticky top-6 z-10 md:hidden">
       <AppContainer className="w-full">
@@ -53,7 +62,7 @@ export const AppHeaderMobile = () => {
           <button
             type="button"
             aria-label="burgher menu"
-            className="col-start-3"
+            className="col-start-3 text-anon"
             onClick={() => setIsOpen(!isOpen)}
           >
             <Icons.Burgher className="ml-auto" />
@@ -62,16 +71,16 @@ export const AppHeaderMobile = () => {
       </AppContainer>
       <div
         className={cn(
-          "fixed h-[100dvh] overflow-hidden duration-200 gap-3 sm:gap-5 inset-y-0 right-0 z-30 flex flex-col bg-anon text-white",
+          "fixed h-[100dvh] overflow-hidden duration-200 gap-3 sm:gap-5 inset-0 right-0 z-30 flex flex-col bg-anon text-white",
           isOpen ? "w-full px-10 pb-10" : "w-0"
         )}
       >
-        <div className="flex justify-end pt-10">
+        <div className="flex justify-end pt-4 md:pt-10">
           <button
             type="button"
             onClick={() => setIsOpen(false)}
             aria-label="toggle menu"
-            className="h-10"
+            className="h-6 md:h-10"
           >
             <Icons.Close className="text-white" />
           </button>
@@ -91,12 +100,12 @@ export const AppHeaderMobile = () => {
           </div>
           <div className="flex flex-col items-center justify-between pb-8">
             <Link href={`mailto:${SETTINGS.INFO_MAIL}`} target="_blank">
-              <NavItem>
+              <NavItem className="leading-none">
                 <span>{LABELS.COMMON.FOOTER.FEEDBACK}</span>
                 <Icons.ExternalLink className="mt-[-2px]" />
               </NavItem>
             </Link>
-            <span className="text-scarpa-400 text-[13px] font-inter font-normal leading-[150%] py-[10px]">
+            <span className="text-scarpa-400 text-[13px] font-inter font-normal leading-[150%] py-1 md:py-[10px]">
               {LABELS.COMMON.FOOTER.COPY}
             </span>
           </div>