Cloning NextjsTest

.babelrc

@@ -0,0 +1,27 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
+    ],
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "~/collections": "./collections",
+          "~/components": "./components",
+          "~/lib": "./lib",
+          "~/pages": "./pages",
+          "~/sections": "./sections",
+          "~/styles": "./styles",
+          "~/utils": "./utils"
+        }
+      }
+    ]
+  ]
+}

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

README.md

@@ -0,0 +1,25 @@
+The section that you need to create is shown in **agencyselection.png**
+
+1. The main Section must be placed in the folder sections.
+2. All collections of components must be created and placed in the collections folder. (for example such things are Forms, Menus, etc. because they contain multiple other components within themselves, a form contains inputs, checkboxes, radio buttons, buttons and so on, that is making it a _collection of components_)
+3. All base components that are making up collections of components go to components folder - these are Typography, Buttons, Checkboxes and other base elements. 
+
+You will find the desktop and mobile designs in the resources folder.
+That folder is not part of the project, its there for your convenience
+agencyselection.png and mobileagencyselection.png show you the layout of the section that you must build
+background.png and video.png are assets for you to use
+
+Every component that you create must follow the conventions in the project:
+
+- Must have its own folder
+- Must have index.js exporting that component
+- Must have elements.jsx where all of the components used to create that component are first imported and styled
+- The final component should only be importing all the components that it needs from "./elements"
+
+Feel free to reuse components within the project or entirely recreate your own.
+
+For images use the Image component imported from "next/image"
+
+The section should collapse into mobile layout under 1024px width (the Hero section currently within the project is not mobile friendly, that should not concern you)
+
+Create your own repository, replicate the project with Typescript and have 100% coverage, share the link and commit regularly as you are making progress

collections/Card/Card.jsx

@@ -0,0 +1 @@
+// The Card to be exported goes here

collections/Card/elements.jsx

@@ -0,0 +1 @@
+// Styled elements for the Card go here

collections/Card/index.js

@@ -0,0 +1 @@
+export * from "./Card";

collections/index.js

@@ -0,0 +1 @@
+export * from "./Card";

components/Button/Button.jsx

@@ -0,0 +1,9 @@
+import { StyledButton, StyledButtonText } from "./elements";
+
+export const Button = ({ children, ...props }) => {
+  return (
+    <StyledButton {...props}>
+      <StyledButtonText>{children}</StyledButtonText>
+    </StyledButton>
+  );
+};

components/Button/elements.jsx

@@ -0,0 +1,67 @@
+import styled, { css } from "styled-components";
+import { SectionInnerHeading } from "~/components";
+
+const outlinedVariantButton = css`
+  background-color: transparent;
+  border: 1px solid;
+  border-color: ${({ theme, color }) => theme[color]};
+  color: ${({ theme, color }) => theme[color]};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.main};
+    background-color: ${({ theme }) => theme.main};
+    color: ${({ theme }) => theme.white};
+  }
+`;
+
+const containedVariantButton = css`
+  background-color: ${({ theme, color }) => theme[color]};
+
+  &:hover {
+    background-color: ${({ theme, color }) => theme.hover[color]};
+  }
+`;
+
+const textVariantButton = css`
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  min-width: unset;
+  padding: 0 2rem;
+  margin: 0 2rem;
+  color: ${({ theme, color }) => theme[color]};
+
+  &:hover {
+    color: ${({ theme }) => theme.black};
+    border-bottom: 1px solid ${({ theme }) => theme.black};
+  }
+`;
+
+const buttonVariants = {
+  outlined: outlinedVariantButton,
+  contained: containedVariantButton,
+  text: textVariantButton,
+};
+
+export const StyledButton = styled(({ color = "primary", variant = "contained", ...props }) => <button {...props} />)`
+  font-family: sans-serif;
+  overflow: hidden;
+  text-align: center;
+  align-self: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 184px;
+  min-height: 56px;
+  padding: 16px 0;
+  cursor: pointer;
+  border: none;
+  color: white;
+  ${({ variant }) => buttonVariants[variant]}
+`;
+
+export const StyledButtonText = styled((props) => <SectionInnerHeading {...props} />)``;

components/Button/index.js

@@ -0,0 +1 @@
+export * from "./Button";

components/Containers/SectionContainer/SectionContainer.jsx

