update style

src/stories/Button.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

src/stories/Button.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {label}
+      <style jsx>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
+    </button>
+  );
+};

src/stories/Configure.mdx

@@ -32,9 +32,8 @@ export const RightArrow = () => <svg
   <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
 </svg>
 
-<Meta title="Introduction/Configure your project" />
+<Meta title="Example/Configure your project" />
 
-<link href="https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,300,400&display=swap" rel="stylesheet"></link>
 <div className="sb-container">
   <div className='sb-section-title'>
     # Configure your project

src/stories/Footer/Footer.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Title, Description, Subtitle, Stories, Primary as PrimaryDocBlock, Controls } from "@storybook/blocks";
+
+import Button from "./Footer";
+import Footer from "./Footer";
+
+const meta = {
+  title: "Components/Footer",
+  component: Button,
+  parameters: {
+    layout: "fullscreen",
+    componentSubtitle: "'Conponent Footer",
+    docs: {
+      page: () => (
+        <>
+          <Title></Title>
+          <Description></Description>
+          <Subtitle></Subtitle>
+          <PrimaryDocBlock></PrimaryDocBlock>
+          <Controls></Controls>
+          <Stories></Stories>
+        </>
+      ),
+    },
+  },
+  tags: ["autodocs"],
+} as Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FooterOnly: Story = {
+  args: {
+    card: false
+  },
+};
+
+export const FooterCard: Story = {
+  args: {
+    card: true
+  },
+};
+
+
+
+

src/stories/Footer/Footer.style.ts

@@ -0,0 +1,190 @@
+import styled from 'styled-components';
+
+export const FooterContainer = styled.footer`
+  margin: auto;
+  margin-top: 125px;
+  width: 100%;
+  @media (width >= 1444px) {
+    max-width: 1420px;
+  }
+`;
+
+export const WorkTogether = styled.div`
+  background-color: #0041e8;
+  border-radius: 32px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  padding: 40px 36px;
+  @media screen and (width >= 1050px) {
+    padding: 46px 45px 47px 45px;
+    text-align: start;
+    justify-content: space-between;
+    flex-direction: row;
+  }
+  #work-together-content {
+    h2 {
+      @media (width >= 1050px) {
+        margin: 0;
+        margin-bottom: 8px;
+        font-size: 32px;
+      }
+    }
+    p {
+      margin: 0;
+      margin-top: 16px;
+      word-wrap: break-word;
+      word-break: break-word;
+      margin-bottom: 28px;
+      @media (width >= 1050px) {
+        margin-bottom: 0;
+        margin-top: 0;
+        width: 608px;
+      }
+    }
+  }
+`;
+
+export const WorkTogetherBg = styled.div`
+  overflow: hidden;
+  position: absolute;
+  user-select: none;
+`;
+
+export const LetsTalkButton = styled.button`
+  border: none;
+  padding: 16px 24px;
+  border-radius: 12px;
+  gap: 10px;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 17px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #1752e9;
+  outline: none;
+`;
+
+export const FooterContent = styled.div`
+  margin-top: 60px;
+  display: flex;
+  @media screen and (width <= 1050px) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+`;
+
+export const FooterDigiDreams = styled.div`
+  width: 100%;
+  margin-bottom: 20px;
+  margin-right: 139px;
+  h3 {
+    margin: 0;
+    margin-bottom: 17px;
+  }
+  p {
+    width: 292px;
+    margin-bottom: 26px;
+  }
+  p:hover {
+    color: #516371;
+  }
+  @media screen and (width <= 1050px) {
+    grid-column: span 2 / span 2;
+    margin-bottom: 40px;
+    h3 {
+      margin-bottom: 20px;
+    }
+    p {
+      width: 100%;
+      margin: 20px 0;
+      color: #516371;
+    }
+  }
+`;
+
+export const FooterDigiDreamsIconWrapper = styled.div`
+  margin-bottom: 12px;
+  img {
+    margin-right: 16px;
+    height: 24px;
+    width: 24px;
+  }
+`;
+
+export const Icon = styled.svg`
+  height: 25px;
+  width: 25px;
+  margin-right: 16px;
+  color: #a7abb6;
+  &:hover {
+    color: #516371;
+  }
+  @media (width <= 1050px) {
+    color: #516371;
+  }
+`;
+
+export const FooterWrapper = styled.div`
+  width: 100%;
+  @media screen and (width <= 1050px) {
+    margin-right: 20px;
+    margin-bottom: 40px;
+  }
+  &#service {
+    grid-column: span 2 / span 2;
+  }
+`;
+
+export const FooterItems = styled.div`
+  p,
+  span {
+    margin: 0;
+    margin-bottom: 18px;
+  }
+  p:hover,
+  span:hover {
+    color: #516371;
+  }
+  div {
+    display: flex;
+    img {
+      margin-right: 16px;
+      margin-bottom: 16px;
+    }
+  }
+  &.service {
+    p {
+      color: #a7abb6;
+      width: 100%;
+    }
+  }
+`;
+
+export const FooterCompanyWrapper = styled.div`
+  color: #000;
+  font-family: 'Asap', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+`;
+
+export const FooterCopyrigt = styled.div`
+  margin-top: 70px;
+  padding-top: 12px;
+  text-align: center;
+  margin-bottom: 30px;
+  p {
+    line-height: 24px;
+  }
+  @media (width <= 1050px) {
+    text-align: start;
+  }
+`;