From 26ac765ad6da5649549d1ef990b6e89db373d920 Mon Sep 17 00:00:00 2001
From: Nagaraj Devendhiran <nagaraj.devendhiran@netcentric.biz>
Date: Wed, 31 Jan 2024 13:21:24 +0100
Subject: [PATCH] NA - Added header component with go and wordmark

---
 apps/frontend/src/assets/icons/logo.svg       | 24 +++++++++++++++++++
 .../src/assets/icons/wordmark-cognizant.svg   |  3 +++
 .../src/components/Header/Header.stories.ts   | 20 ++++++++++++++++
 .../frontend/src/components/Header/Header.tsx | 17 +++++++++++++
 4 files changed, 64 insertions(+)
 create mode 100644 apps/frontend/src/assets/icons/logo.svg
 create mode 100644 apps/frontend/src/assets/icons/wordmark-cognizant.svg
 create mode 100644 apps/frontend/src/components/Header/Header.stories.ts
 create mode 100644 apps/frontend/src/components/Header/Header.tsx

diff --git a/apps/frontend/src/assets/icons/logo.svg b/apps/frontend/src/assets/icons/logo.svg
new file mode 100644
index 0000000..e33cefc
--- /dev/null
+++ b/apps/frontend/src/assets/icons/logo.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="25" viewBox="0 0 29 25" fill="none">
+  <path d="M12.2756 12.0801H0L8.4333 24.1602L17.1754 18.9699L12.2756 12.0801Z" fill="url(#paint0_linear_1480_1464)"/>
+  <path d="M28.7789 12.0801L8.43359 24.1602H20.5076L28.7789 12.0801Z" fill="url(#paint1_linear_1480_1464)"/>
+  <path d="M0 12.0803H12.2752L17.1889 5.19955L8.43285 0L0 12.0803Z" fill="url(#paint2_linear_1480_1464)"/>
+  <path d="M28.7789 12.0803L8.43359 0H20.5076L28.7789 12.0803Z" fill="url(#paint3_linear_1480_1464)"/>
+  <defs>
+    <linearGradient id="paint0_linear_1480_1464" x1="0.000238563" y1="24.1611" x2="17.1757" y2="24.1611" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3D54CE"/>
+      <stop offset="1" stop-color="#35CACF"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_1480_1464" x1="8.43334" y1="24.1612" x2="28.7787" y2="24.1612" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#13457D"/>
+      <stop offset="1" stop-color="#279698"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_1480_1464" x1="-0.000613054" y1="12.0795" x2="17.1883" y2="12.0795" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#090086"/>
+      <stop offset="1" stop-color="#2F96A9"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_1480_1464" x1="8.43334" y1="12.0795" x2="28.7787" y2="12.0795" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3B62CA"/>
+      <stop offset="1" stop-color="#93DFE3"/>
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/apps/frontend/src/assets/icons/wordmark-cognizant.svg b/apps/frontend/src/assets/icons/wordmark-cognizant.svg
new file mode 100644
index 0000000..24f4bb2
--- /dev/null
+++ b/apps/frontend/src/assets/icons/wordmark-cognizant.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="104" height="23" viewBox="0 0 104 23" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M55.8521 4.74542H57.8974V16.9455H55.8521V4.74542ZM48.3895 4.4694C47.0629 4.4694 45.8467 4.91103 44.8517 5.73909V4.74542H42.8064V16.9455H44.8517V10.045C44.8517 8.05765 46.4548 6.51194 48.3895 6.51194C50.3243 6.51194 51.9274 8.11286 51.9274 10.045V16.9455H53.9726V10.045C53.9726 6.95357 51.4851 4.4694 48.3895 4.4694ZM38.7159 4.69021H40.7611V16.4487C40.7059 19.9265 37.8867 22.7419 34.4042 22.7971C31.6402 22.8523 29.0974 21.0306 28.3235 18.3808H30.5347C31.2533 19.8713 32.7458 20.8098 34.4042 20.7546C36.7811 20.6994 38.6606 18.7672 38.7711 16.3934V15.3998C36.1731 17.7735 32.1377 17.6631 29.7608 15.0686C27.3838 12.474 27.4944 8.44408 30.0924 6.07031C32.5247 3.80695 36.3389 3.80695 38.7711 6.07031L38.7159 4.69021ZM38.7159 10.8179C38.7159 8.44408 36.7811 6.45674 34.4042 6.45674C32.0272 6.45674 30.0372 8.38888 30.0372 10.7626C30.0372 13.1364 31.9719 15.1238 34.4042 15.1238C36.7811 15.1238 38.7159 13.1916 38.7159 10.8179ZM7.20726 6.45674C8.86561 6.45674 10.4134 7.45041 11.132 8.94092H13.2879C12.2929 5.57348 8.69977 3.64134 5.3278 4.69021C1.95583 5.68388 0.0210919 9.27214 1.07138 12.6396C2.12166 16.007 5.65947 17.9392 9.03144 16.8903C11.0767 16.283 12.6798 14.6821 13.2879 12.6396H11.132C10.137 14.7925 7.53893 15.731 5.38308 14.7373C3.22723 13.7437 2.2875 11.1491 3.28251 8.99612C4.00112 7.45041 5.49364 6.45674 7.20726 6.45674ZM27.0521 10.8179C27.0521 14.3509 24.1777 17.1663 20.6951 17.1663C17.1573 17.1663 14.3382 14.2957 14.3382 10.8179C14.3382 7.34 17.1021 4.4694 20.6399 4.4694C24.1777 4.4694 27.0521 7.2848 27.0521 10.8179ZM25.0069 10.8179C25.0069 8.44408 23.0721 6.45674 20.6952 6.45674C18.3182 6.45674 16.3282 8.38888 16.3282 10.7626C16.3282 13.1364 18.2629 15.1238 20.6399 15.1238C23.0721 15.1238 25.0069 13.1916 25.0069 10.8179ZM91.6171 4.4694C90.2904 4.4694 89.0743 4.91103 88.0793 5.73909V4.74542H86.034V16.9455H88.0793V10.045C88.0793 8.05765 89.6824 6.45674 91.6171 6.45674C93.6071 6.45674 95.2102 8.05765 95.2102 9.98979V16.8903H97.2555V10.045C97.2002 6.95357 94.7127 4.4694 91.6171 4.4694ZM81.9434 4.74542H83.9887V16.9455H81.9434V15.5102C79.3454 17.884 75.31 17.7735 72.9331 15.179C70.5561 12.5844 70.6667 8.55449 73.2647 6.18072C74.4256 5.07664 75.9734 4.4694 77.5764 4.4694C79.1795 4.4694 80.7273 5.07664 81.9434 6.18072V4.74542ZM81.9434 10.8179C81.9434 8.44408 80.0087 6.51194 77.5764 6.51194C75.1995 6.51194 73.2647 8.44408 73.2647 10.8731C73.2647 13.2468 75.1995 15.179 77.5764 15.179C80.0087 15.1238 81.9434 13.1916 81.9434 10.8179ZM103.999 6.73276V4.69021H100.959V1.37798H98.9138V12.8604C98.9138 15.1238 100.738 16.9455 103.004 16.9455H103.999V14.9029H103.004C101.899 14.9029 100.959 13.9645 100.959 12.8604V6.73276H103.999ZM56.8471 0.329102C56.0732 0.329102 55.5204 0.936345 55.5204 1.654C55.5204 2.42685 56.1285 2.97889 56.8471 2.97889C57.621 2.97889 58.1738 2.37165 58.1738 1.654C58.2291 0.936345 57.621 0.329102 56.8471 0.329102C56.9024 0.329102 56.9024 0.329102 56.8471 0.329102ZM70.1139 4.74542H59.9427V6.78796H67.4605L59.9427 14.9029V16.9455H70.1139V14.9029H62.5408L70.0586 6.78796L70.1139 4.74542Z" fill="#000048"/>
+</svg>
diff --git a/apps/frontend/src/components/Header/Header.stories.ts b/apps/frontend/src/components/Header/Header.stories.ts
new file mode 100644
index 0000000..bc73fa3
--- /dev/null
+++ b/apps/frontend/src/components/Header/Header.stories.ts
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Header } from './Header';
+
+const meta = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+export const DefaultHeader: Story = {};
diff --git a/apps/frontend/src/components/Header/Header.tsx b/apps/frontend/src/components/Header/Header.tsx
new file mode 100644
index 0000000..3144d4b
--- /dev/null
+++ b/apps/frontend/src/components/Header/Header.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import logo from '../../assets/icons/logo.svg';
+import wordmark from '../../assets/icons/wordmark-cognizant.svg';
+
+export const Header = () => (
+  <header>
+    <div className="flex justify-between mx-12 py-[18px]">
+      <div className='flex'>
+        <img src={logo} alt="logo" />
+        <img src={wordmark} alt="wordmark" />
+      </div>
+      <div>
+        <span className='font-gellix text-midnight-blue text-[20px] leading-5 font-semibold'>Solari Astrocraft</span>
+      </div>
+    </div>
+  </header>
+);