Merge pull request #59 from Vizzuality/homepage

[SKY30-128][SKY30-135] Initial versions of the home & about pages

frontend/src/components/static-pages/cta/index.tsx

@@ -0,0 +1,62 @@
+import Link from 'next/link';
+
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/classnames';
+
+const BACKGROUND_IMAGES = {
+  cta1: '/images/static-pages/bg-images/cta-1.svg',
+  cta2: '/images/static-pages/bg-images/cta-2.svg',
+};
+
+const ctaVariants = cva('', {
+  variants: {
+    color: {
+      orange: 'bg-orange',
+      green: 'bg-green',
+      purple: 'bg-purple-500',
+    },
+  },
+  defaultVariants: {
+    color: 'orange',
+  },
+});
+
+export type CtaProps = VariantProps<typeof ctaVariants> & {
+  title: string;
+  description: string;
+  button: {
+    text: string;
+    link: string;
+  };
+  image?: keyof typeof BACKGROUND_IMAGES;
+};
+
+const Cta: React.FC<CtaProps> = ({ title, description, button, color, image = 'cta1' }) => (
+  <div className={cn(ctaVariants({ color }))}>
+    <div className="grid w-full gap-10 px-8 md:mx-auto md:max-w-7xl md:grid-cols-2">
+      <div className="my-10 flex flex-col gap-4 md:my-32">
+        <div className="text-6xl font-extrabold">{title}</div>
+        <div className="mt-4">{description}</div>
+        <div className="relative mt-3">
+          <Link
+            href={button.link}
+            className="inline-block bg-black px-8 py-3 font-mono text-xs uppercase text-white"
+          >
+            {button.text}
+          </Link>
+        </div>
+      </div>
+      <div className="hidden overflow-hidden md:flex">
+        <span
+          className="block h-full w-full bg-left-top bg-no-repeat"
+          style={{
+            backgroundImage: `url(${BACKGROUND_IMAGES[image]})`,
+          }}
+        />
+      </div>
+    </div>
+  </div>
+);
+
+export default Cta;

frontend/src/components/static-pages/intro/index.tsx

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+
+import { VariantProps, cva } from 'class-variance-authority';
+
+import Icon from '@/components/ui/icon';
+import { cn } from '@/lib/classnames';
+import ArrowRight from '@/styles/icons/arrow-right.svg?sprite';
+
+const BACKGROUND_IMAGES = {
+  computer: '/images/static-pages/bg-images/card-1.png',
+  clock: '/images/static-pages/bg-images/card-2.png',
+};
+
+const introVariants = cva('', {
+  variants: {
+    color: {
+      green: 'bg-green',
+      purple: 'bg-purple-400',
+    },
+  },
+  defaultVariants: {
+    color: 'green',
+  },
+});
+
+type IntroProps = VariantProps<typeof introVariants> & {
+  title: string;
+  description?: string | ReactNode;
+  image?: string;
+  onScrollClick: () => void;
+};
+
+const Intro: React.FC<IntroProps> = ({
+  title,
+  description,
+  color,
+  image = 'computer',
+  onScrollClick,
+}) => (
+  <div className={cn('border-b border-black bg-black', introVariants({ color }))}>
+    <div className="flex flex-col md:mx-auto md:max-w-7xl md:flex-row">
+      <div className="mt-6 mb-2 flex flex-1 flex-col px-8">
+        <div className="pr-10 text-5xl font-extrabold leading-tight md:text-6xl">{title}</div>
+        <div className="flex flex-1 flex-col justify-end pb-8">
+          {description && <div className="pr-[20%] text-xl">{description}</div>}
+        </div>
+      </div>
+      <div className="w-full border-l border-black md:w-[40%]">
+        <div className="flex h-full flex-col">
+          <span
+            className="aspect-square max-h-[200px] border-b border-black bg-cover bg-center bg-no-repeat mix-blend-multiply md:max-h-full"
+            style={{
+              backgroundImage: `url(${BACKGROUND_IMAGES[image]})`,
+            }}
+          />
+          <div className="flex h-full max-h-[140px] w-full justify-center py-6 md:max-h-[50%] md:min-h-0">
+            <button
+              className="flex w-full items-center justify-center md:w-auto"
+              type="button"
+              onClick={onScrollClick}
+            >
+              <Icon icon={ArrowRight} className="h-[80%] rotate-90 fill-black md:h-[60%]" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default Intro;