Update CTA form

gorbatiukcom · Jan 10, 2024 · 08f992b · 08f992b
1 parent df679c3
commit 08f992b
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 106 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -32,7 +32,7 @@ export default function Home() {
  >
  Nowoczesne podejście do aranżacji wnętrz
  </Heading>
- <Link href="/contacts" mt="120px" width="max-content">
+ <Link href="/services/order" mt="120px" width="max-content">
  <Button
  width="max-content"
  height={["48px", "60px"]}

diff --git a/src/app/portfolio/[projectId]/page.tsx b/src/app/portfolio/[projectId]/page.tsx
@@ -53,7 +53,7 @@ export default function Home({ params }: { params: { projectId: string } }) {
  bottom={["16px", "40px"]}
  px={["16px", "40px"]}
  >
- <Link href="/contacts" width="max-content">
+ <Link href="/services/order" width="max-content">
  <Button
  width="max-content"
  height={["40px", "60px"]}

diff --git a/src/app/services/order/page.tsx b/src/app/services/order/page.tsx
@@ -72,14 +72,14 @@ export default function Home() {
  flexDirection={["column", "row"]}
  mx="auto"
  width="100%"
- maxWidth="1000px"
+ maxWidth={activeProject ? "1000px" : "700px"}
  border={[null, "1px dashed"]}
  >
  <Flex
  flexDirection="column"
- borderRight={[null, "1px dashed"]}
+ borderRight={activeProject ? [null, "1px dashed"] : undefined}
  width="100%"
- pr={[0, "60px"]}
+ pr={activeProject ? [0, "60px"] : undefined}
  pb={[10, 0]}
  >
  <Text
@@ -92,56 +92,58 @@ export default function Home() {
  Witamy
  </Text>
  {/* MOBILE */}
- <Flex
- display={["flex", "none"]}
- width="100%"
- alignItems="center"
- pb={10}
- position="relative"
- >
- {Object.keys(Projects).map((project) => {
- return (
- <Image
- key={project}
- src={`/images/services_dk_${project}.svg`}
- alt="logo"
- minWidth="150%"
- width="150%"
- position="absolute"
- zIndex={-1}
- pointerEvents="none"
- display={activeProject === project ? undefined : "none"}
- left="-25%"
- top={-75}
- />
- );
- })}
- <Link
- href={`/services/order?project=${ProjectsLinks[activeProject].prev}`}
- scroll={false}
- replace={true}
+ {activeProject ? (
+ <Flex
+ display={["flex", "none"]}
+ width="100%"
+ alignItems="center"
+ pb={10}
+ position="relative"
  >
- <Icon as={IoArrowBackCircle} boxSize="44px" />
- </Link>
- <Flex flexDirection="column" alignItems="center" width="100%">
- <Text fontSize="20px" fontWeight={300}>
- {ProjectsDetalis[activeProject].price}
- </Text>
- <Text fontSize="20px" fontWeight={400} mt={2}>
- PROJEKT
- </Text>
- <Text fontSize="24px" fontWeight={400}>
- {ProjectsDetalis[activeProject].name}
- </Text>
+ {Object.keys(Projects).map((project) => {
+ return (
+ <Image
+ key={project}
+ src={`/images/services_dk_${project}.svg`}
+ alt="logo"
+ minWidth="150%"
+ width="150%"
+ position="absolute"
+ zIndex={-1}
+ pointerEvents="none"
+ display={activeProject === project ? undefined : "none"}
+ left="-25%"
+ top={-75}
+ />
+ );
+ })}
+ <Link
+ href={`/services/order?project=${ProjectsLinks[activeProject].prev}`}
+ scroll={false}
+ replace={true}
+ >
+ <Icon as={IoArrowBackCircle} boxSize="44px" />
+ </Link>
+ <Flex flexDirection="column" alignItems="center" width="100%">
+ <Text fontSize="20px" fontWeight={300}>
+ {ProjectsDetalis[activeProject].price}
+ </Text>
+ <Text fontSize="20px" fontWeight={400} mt={2}>
+ PROJEKT
+ </Text>
+ <Text fontSize="24px" fontWeight={400}>
+ {ProjectsDetalis[activeProject].name}
+ </Text>
+ </Flex>
+ <Link
+ href={`/services/order?project=${ProjectsLinks[activeProject].next}`}
+ scroll={false}
+ replace={true}
+ >
+ <Icon as={IoArrowForwardCircle} boxSize="44px" />
+ </Link>
  </Flex>
- <Link
- href={`/services/order?project=${ProjectsLinks[activeProject].next}`}
- scroll={false}
- replace={true}
- >
- <Icon as={IoArrowForwardCircle} boxSize="44px" />
- </Link>
- </Flex>
+ ) : null}
 
  <form onSubmit={handleSubmit(onSubmit)}>
  <FormControl isInvalid={!!errors.name?.message}>
@@ -245,61 +247,63 @@ export default function Home() {
  </form>
  </Flex>
  {/* DESKTOP */}
- <Flex
- display={["none", "flex"]}
- flexDirection="column"
- alignItems="center"
- justifyContent="center"
- paddingLeft="36px"
- maxWidth="330px"
- width="100%"
- position="relative"
- >
- {Object.keys(Projects).map((project) => {
- return (
- <NextImage
- key={project}
- src={`/images/services_dk_${project}.svg`}
- alt="logo"
- minWidth={754}
- width={754}
- height={1000}
- position="absolute"
- zIndex={-1}
- pointerEvents="none"
- display={activeProject === project ? undefined : "none"}
- // left=""
- // top=""
- />
- );
- })}
+ {activeProject ? (
+ <Flex
+ display={["none", "flex"]}
+ flexDirection="column"
+ alignItems="center"
+ justifyContent="center"
+ paddingLeft="36px"
+ maxWidth="330px"
+ width="100%"
+ position="relative"
+ >
+ {Object.keys(Projects).map((project) => {
+ return (
+ <NextImage
+ key={project}
+ src={`/images/services_dk_${project}.svg`}
+ alt="logo"
+ minWidth={754}
+ width={754}
+ height={1000}
+ position="absolute"
+ zIndex={-1}
+ pointerEvents="none"
+ display={activeProject === project ? undefined : "none"}
+ // left=""
+ // top=""
+ />
+ );
+ })}
 
- <Text fontSize="24px" fontWeight={300}>
- {ProjectsDetalis[activeProject].price}
- </Text>
- <Text fontSize="24px" fontWeight={400} mt={2}>
- PROJEKT
- </Text>
- <Text fontSize="36px" fontWeight={400}>
- {ProjectsDetalis[activeProject].name}
- </Text>
- <Flex justifyContent="space-between" width="200px" mt="28px">
- <Link
- href={`/services/order?project=${ProjectsLinks[activeProject].prev}`}
- scroll={false}
- replace={true}
- >
- <Icon as={IoArrowBackCircle} boxSize="44px" />
- </Link>
- <Link
- href={`/services/order?project=${ProjectsLinks[activeProject].next}`}
- scroll={false}
- replace={true}
- >
- <Icon as={IoArrowForwardCircle} boxSize="44px" />
- </Link>
+ <Text fontSize="24px" fontWeight={300}>
+ {ProjectsDetalis[activeProject].price}
+ </Text>
+ <Text fontSize="24px" fontWeight={400} mt={2}>
+ PROJEKT
+ </Text>
+ <Text fontSize="36px" fontWeight={400}>
+ {ProjectsDetalis[activeProject].name}
+ </Text>
+ <Flex justifyContent="space-between" width="200px" mt="28px">
+ <Link
+ href={`/services/order?project=${ProjectsLinks[activeProject].prev}`}
+ scroll={false}
+ replace={true}
+ >
+ <Icon as={IoArrowBackCircle} boxSize="44px" />
+ </Link>
+ <Link
+ href={`/services/order?project=${ProjectsLinks[activeProject].next}`}
+ scroll={false}
+ replace={true}
+ >
+ <Icon as={IoArrowForwardCircle} boxSize="44px" />
+ </Link>
+ </Flex>
  </Flex>
- </Flex>
+ ) : null}
  </Flex>
  </Flex>
  );