Skip to content
Snippets Groups Projects
Commit 028109fe authored by Andris Borbás's avatar Andris Borbás
Browse files

Add hero

parent b4e33989
Branches
No related tags found
1 merge request!3CI
...@@ -42,8 +42,8 @@ ...@@ -42,8 +42,8 @@
"@typescript-eslint/no-invalid-void-type": "error", // Force type safety "@typescript-eslint/no-invalid-void-type": "error", // Force type safety
"@typescript-eslint/prefer-ts-expect-error": "error", // Force type safety "@typescript-eslint/prefer-ts-expect-error": "error", // Force type safety
"import/no-anonymous-default-export": "error", // For named React components "import/no-anonymous-default-export": "error", // For named React components
"import/no-default-export": "error", // Default exports are confusing // "import/no-default-export": "error", // Default exports are confusing
"import/prefer-default-export": "off", // "import/prefer-default-export": "off",
"jsx-a11y/anchor-is-valid": "off", // Doesn't play well with Next `<Link>` "jsx-a11y/anchor-is-valid": "off", // Doesn't play well with Next `<Link>`
"prefer-exponentiation-operator": "error", // Auto-fix for an inherited rule "prefer-exponentiation-operator": "error", // Auto-fix for an inherited rule
"react/react-in-jsx-scope": "off", // React is always in scope with Next "react/react-in-jsx-scope": "off", // React is always in scope with Next
......
This diff is collapsed.
public/assets/images/hero.jpg

1.23 MiB

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1259.51 378.85">
<defs>
<clipPath id="hero">
<path d="M563 41.44v93.23l-.08-.07a70 70 0 0 0-113.35 52.55v4.77a70 70 0 0 0 113.35 52.55l.08-.07a70 70 0 0 0 26.59-54.21V119.4h.14v-78zm-43.49 191.42A43.39 43.39 0 1 1 562.87 188v2.98a43.39 43.39 0 0 1-43.36 41.89zm400.15-112.89h26.49v139.57h-26.49zm329.42 32.61a70 70 0 0 0-129.59 34.35v5a70.07 70.07 0 0 0 26.67 52.58v-52.85q-.06-1.13-.06-2.28t.06-2.28a43.13 43.13 0 0 1 6.41-20.52 43.41 43.41 0 0 1 73.84 0 43.13 43.13 0 0 1 6.43 21.29v71.55h26.67v-70.76a69.68 69.68 0 0 0-10.43-36.08zM745 176.07a70 70 0 0 0-138.73 11V192a70 70 0 0 0 119.47 47.11l-18.83-18.85A43.39 43.39 0 0 1 635 202.93h110a70.23 70.23 0 0 0 1.28-12.7v-1.45a70.21 70.21 0 0 0-1.28-12.71zm-110 0a43.4 43.4 0 0 1 82.52 0zm457.4-23.53a70.07 70.07 0 0 0-119.17 0 69.6 69.6 0 0 0-10 29q-.3 2.69-.4 5.44v4.89a70 70 0 0 0 140-1.72v-1.45a69.69 69.69 0 0 0-10.43-36.16zm-59.6 80.18a43.37 43.37 0 0 1-43.32-41.1q-.06-1.13-.06-2.28t.06-2.28a43.13 43.13 0 0 1 6.41-20.52 43.41 43.41 0 0 1 73.84 0 43.13 43.13 0 0 1 6.43 21.29v2.98a43.38 43.38 0 0 1-43.36 41.89zm70.03 76.09a70 70 0 0 1-119.5 49.57l6.15-6.16 12.68-12.7a43.38 43.38 0 0 0 74-29.22v-2.98a43.3 43.3 0 0 0-12.71-29.21l12.71-12.73 6.12-6.13a69.87 69.87 0 0 1 20.55 49.56z" />
<path d="M276.15 239.07A70 70 0 0 1 156.68 192v-4.89A70 70 0 0 1 276.15 140l-18.83 18.86a43.38 43.38 0 1 0 0 61.4zm136.16-99.16a70 70 0 0 0-92.8-5.47v-93h-26.7V191.9a70.08 70.08 0 0 0 26.69 52.6v-52.74q-.06-1.13-.06-2.28t.06-2.28a43.13 43.13 0 0 1 6.41-20.52 43.39 43.39 0 0 1 80.25 20.87v71.99h26.69v-70.06a69.81 69.81 0 0 0-20.54-49.57zm-273.58 36.16h-110a43.13 43.13 0 0 1 4.35-9.37 43.39 43.39 0 0 1 67.56-7.89l18.83-18.86A70 70 0 0 0 0 187.06V192a70.09 70.09 0 0 0 1.24 11h110a43.39 43.39 0 0 1-71.91 17.29l-12.68 12.7-6.15 6.16A70 70 0 0 0 140 190.23v-1.45a70.22 70.22 0 0 0-1.27-12.71zM70 189.57l-.16.1.12-.12.07.07z" />
<circle cx="932.35" cy="54.77" r="13.33" />
<path d="M901.72 176.07h-110a43.13 43.13 0 0 1 4.35-9.37 43.39 43.39 0 0 1 67.56-7.89l18.83-18.86A70 70 0 0 0 763 187.06V192a70.09 70.09 0 0 0 1.24 11h110a43.39 43.39 0 0 1-71.91 17.29l-12.68 12.7-6.15 6.16A70 70 0 0 0 903 190.23v-1.45a70.22 70.22 0 0 0-1.28-12.71zM833 189.57l-.16.1.12-.12.07.07z" />
</clipPath>
</defs>
</svg>
public/favicon.ico

