[#361,art][m]: start impermanence page and add background to art page.

pages/art.jsx

@@ -9,15 +9,20 @@ const Page = () => {
 };
 
 const Hero = () => (
-  <div className="overflow-hidden bg-white py-24 sm:py-32 min-h-screen">
-    <div className="mx-auto max-w-7xl md:px-6 lg:px-8 font-serif">
+  <div className="relative isolate overflow-hidden pt-24 sm:pt-32 min-h-screen bg-black">
+    <div className="mx-auto max-w-7xl md:px-6 lg:px-8 text-white">
+      <img
+        src="/assets/img/art/trees.webp"
+        alt=""
+        className="absolute inset-0 -z-10 object-cover opacity-90"
+        />
       <div className="grid grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start">
         <div className="px-6 lg:px-0 lg:pr-8 lg:pt-4">
-          <h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+          <h1 className="mt-10 text-4xl font-bold tracking-tight sm:text-6xl">
             Art of the second renaissance
           </h1>
-          <h3 className="mt-6 text-2xl leading-8 text-gray-600 sm:text-4xl">
-            We are a collective of artists making art to bring forth a second renaissance.
+          <h3 className="mt-6 text-2xl leading-8 sm:text-4xl">
+            We are an artists collective making art to bring forth a second renaissance.
           </h3>
         </div>
         <div className="sm:px-6 lg:px-0">
@@ -139,4 +144,5 @@ export function getStaticProps() {
   }
 }
 
-export default Page;
+export default Page;
+

pages/art/impermanence.jsx

@@ -0,0 +1,53 @@
+const Page = () => {
+  return (
+    <>
+      <Hero></Hero>
+    </>
+  );
+};
+
+export function getStaticProps() {
+  return {
+    props: {
+      meta: {
+        layout: 'unstyled'
+      }
+    }
+  }
+}
+
+export default Page;
+
+const Hero = () => (
+  <div className="overflow-hidden bg-white">
+    <div className="mx-auto max-w-7xl px-4 lg:px-8">
+      <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+        <div className="lg:pr-8 lg:pt-56">
+          <div className="lg:max-w-lg">
+            <h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl hidden">
+              Magazine and Exhibition
+            </h1>
+            <p className="mt-6 text-2xl leading-8">
+              For our first magazine and exhibition we chose the theme of Impermanence. Across religions there is often the practice of sitting with the impermanent nature of life, from the five remembrance to the memento mori, these contemplation allows us to grow our wisdom and insight of inter-connectedness.
+            </p>
+            <p className="mt-8">
+              <a
+                href="/assets/"
+                className="btnsq btn-black text-3xl"
+                >
+                Download magazine
+              </a>
+            </p>
+          </div>
+        </div>
+        <div className="flex items-start justify-end order-first">
+          <img
+            src="/assets/img/art/impermanence-cover.webp"
+            alt=""
+            className="max-w-none mx-auto h-screen"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+);

styles/global.css

@@ -88,12 +88,23 @@ html {
 }
 
 /* buttons */
+
 .btn {
-  @apply font-bold py-2 px-4 rounded-md px-4 py-3 font-medium text-primary shadow no-underline inline-block;
+  @apply py-2 px-4 rounded-md px-4 py-3 font-medium text-primary shadow no-underline inline-block;
 }
 .btn-blue {
   @apply bg-[#F0CA5E];
 }
+.btn-blue:hover {
+  @apply bg-yellow-500 outline-none;
+}
+
+.btnsq {
+  @apply px-8 py-4 text-lg font-semibold text-white shadow-sm no-underline inline-block;
+}
+.btn-black {
+  @apply bg-black;
+}
 .btn-blue:hover {
   @apply bg-yellow-500 outline-none;
 }