@@ -0,0 +1,5 @@
+import { StyledSectionContainer } from "./elements";
+
+export const SectionContainer = ({ ...props }) => {
+  return <StyledSectionContainer {...props} />;
+};

components/Containers/SectionContainer/elements.jsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const StyledSectionContainer = styled(({ topMargin = 0, bottomMargin = 0, ...props }) => <div {...props} />)`
+  display: flex;
+  max-width: 1920px;
+  width: 100%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: ${({ topMargin }) => topMargin}rem;
+  margin-bottom: ${({ bottomMargin }) => bottomMargin}rem;
+`;

components/Containers/SectionContainer/index.js

@@ -0,0 +1 @@
+export * from "./SectionContainer";

components/Containers/index.js

@@ -0,0 +1 @@
+export * from "./SectionContainer";

components/Typography/SectionBigHeading.jsx

@@ -0,0 +1,5 @@
+import { StyledSectionBigHeading } from "./elements";
+
+export const SectionBigHeading = ({ ...props }) => {
+  return <StyledSectionBigHeading {...props} />;
+};

components/Typography/SectionHeading.jsx

@@ -0,0 +1,6 @@
+import { forwardRef } from "react";
+import { StyledSectionHeading } from "./elements";
+
+export const SectionHeading = ({ ...props }) => {
+  return <StyledSectionHeading {...props} />;
+};

components/Typography/SectionInnerHeading.jsx

@@ -0,0 +1,5 @@
+import { StyledSectionInnerHeading } from "./elements";
+
+export const SectionInnerHeading = ({ ...props }) => {
+  return <StyledSectionInnerHeading {...props} />;
+};

components/Typography/SectionParagraph.jsx

@@ -0,0 +1,5 @@
+import { StyledSectionParagraph } from "./elements";
+
+export const SectionParagraph = ({ ...props }) => {
+  return <StyledSectionParagraph {...props} />;
+};

components/Typography/SectionSubheading.jsx

@@ -0,0 +1,7 @@
+/* eslint-disable react/display-name */
+import { forwardRef } from "react";
+import { StyledSectionSubheading } from "./elements";
+
+export const SectionSubheading = forwardRef(({ ...props }, ref) => {
+  return <StyledSectionSubheading {...props} ref={ref} />;
+});

components/Typography/SectionTinyHeading.jsx

@@ -0,0 +1,5 @@
+import { StyledSectionTinyHeading } from "./elements";
+
+export const SectionTinyHeading = ({ ...props }) => {
+  return <StyledSectionTinyHeading {...props} />;
+};

components/Typography/elements.jsx

@@ -0,0 +1,45 @@
+/* eslint-disable react/display-name */
+import { forwardRef } from "react";
+import styled from "styled-components";
+
+export const StyledSectionBigHeading = styled(forwardRef((props, ref) => <h1 {...props} ref={ref} />))`
+  font-family: Poppins;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 3.94rem;
+`;
+
+export const StyledSectionHeading = styled(forwardRef((props, ref) => <h2 {...props} ref={ref} />))`
+  font-family: Poppins;
+  font-size: 2.5rem;
+  line-height: 4.375rem;
+  font-weight: 600;
+`;
+
+export const StyledSectionSubheading = styled(forwardRef((props, ref) => <h3 {...props} ref={ref} />))`
+  font-family: Poppins;
+  font-size: 1.25rem;
+  line-height: 1.875rem;
+  font-weight: 300;
+`;
+
+export const StyledSectionInnerHeading = styled(forwardRef((props, ref) => <h4 {...props} ref={ref} />))`
+  font-family: Poppins;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 300;
+`;
+
+export const StyledSectionTinyHeading = styled(forwardRef((props, ref) => <h5 {...props} ref={ref} />))`
+  font-family: Poppins;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  font-weight: 300;
+`;
+
+export const StyledSectionParagraph = styled((props) => <p {...props} />)`
+  font-family: Poppins;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+`;

components/Typography/index.js

@@ -0,0 +1,6 @@
+export * from "./SectionBigHeading";
+export * from "./SectionHeading";
+export * from "./SectionSubheading";
+export * from "./SectionInnerHeading";
+export * from "./SectionParagraph";
+export * from "./SectionTinyHeading";

components/index.js

@@ -0,0 +1,3 @@
+export * from "./Button";
+export * from "./Typography";
+export * from "./Containers";

next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}