improved the cards, started adding Content.astro

src/components/SubmitPreFooter.astro

@@ -0,0 +1,54 @@
+---
+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>

src/components/ui/Card.astro

@@ -1,18 +1,8 @@
 ---
 const {label, title, func, src, href} = Astro.props;
-import { Image } from 'astro:assets'
+import { Image } from 'astro:assets';
 ---
 
-<script>
-   const card = document.getElementById('cardContainer');
-
-   let gradient = 'linear-gradient(#'+{colorHex}+' 25%, #060525 75%);'
-
-   card.style.background = gradient;
-   console.log(gradient);
-
-</script>
-
 <div class="item" aria-label={label} id="cardContainer">
    <div class="tagsList">
 
@@ -23,7 +13,7 @@ import { Image } from 'astro:assets'
 
     <div class="imgCard">
 
-           <Image src={src} alt="Alt text"/>
+           <Image src={src} width="50px" height="50px" alt="Alt text"/>
 
    </div>
    <div class="bottomCard">
@@ -77,7 +67,6 @@ import { Image } from 'astro:assets'
    @apply rounded-lg;
 }
 .imgCard img {
-   max-height: 100%;
    object-fit: cover;
    object-position: top;
 }

src/components/ui/cardContent.astro

@@ -0,0 +1,125 @@
+---
+import { Image } from "astro:assets";
+const {title , func, src, href, label} = Astro.props;
+---
+<a class="cardContainer">
+    <div class="cardImage">
+        <div class="cardImageWrap">
+            <Image src={src}
+                   width='500'
+                   height='500'
+                   alt='alt'
+                   aria-description='ariadesc'
+                   aria-label="design"
+                   class="group group-hover:scale-[1.02]"
+            />
+            <div class="cardContext">
+                <div>
+                    <h3>{title}</h3>
+                    <p>{func}</p>
+                </div>
+                <a class="itemLink" href={href} target="_blank">
+                    <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="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" stroke-linecap="round"
+                              stroke-linejoin="round"></path>
+                    </svg>
+                </a>
+            </div>
+            <div class="cardContext cardTag">
+                    <small>{label}</small>
+            </div>
+        </div>
+    </div>
+</a>
+
+
+<style>
+    * {
+    }
+
+    .cardContainer {
+        max-width: 325px;
+        justify-content: space-between;
+        overflow: clip;
+    }
+
+    img {
+        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.85)), to(rgba(0, 0, 0, 0)));
+        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 90%);
+        @apply rounded-tr-lg;
+        @apply rounded-tl-lg;
+    }
+
+    .cardImageWrap {
+        position: relative;
+        top: 0;
+        background-color: #08082f;
+        @apply rounded-xl;
+    }
+
+    .cardContext {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        padding: 0.75rem 1rem;
+        color: white;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .cardTag {
+        top: 0;
+        bottom: auto;
+    }
+    small {
+        font-size: 0.6rem !important;
+        font-weight: 600;
+        color: #f0f1f2;
+        @apply px-2;
+        @apply py-1;
+        border: solid 1px rgba(240, 241, 242, 0.5);
+        @apply rounded-full;
+        background-color: rgba(109, 131, 182, 0.75);
+        backdrop-filter: blur(2px);
+    }
+
+    .itemLink {
+        height: 2.5rem;
+        aspect-ratio: 1;
+
+        display: grid;
+        place-items: center;
+        @apply transition-all;
+        @apply rounded-lg;
+        border: 1px solid rgba(240, 241, 242, 0.25);
+        opacity: 0;
+    }
+    .cardImageWrap:hover .itemLink {
+        opacity: 0.7;
+    }
+
+    .itemLink:hover {
+        opacity: 1 !important;
+        background-color: #f0f1f2;
+        color: #060525;
+
+    }
+
+    .itemLink svg {
+        height: 1.75rem;
+
+    }
+
+    p {
+        font-size: 0.75rem !important;
+        opacity: 0.7;
+    }
+
+    h3 {
+        font-size: 1rem !important;
+        font-weight: 500;
+    }
+</style>

src/pages/index.astro

@@ -6,12 +6,16 @@ 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";
 ---
 
 <Layout title="Welcome to Astro.">
 	<main>
 		<MainHeader/>
 		<Hero/>
 		<Content />
+		<SubmitPreFooter />
+		<MainFooter />
 	</main>
 </Layout>