14.7 KiB | W: | H:

public/favicon.ico

1.12 KiB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
public/favicon.png

3.01 KiB

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#f8485e;}.cls-2{fill:#fff;}</style></defs><g id="Layer_6" data-name="Layer 6"><circle class="cls-1" cx="256" cy="256" r="256"/><path class="cls-2" d="M445.46,218.87H142.6a118.35,118.35,0,0,1,12-25.79,119.45,119.45,0,0,1,186-21.74l51.83-51.92A192.71,192.71,0,0,0,63.51,249.13V262.6a192.63,192.63,0,0,0,3.42,30.22H369.82a119.47,119.47,0,0,1-198,47.59l-34.91,35-16.92,17A192.73,192.73,0,0,0,449,257.86v-4A193,193,0,0,0,445.46,218.87ZM256.23,256l-.44.28.33-.34.07-.07.09.1.19.18Z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#3d3d3d;}</style></defs><g id="pink"><path class="cls-1" d="M507.3,206.87H105.05A157.55,157.55,0,0,1,121,172.63,158.68,158.68,0,0,1,368,143.78l68.84-68.95A255.95,255.95,0,0,0,0,247.05V265a255.66,255.66,0,0,0,4.55,40.11H406.83a158.69,158.69,0,0,1-263,63.19L97.51,414.69,75,437.2A255.94,255.94,0,0,0,512,258.65v-5.3A256.9,256.9,0,0,0,507.3,206.87ZM256,256.22l-.59.36.45-.45.08-.09.13.13.25.25Z"/></g></svg>
\ No newline at end of file
File added
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" preserveAspectRatio="none">
<polygon fill="#fff" points="0 0, 6 0, 5 10, 0 10"/>
</svg>
src/assets/favicon.png

