diff --git a/src/components/Content.astro b/src/components/Content.astro
index 2004686..805944e 100644
--- a/src/components/Content.astro
+++ b/src/components/Content.astro
@@ -16,6 +16,7 @@ import Card from "./ui/Card.astro";
import Figma from '../assets/figma.png';
import CardContent from "./ui/cardContent.astro";
+import CardSubmit from "./ui/cardSubmit.astro";
---
<!--TODO: FIGURE OUT BETTER WAY TO DO THE IMAGES!-->
<script>
@@ -193,7 +194,7 @@ import CardContent from "./ui/cardContent.astro";
<!--News-->
<div class="item show news">
<p class="labelText">NEWS</p>
- <CardContent label="NEWSLETTER" title="Webflow Blog" func="Web Design Blog"
+ <CardContent label="NEWS" title="Webflow Blog" func="Web Design Blog"
src={WebflowBlog}
href="https://webflow.com/blog/?ref=repo.cheddzy.com"/>
</div>
@@ -257,6 +258,10 @@ import CardContent from "./ui/cardContent.astro";
src={ui8}
href="https://ui8.net/?ref=repo.cheddzy.com"/>
</div>
+
+ </div>
+ <div class="show other">
+ <CardSubmit />
</div>
</section>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 229b8cb..a2adf5a 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -70,4 +70,10 @@ import LogInButton from "./buttons/LogInButton.astro";
color: #6F737A;
}
+ @media screen and (max-width: 768px) {
+ h1 {
+ font-size: 3rem !important;
+ }
+ }
+
</style>
\ No newline at end of file
diff --git a/src/components/MainFooter.astro b/src/components/MainFooter.astro
index c514bc5..3c2b910 100644
--- a/src/components/MainFooter.astro
+++ b/src/components/MainFooter.astro
@@ -6,7 +6,27 @@
<footer>
+<small>
+ Developed by <a href="https://cheddzy.com/">Shachar MW</a> © 2024
+</small>
+</footer>
-</footer>
\ No newline at end of file
+
+<style>
+
+ footer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 8rem;
+ background-color: #1E1F22;
+ color: #96aee0;
+ }
+ a {
+ text-decoration: underline;
+ text-decoration-color: #3574F0;
+ }
+
+</style>
\ No newline at end of file
diff --git a/src/components/MainHeader.astro b/src/components/MainHeader.astro
index 09f85ab..5d6f6ad 100644
--- a/src/components/MainHeader.astro
+++ b/src/components/MainHeader.astro
@@ -1,32 +1,80 @@
---
-
import ActionButton from "./buttons/ActionButton.astro";
import GenericButton from "./buttons/GenericButton.astro";
import HeaderAlert from "./HeaderAlert.astro";
+import SubmitButton from "./buttons/SubmitButton.astro";
---
+<script>
+ const markEmpty = document.getElementById('bookmarkEmpty');
+ const markFilled = document.getElementById('bookmarkFilled');
+
+ switch (localStorage.getItem('bookmark')) {
+ case 'empty':
+ makeEmpty();
+ break;
+ case 'filled':
+ setTimeout(function() {
+ makeFilled();
+ }, 100)
+ break;
+ default:
+ makeEmpty();
+ localStorage.setItem('bookmark', 'empty')
+ break;
+ }
+
+
+ function makeEmpty() {
+ markEmpty.style.display = 'block';
+ markFilled.style.display = 'none';
+ }
+
+ function makeFilled() {
+ markFilled.style.display = 'block';
+ markEmpty.style.display = 'none';
+ }
+
+ markEmpty.addEventListener('click', () => {
+ makeFilled()
+ localStorage.setItem('bookmark', 'filled')
+ })
+ markFilled.addEventListener('click', () => {
+ makeEmpty()
+ localStorage.setItem('bookmark', 'empty')
+ })
+
+</script>
<header>
<div>
<h1>
- <svg data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
- <path d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" stroke-linecap="round" stroke-linejoin="round"></path>
+ <svg id="bookmarkEmpty" data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5"
+ stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
+ stroke-linecap="round" stroke-linejoin="round"></path>
+ </svg>
+ <svg id="bookmarkFilled" class="hide" data-slot="icon" aria-hidden="true" fill="#3574F0" viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg">
+ <path clip-rule="evenodd"
+ d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z"
+ fill-rule="evenodd"></path>
</svg>
the design repo
</h1>
<div class="menu">
<ActionButton
- buttonText='Submit your own!'
- href="/"
- target="_blank"
- label='Aria Label2'
+ buttonText='Submit resources'
+ href="/"
+ label='Aria Label2'
+ target="_blank"
/>
</div>
</div>
</header>
-<HeaderAlert />
+<HeaderAlert/>
<style>
@@ -34,6 +82,7 @@ import HeaderAlert from "./HeaderAlert.astro";
.headerWrap {
display: flex;
}
+
.menu {
display: flex;
flex-direction: row;
@@ -41,6 +90,10 @@ import HeaderAlert from "./HeaderAlert.astro";
gap: 0.5rem;
}
+ .hide {
+ display: none;
+ }
+
header :has(h1) {
display: flex;
flex-direction: row;
@@ -48,15 +101,28 @@ import HeaderAlert from "./HeaderAlert.astro";
align-items: center;
padding: 1.5rem 0 0 0;
}
+
h1 {
- font-size: 1rem !important;
display: flex;
flex-direction: row;
gap: 0.5rem;
align-items: center;
+ font-size: 1rem !important;
+ }
+
+ #bookmarkFilled {
+ animation: filledBookmark 200ms 1 ease-in-out;
}
+ @keyframes filledBookmark {
+ 0% {scale: 0.5;}
+ 80% {scale: 1.2;}
+ 100% {scale: 1;}
+ }
+
svg {
height: 1.2rem;
+ color: #3574F0;
+ cursor: pointer;
}
header {
diff --git a/src/components/SubmitPreFooter.astro b/src/components/SubmitPreFooter.astro
deleted file mode 100644
index 26004fc..0000000
--- a/src/components/SubmitPreFooter.astro
+++ /dev/null
@@ -1,54 +0,0 @@
----
-import '../styles/styles.scss';
-import '../styles/globals.scss';
----
-
-<section>
- <h1>
- the design repo
- </h1>
- <h4>End-all-be-all bookmark repository for designers</h4>
-
-
-</section>
-
-
-<style>
-
- section {
- margin: 0 auto;
- max-width: 1200px;
- display: flex;
- height: 24rem;
- flex-direction: column;
- gap: 1rem;
- justify-content: center;
- align-items: center;
- }
- #IconWrap {
- aspect-ratio: 1;
- @apply rounded-full;
- padding: 1rem;
- border: solid 1px #3574F0;
- background-color: rgba(62, 96, 238, 0.1);
- }
- #signIn {
- display: flex;
- flex-direction: row;
- gap: 1rem;
- align-items: center;
- }
- svg {
- height: 2rem;
- color: #3574F0;
- }
- h1, h4 {
- font-weight: 800;
- text-align: center;
- }
- h4 {
- font-weight: 600;
- color: #6F737A;
- }
-
-</style>
\ No newline at end of file
diff --git a/src/components/buttons/ActionButton.astro b/src/components/buttons/ActionButton.astro
index 0eeb50a..1d3f65f 100644
--- a/src/components/buttons/ActionButton.astro
+++ b/src/components/buttons/ActionButton.astro
@@ -27,11 +27,14 @@ const { buttonText, href, target, label } = Astro.props;
@apply transition-colors;
@apply duration-100;
+ font-weight: 500;
font-size: 0.9rem;
- border: 1px rgba(87, 90, 102, 0.2) solid;
+ border: 1px rgba(53, 115, 240, 0.25) solid;
}
a:hover {
-
+ background-color: #3574F0;
+ border: #3574F0 1px solid;
+ color: #f0f1f2;
}
</style>
\ No newline at end of file
diff --git a/src/components/buttons/SubmitButton.astro b/src/components/buttons/SubmitButton.astro
new file mode 100644
index 0000000..522835c
--- /dev/null
+++ b/src/components/buttons/SubmitButton.astro
@@ -0,0 +1,59 @@
+---
+
+import '../../styles/styles.scss'
+import '../../styles/globals.scss'
+const { target, label } = Astro.props;
+---
+
+<script>
+ const button = document.getElementById('genericButton')
+
+ button.addEventListener('click', () => {
+
+ })
+</script>
+
+<button id="genericButton" type="button" aria-label={label}>
+ <a href='/' target={target}>
+
+ Submit or Request Resources
+ </a>
+</button>
+
+
+<style>
+
+ button {
+ display: flex;
+ }
+
+ a {
+ @apply px-6;
+ @apply py-3;
+ @apply rounded-full;
+ @apply transition-all;
+ @apply duration-100;
+ color: #F0F1F2;
+ font-size: 1rem;
+ border: 2px #F0F1F2 solid;
+ background: #1E1F22;
+ outline: 2px transparent solid;
+ font-weight: 600;
+
+ }
+ @keyframes border-anim {
+ 0% {outline: 4px rgba(150, 174, 224, 0.25) dotted;}
+ 100% {outline: 2px #96aee0 solid;}
+ }
+
+ a:hover {
+ background: #3574F0;
+ outline: 2px #96aee0 solid;
+ animation: border-anim 0.2s 1 ease-out;
+ }
+ a:active {
+ background: #3574F0;
+ outline: 2px #3574F0 solid;
+ }
+
+</style>
\ No newline at end of file
diff --git a/src/components/ui/cardSubmit.astro b/src/components/ui/cardSubmit.astro
new file mode 100644
index 0000000..79aefdd
--- /dev/null
+++ b/src/components/ui/cardSubmit.astro
@@ -0,0 +1,60 @@
+---
+import { Image } from "astro:assets";
+import ActionButton from "../buttons/ActionButton.astro";
+import SignUpButton from "../buttons/SignUpButton.astro";
+import SubmitButton from "../buttons/SubmitButton.astro";
+const {title, func, src, href, label} = Astro.props;
+---
+<div class="submitContainer">
+ <div>
+ <h3>
+ Don't see what you need?
+ </h3>
+ <p>
+ Submit a resource,
+ or request more of
+ a certain type.
+ </p>
+ </div>
+ <SubmitButton
+ buttonText="Submit Resource"
+ href="mailto:artcheddzy@gmail.com"
+ label="Submit Resource"
+ />
+</div>
+
+
+<style>
+ * {
+ }
+
+ .submitContainer {
+ max-width: 1200px;
+ height: 10rem;
+ text-align: center;
+ overflow: clip;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 2rem;
+ @apply rounded-xl;
+ }
+
+ h3 {
+ font-size: 1.5rem !important;
+ font-weight: 800;
+ }
+
+ p {
+ font-size: 1rem !important;
+ font-weight: 500;
+ }
+ @media screen and (max-width: 768px) {
+ .submitContainer {
+ margin-inline: 10%;
+ }
+ }
+
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a3ddd53..cd0ba53 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,7 +6,6 @@ import '../styles/globals.scss';
import MainHeader from "../components/MainHeader.astro";
import Hero from "../components/Hero.astro";
import Content from "../components/Content.astro";
-import SubmitPreFooter from "../components/SubmitPreFooter.astro";
import MainFooter from "../components/MainFooter.astro";
---
@@ -15,7 +14,6 @@ import MainFooter from "../components/MainFooter.astro";
<MainHeader/>
<Hero/>
<Content />
- <SubmitPreFooter />
<MainFooter />
</main>
</Layout>
\ No newline at end of file