From 0e5fa19abb956b313f77ae6fe14339a2c09972a3 Mon Sep 17 00:00:00 2001
From: Aadil Ayub <aadilayub@protonmail.com>
Date: Mon, 7 Apr 2025 15:47:51 +0500
Subject: [PATCH] create custom php template for book club landing

---
 assets/css/static.css            | 79 ++++++++++++++++++++++++++++++
 assets/css/static.css.map        |  1 +
 assets/images/profile-button.svg |  6 +++
 assets/scss/static.scss          | 84 ++++++++++++++++++++++++++++++++
 page-book-club.php               | 58 ++++++++++++++++++++++
 5 files changed, 228 insertions(+)
 create mode 100644 assets/css/static.css
 create mode 100644 assets/css/static.css.map
 create mode 100644 assets/images/profile-button.svg
 create mode 100644 assets/scss/static.scss
 create mode 100644 page-book-club.php

diff --git a/assets/css/static.css b/assets/css/static.css
new file mode 100644
index 0000000..4eb5feb
--- /dev/null
+++ b/assets/css/static.css
@@ -0,0 +1,79 @@
+:root {
+  --background: #040810;
+  --foreground-text: #FAF7EF;
+  --bg-accent: #8E9AEC; /* add 99 at the end for constellation, and 0/50% opacity for radial gradient */
+  --font-family-serif: "EB Garamond", serif;
+  --font-family-mono: "Jura", sans-serif;
+  --font-family-sans: "Sora", sans-serif;
+}
+
+html {
+  background: var(--background);
+}
+
+body {
+  height: 100vh;
+  font-family: var(--font-family-sans);
+  color: var(--foreground-text);
+  margin: 0;
+  background: radial-gradient(50% 50% at 50% 50%, rgba(142, 154, 236, 0.4) 0%, rgba(142, 154, 236, 0) 100%);
+}
+
+a {
+  color: var(--foreground-text);
+}
+
+.btn {
+  border: 1px solid;
+  border-radius: 0.85em;
+  padding: 0.75em 0.5em;
+}
+
+.site-navigation {
+  display: flex;
+  justify-content: space-between;
+  padding: 50px;
+  font-family: var(--font-family-mono);
+  font-weight: 700;
+  text-transform: uppercase;
+  align-items: center;
+}
+.site-navigation a {
+  text-decoration: none;
+}
+.site-navigation a:hover {
+  text-decoration: underline;
+}
+.site-navigation .header-logo {
+  position: absolute;
+  top: 0;
+  left: 63px;
+}
+.site-navigation .logo-spacer {
+  width: 155px;
+}
+.site-navigation ul.pages-list {
+  display: flex;
+  justify-content: space-between;
+  list-style-type: none;
+  gap: 2em;
+  margin: 0;
+  padding: 0;
+}
+.site-navigation .action-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1em;
+}
+
+/* .div {
+  text-align: center;
+  padding-block: 20rem;
+  background: radial-gradient(circle at 85% 50%, rgba(142, 154, 236, 0.40) 0%, rgba(142, 154, 236, 0.00) 50%);
+} */
+.div h2 {
+  font-size: 38px;
+}
+
+/*# sourceMappingURL=static.css.map */
diff --git a/assets/css/static.css.map b/assets/css/static.css.map
new file mode 100644
index 0000000..b8b63be
--- /dev/null
+++ b/assets/css/static.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EAEA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EACE","file":"static.css"}
\ No newline at end of file
diff --git a/assets/images/profile-button.svg b/assets/images/profile-button.svg
new file mode 100644
index 0000000..06571db
--- /dev/null
+++ b/assets/images/profile-button.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="solar:user-bold">
+<path id="Vector" d="M9.99935 8.33332C11.8403 8.33332 13.3327 6.84094 13.3327 4.99999C13.3327 3.15904 11.8403 1.66666 9.99935 1.66666C8.1584 1.66666 6.66602 3.15904 6.66602 4.99999C6.66602 6.84094 8.1584 8.33332 9.99935 8.33332Z" fill="#FAF7EF"/>
+<path id="Vector_2" d="M16.6673 13.75C16.6673 15.8208 16.6673 17.5 10.0007 17.5C3.33398 17.5 3.33398 15.8208 3.33398 13.75C3.33398 11.6792 6.31898 10 10.0007 10C13.6823 10 16.6673 11.6792 16.6673 13.75Z" fill="#FAF7EF"/>
+</g>
+</svg>
diff --git a/assets/scss/static.scss b/assets/scss/static.scss
new file mode 100644
index 0000000..ffc9890
--- /dev/null
+++ b/assets/scss/static.scss
@@ -0,0 +1,84 @@
+:root {
+  --background: #040810;
+  --foreground-text: #FAF7EF;
+  --bg-accent: #8E9AEC; /* add 99 at the end for constellation, and 0/50% opacity for radial gradient */
+
+  --font-family-serif: 'EB Garamond', serif;
+  --font-family-mono: 'Jura', sans-serif;
+  --font-family-sans: 'Sora', sans-serif;
+}
+html {
+  background: var(--background);
+}
+
+body {
+  height: 100vh;
+  font-family: var(--font-family-sans);
+  color: var(--foreground-text);
+  margin: 0;
+  // border-radius: 2566px;
+  background: radial-gradient(50% 50% at 50% 50%, rgba(142, 154, 236, 0.40) 0%, rgba(142, 154, 236, 0.00) 100%);
+}
+
+a {
+  color: var(--foreground-text);
+}
+
+.btn {
+  border: 1px solid;
+  border-radius: 0.85em;
+  padding: .75em .5em
+}
+
+.site-navigation {
+  display: flex;
+  justify-content: space-between;
+  padding: 50px;
+  font-family: var(--font-family-mono);
+  font-weight: 700;
+  text-transform: uppercase;
+  align-items: center;
+ 
+  a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  
+  .header-logo {
+    position: absolute;
+    top: 0;
+    left: 63px;
+  }
+
+  .logo-spacer {
+    width: 155px;
+  }
+
+  ul.pages-list {
+    display: flex;
+    justify-content: space-between;
+    list-style-type: none;
+    gap: 2em;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .action-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1em;
+  }
+}
+
+/* .div {
+  text-align: center;
+  padding-block: 20rem;
+  background: radial-gradient(circle at 85% 50%, rgba(142, 154, 236, 0.40) 0%, rgba(142, 154, 236, 0.00) 50%);
+} */
+
+.div h2 {
+  font-size: 38px;
+}
\ No newline at end of file
diff --git a/page-book-club.php b/page-book-club.php
new file mode 100644
index 0000000..5cfecb5
--- /dev/null
+++ b/page-book-club.php
@@ -0,0 +1,58 @@
+<?php
+/**
+ * Template Name: Book Club Landing
+ */
+?>
+
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+
+<head>
+  <meta charset="<?php bloginfo('charset'); ?>">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="<?= get_theme_file_uri('/assets/css/static.css'); ?>">
+  <title>Book Club</title>
+  <?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+  <?php wp_body_open(); ?>
+  <header class="site-navigation">
+    <a class="logo-wrapper" href="/">
+      <div
+        class="logo-spacer">
+      </div>
+      <img
+        class="header-logo"
+        src="<?= get_theme_file_uri('/assets/images/header-logo.svg'); ?>"
+        alt="Somos Infinitos">
+    </a>
+
+    <nav>
+      <ul class="pages-list">
+        <li>
+          <a href="#">Livros</a>
+        </li>
+        <li>
+          <a href="#">Book Club</a>
+        </li>
+        <li>
+          <a href="#">Mentoria</a>
+        </li>
+        <li>
+          <a href="#">Podcast</a>
+        </li>
+      </ul>
+    </nav>
+
+    <nav class="action-buttons">
+      <a href="#">
+        <img src="<?= get_theme_file_uri('/assets/images/profile-button.svg'); ?>">
+      </a>
+      <a class="join-us-cta btn" href="">Junta-te a nós</a>
+    </nav>
+  </header>
+  <?php wp_footer(); ?>
+</body>
+
+</html>
\ No newline at end of file