chore(storefront): redesign of frontpage (#1695)

Co-authored-by: Tobias Barsnes <[email protected]>

apps/storefront/components/Blog/Card/BlogCard.module.css

@@ -30,10 +30,17 @@
   }
 }
 
+.tag {
+  margin-bottom: 11px;
+  padding: 3px 9px;
+  font-size: 16px;
+}
+
 .meta {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--fds-spacing-3);
   color: var(--fds-semantic-text-neutral-subtle);
+  font-size: 14px !important;
 }
 
 .metaSquare {

apps/storefront/components/Blog/Card/BlogCard.tsx

@@ -1,4 +1,4 @@
-import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+import { Card, Heading, Paragraph, Tag } from '@digdir/designsystemet-react';
 import Link from 'next/link';
 import cl from 'clsx';
 
@@ -8,10 +8,12 @@ type BlogCardProps = {
   title: string;
   desc: string;
   author?: string;
-  date: string;
+  date?: string;
   image: string;
   href: string;
   featured?: boolean;
+  tagText?: string;
+  tagColor?: 'first' | 'second' | 'third';
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>;
 
 export const BlogCard = ({
@@ -23,6 +25,8 @@ export const BlogCard = ({
   date,
   featured = false,
   className,
+  tagText,
+  tagColor,
   ...props
 }: BlogCardProps) => {
   return (
@@ -43,28 +47,40 @@ export const BlogCard = ({
         </Card.Media>
         <div className={classes.wrapper}>
           <Card.Header className={classes.heading}>
+            {tagText && (
+              <Tag
+                className={classes.tag}
+                color={tagColor}
+                size='small'
+              >
+                {tagText}
+              </Tag>
+            )}
             <Heading size={featured ? 'large' : 'small'}>{title}</Heading>
           </Card.Header>
           <Card.Content>
             <Paragraph size={featured ? 'large' : 'small'}>{desc}</Paragraph>
           </Card.Content>
-          <Card.Footer className={classes.footer}>
-            <Paragraph
-              size={featured ? 'medium' : 'small'}
-              className={classes.meta}
-            >
-              <span>{date}</span>
-              {author && (
-                <>
-                  <span
-                    aria-hidden
-                    className={classes.metaSquare}
-                  />
-                  <span>{author}</span>
-                </>
-              )}
-            </Paragraph>
-          </Card.Footer>
+          {author ||
+            (date && (
+              <Card.Footer className={classes.footer}>
+                <Paragraph
+                  size={featured ? 'medium' : 'xsmall'}
+                  className={classes.meta}
+                >
+                  <span>{date}</span>
+                  {author && (
+                    <>
+                      <span
+                        aria-hidden
+                        className={classes.metaSquare}
+                      />
+                      <span>{author}</span>
+                    </>
+                  )}
+                </Paragraph>
+              </Card.Footer>
+            ))}
         </div>
       </Link>
     </Card>

apps/storefront/components/Header/Header.module.css

@@ -1,7 +1,9 @@
 .header {
-  height: 96px;
+  height: 106px;
   display: flex;
   align-items: center;
+  position: relative;
+  z-index: 5;
   background-color: white;
 }
 
@@ -10,7 +12,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0 var(--fds-spacing-7);
+  padding: 0 var(--fds-spacing-8);
 }
 
 .logo {
@@ -58,7 +60,7 @@
 }
 
 .firstIcon {
-  margin-left: var(--fds-spacing-7);
+  margin-left: var(--fds-spacing-8);
 }
 
 .linkIcon {
@@ -68,8 +70,8 @@
 }
 
 .linkIcon > svg {
-  height: 24px;
-  width: 24px;
+  height: 26px;
+  width: 26px;
 }
 
 .linkIcon.figma path {

apps/storefront/components/ImageBanner/ImageBanner.module.css

@@ -0,0 +1,154 @@
+.section {
+  position: relative;
+  margin: 110px 0;
+}
+
+.blue {
+  background-color: var(--fds-brand-alt3-300);
+}
+
+.red {
+  background-color: var(--fds-brand-alt1-300);
+}
+
+.yellow {
+  background-color: var(--fds-brand-alt2-300);
+}
+
+.grey {
+  background-color: var(--fds-semantic-background-subtle);
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 60px;
+}
+
+.imgContainer {
+  flex-basis: 570px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.smallImage {
+  flex-basis: 400px;
+}
+
+.textContainer {
+  flex-basis: 400px;
+  flex-grow: 500;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font: var(--fds-typography-heading-large);
+  margin-bottom: var(--fds-spacing-4);
+}
+
+.tag {
+  margin-bottom: 8px;
+}
+
+.desc {
+  font: var(--fds-typography-paragraph-medium);
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 1.7em;
+  font-size: 20px;
+}
+
+.img {
+  width: 100%;
+  display: block;
+}
+
+.video {
+  width: 100%;
+  height: auto;
+}
+
+.region {
+  color: inherit;
+}
+
+.button {
+  height: 48px;
+  padding: 0 var(--fds-spacing-4);
+  border: 1px solid #c0c0c0;
+  display: flex;
+  align-items: center;
+  background-color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: 0.1s all;
+  color: var(--fds-semantic-text-neutral-default) !important;
+  text-decoration: none;
+}
+
+.buttons {
+  color: inherit;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fds-spacing-5);
+  margin-top: var(--fds-spacing-5);
+}
+
+@media (max-width: 480px) {
+  .button {
+    width: 100%;
+  }
+}
+
+.button:hover {
+  background-color: #dbedff;
+}
+
+.button svg {
+  margin-right: var(--fds-spacing-2);
+  color: #1e2b3c;
+}
+
+.button img {
+  height: 20px;
+  margin-right: var(--fds-spacing-2);
+  border-radius: 50%;
+}
+
+.link {
+  text-underline-offset: 6px;
+  color: var(--fds-semantic-text-neutral-default);
+  display: flex;
+  align-items: center;
+  margin-top: var(--fds-spacing-5);
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.link:hover {
+  text-decoration-thickness: 2px;
+}
+
+.link svg {
+  margin-right: var(--fds-spacing-2);
+  color: var(--fds-semantic-text-neutral-default);
+}
+
+.fallbackImg {
+  display: none;
+}
+
+@media (prefers-reduced-motion) {
+  .fallbackImg {
+    display: block;
+    width: 100%;
+  }
+
+  .video {
+    display: none;
+  }
+}