5.58 KiB

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1259.51 378.85"><defs><style>.a{fill:#f8485e}</style></defs><path class="a" d="M563 41.44v93.23l-.08-.07a70 70 0 0 0-113.35 52.55v4.77a70 70 0 0 0 113.35 52.55l.08-.07a70 70 0 0 0 26.59-54.21V119.4h.14v-78zm-43.49 191.42A43.39 43.39 0 1 1 562.87 188v2.98a43.39 43.39 0 0 1-43.36 41.89zm400.15-112.89h26.49v139.57h-26.49zm329.42 32.61a70 70 0 0 0-129.59 34.35v5a70.07 70.07 0 0 0 26.67 52.58v-52.85q-.06-1.13-.06-2.28t.06-2.28a43.13 43.13 0 0 1 6.41-20.52 43.41 43.41 0 0 1 73.84 0 43.13 43.13 0 0 1 6.43 21.29v71.55h26.67v-70.76a69.68 69.68 0 0 0-10.43-36.08zM745 176.07a70 70 0 0 0-138.73 11V192a70 70 0 0 0 119.47 47.11l-18.83-18.85A43.39 43.39 0 0 1 635 202.93h110a70.23 70.23 0 0 0 1.28-12.7v-1.45a70.21 70.21 0 0 0-1.28-12.71zm-110 0a43.4 43.4 0 0 1 82.52 0zm457.4-23.53a70.07 70.07 0 0 0-119.17 0 69.6 69.6 0 0 0-10 29q-.3 2.69-.4 5.44v4.89a70 70 0 0 0 140-1.72v-1.45a69.69 69.69 0 0 0-10.43-36.16zm-59.6 80.18a43.37 43.37 0 0 1-43.32-41.1q-.06-1.13-.06-2.28t.06-2.28a43.13 43.13 0 0 1 6.41-20.52 43.41 43.41 0 0 1 73.84 0 43.13 43.13 0 0 1 6.43 21.29v2.98a43.38 43.38 0 0 1-43.36 41.89zm70.03 76.09a70 70 0 0 1-119.5 49.57l6.15-6.16 12.68-12.7a43.38 43.38 0 0 0 74-29.22v-2.98a43.3 43.3 0 0 0-12.71-29.21l12.71-12.73 6.12-6.13a69.87 69.87 0 0 1 20.55 49.56z"/><path d="M276.15 239.07A70 70 0 0 1 156.68 192v-4.89A70 70 0 0 1 276.15 140l-18.83 18.86a43.38 43.38 0 1 0 0 61.4zm136.16-99.16a70 70 0 0 0-92.8-5.47v-93h-26.7V191.9a70.08 70.08 0 0 0 26.69 52.6v-52.74q-.06-1.13-.06-2.28t.06-2.28a43.13 43.13 0 0 1 6.41-20.52 43.39 43.39 0 0 1 80.25 20.87v71.99h26.69v-70.06a69.81 69.81 0 0 0-20.54-49.57zm-273.58 36.16h-110a43.13 43.13 0 0 1 4.35-9.37 43.39 43.39 0 0 1 67.56-7.89l18.83-18.86A70 70 0 0 0 0 187.06V192a70.09 70.09 0 0 0 1.24 11h110a43.39 43.39 0 0 1-71.91 17.29l-12.68 12.7-6.15 6.16A70 70 0 0 0 140 190.23v-1.45a70.22 70.22 0 0 0-1.27-12.71zM70 189.57l-.16.1.12-.12.07.07z" fill="#fff"/><circle class="a" cx="932.35" cy="54.77" r="13.33"/><path class="a" d="M901.72 176.07h-110a43.13 43.13 0 0 1 4.35-9.37 43.39 43.39 0 0 1 67.56-7.89l18.83-18.86A70 70 0 0 0 763 187.06V192a70.09 70.09 0 0 0 1.24 11h110a43.39 43.39 0 0 1-71.91 17.29l-12.68 12.7-6.15 6.16A70 70 0 0 0 903 190.23v-1.45a70.22 70.22 0 0 0-1.28-12.71zM833 189.57l-.16.1.12-.12.07.07z"/></svg>
\ No newline at end of file
import type { AppProps } from 'next/app'; import type { AppProps } from "next/app";
import React, { Children } from 'react'; import React, { Children } from "react";
import Nav from './placeholder/PlaceholderNav'; import Nav from "./placeholder/PlaceholderNav";
export default function Layout({ export default function Layout({
children, children,
......
import Image from "next/image";
export default function Hero() {
return (
<div className="pl-32 w-full bg-gray-900">
<div className="relative">
<Image
className="clip-hero pt-36 h-3/6"
src="/assets/images/hero.jpg"
layout="fill"
priority
loading="eager"
alt="hero"
/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2519.02 757.7">
<defs>
<clipPath id="hero">
<path d="M563 41.44v93.23l-.08-.07a70 70 0 0 0-113.35 52.55v4.77a70 70 0 0 0 113.35 52.55l.08-.07a70 70 0 0 0 26.59-54.21V119.4h.14v-78zm-43.49 191.42A43.39 43.39 0 1 1 562.87 188v2.98a43.39 43.39 0 0 1-43.36 41.89zm400.15-112.89h26.49v139.57h-26.49zm329.42 32.61a70 70 0 0 0-129.59 34.35v5a70.07 70.07 0 0 0 26.67 52.58v-52.85q-.06-1.13-.06-2.28t.06-2.28a43.13 43.13 0 0 1 6.41-20.52 43.41 43.41 0 0 1 73.84 0 43.13 43.13 0 0 1 6.43 21.29v71.55h26.67v-70.76a69.68 69.68 0 0 0-10.43-36.08zM745 176.07a70 70 0 0 0-138.73 11V192a70 70 0 0 0 119.47 47.11l-18.83-18.85A43.39 43.39 0 0 1 635 202.93h110a70.23 70.23 0 0 0 1.28-12.7v-1.45a70.21 70.21 0 0 0-1.28-12.71zm-110 0a43.4 43.4 0 0 1 82.52 0zm457.4-23.53a70.07 70.07 0 0 0-119.17 0 69.6 69.6 0 0 0-10 29q-.3 2.69-.4 5.44v4.89a70 70 0 0 0 140-1.72v-1.45a69.69 69.69 0 0 0-10.43-36.16zm-59.6 80.18a43.37 43.37 0 0 1-43.32-41.1q-.06-1.13-.06-2.28t.06-2.28a43.13 43.13 0 0 1 6.41-20.52 43.41 43.41 0 0 1 73.84 0 43.13 43.13 0 0 1 6.43 21.29v2.98a43.38 43.38 0 0 1-43.36 41.89zm70.03 76.09a70 70 0 0 1-119.5 49.57l6.15-6.16 12.68-12.7a43.38 43.38 0 0 0 74-29.22v-2.98a43.3 43.3 0 0 0-12.71-29.21l12.71-12.73 6.12-6.13a69.87 69.87 0 0 1 20.55 49.56z" />
<path d="M276.15 239.07A70 70 0 0 1 156.68 192v-4.89A70 70 0 0 1 276.15 140l-18.83 18.86a43.38 43.38 0 1 0 0 61.4zm136.16-99.16a70 70 0 0 0-92.8-5.47v-93h-26.7V191.9a70.08 70.08 0 0 0 26.69 52.6v-52.74q-.06-1.13-.06-2.28t.06-2.28a43.13 43.13 0 0 1 6.41-20.52 43.39 43.39 0 0 1 80.25 20.87v71.99h26.69v-70.06a69.81 69.81 0 0 0-20.54-49.57zm-273.58 36.16h-110a43.13 43.13 0 0 1 4.35-9.37 43.39 43.39 0 0 1 67.56-7.89l18.83-18.86A70 70 0 0 0 0 187.06V192a70.09 70.09 0 0 0 1.24 11h110a43.39 43.39 0 0 1-71.91 17.29l-12.68 12.7-6.15 6.16A70 70 0 0 0 140 190.23v-1.45a70.22 70.22 0 0 0-1.27-12.71zM70 189.57l-.16.1.12-.12.07.07z" />
<circle cx="932.35" cy="54.77" r="13.33" />
<path d="M901.72 176.07h-110a43.13 43.13 0 0 1 4.35-9.37 43.39 43.39 0 0 1 67.56-7.89l18.83-18.86A70 70 0 0 0 763 187.06V192a70.09 70.09 0 0 0 1.24 11h110a43.39 43.39 0 0 1-71.91 17.29l-12.68 12.7-6.15 6.16A70 70 0 0 0 903 190.23v-1.45a70.22 70.22 0 0 0-1.28-12.71zM833 189.57l-.16.1.12-.12.07.07z" />
</clipPath>
</defs>
</svg>
</div>
</div>
);
}
import clsx from "clsx"; import clsx from "clsx";
import { useState } from "react"; import Layout from "components/Layout";
import Hero from "components/navbar/Hero";
import Image from "next/image";
import React from "react";
export default function Page() { export default function Page() {
const [inverted, setInverted] = useState(false); const [inverted, setInverted] = React.useState(false);
return ( return (
<div <Layout>
className={clsx( <Hero />
"flex flex-col items-center justify-center min-h-screen", </Layout>
inverted && "bg-black",
)}
>
<button
type="button"
className={clsx(
"p-3 border-4 border-current",
inverted && "text-white",
)}
onClick={() => {
setInverted((prevValue) => !prevValue);
}}
>
Invert colors
</button>
</div>
); );
} }
@import "tailwindcss/base"; @import "tailwindcss/base";
@import "tailwindcss/components"; @import "tailwindcss/components";
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
.clip-hero {
clip-path: url(#hero);
}
#hero {
width: 120%;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment