core: added home page

1 files changed, 467 insertions, 0 deletions

diff --git a/app/styles.css b/app/styles.css
new file mode 100644
index 0000000..df2ad4f
--- /dev/null
+++ b/app/styles.css
@@ -0,0 +1,467 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+	.text-balance {
+		text-wrap: balance;
+	}
+}
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+		--primary: 0 0% 9%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+		--ring: 0 0% 3.9%;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+		--radius: 0.5rem;
+		--topBarHeight: 5em;
+		--neon-bg-color: #05010d;
+		--dark-background: 260 86% 3%;
+		--dark-foreground: 0 0% 98%;
+		--dark-card: 0 0% 3.9%;
+		--dark-card-foreground: 0 0% 98%;
+		--dark-popover: 0 0% 3.9%;
+		--dark-popover-foreground: 0 0% 98%;
+		--dark-primary: 0 0% 98%;
+		--dark-primary-foreground: 0 0% 9%;
+		--dark-secondary: 0 0% 14.9%;
+		--dark-secondary-foreground: 0 0% 98%;
+		--dark-muted: 0 0% 14.9%;
+		--dark-muted-foreground: 0 0% 63.9%;
+		--dark-accent: 0 0% 14.9%;
+		--dark-accent-foreground: 0 0% 98%;
+		--dark-destructive: 0 62.8% 30.6%;
+		--dark-destructive-foreground: 0 0% 98%;
+		--dark-border: 0 0% 14.9%;
+		--dark-input: 0 0% 14.9%;
+		--dark-ring: 0 0% 83.1%;
+		--dark-chart-1: 220 70% 50%;
+		--dark-chart-2: 160 60% 45%;
+		--dark-chart-3: 30 80% 55%;
+		--dark-chart-4: 280 65% 60%;
+		--dark-chart-5: 340 75% 55%;
+		--shadow-color: black;
+	}
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+
+
+/* page setup ============================================= */
+
+* {
+    padding: 0;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    font-smooth: antialiased;
+}
+
+@media (pointer:none), (pointer:coarse) {
+    * {
+        transition: all .3s;
+    }
+}
+
+body {
+    top: 0;
+    left: 0;
+    transition: background 1s ease-in-out;
+}
+
+body::-webkit-scrollbar {
+    display: none;
+}
+
+/* animation ============================================== */
+
+@keyframes slideInTop {
+    from {
+        transform: translateY(-300px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0px);
+    }
+    40% {
+        transform: translateY(30px);
+    }
+    80% {
+        transform: translateY(-15px);
+    }
+}
+
+@keyframes zoomIn {
+    0% {
+        scale: 0.01;
+    }
+    65% {
+        scale: 1.05;
+    }
+    100% {
+        scale: 1;
+        position: relative;
+    }
+}
+
+@keyframes zoomOut {
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(0.01);
+    }
+}
+
+@keyframes fadeZoomIn {
+    from {
+        opacity: 0.35;
+        scale: 1.15;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes reveal {
+    from {
+        -webkit-filter: blur(32px);
+        -moz-filter: blur(32px);
+        -o-filter: blur(32px);
+        -ms-filter: blur(32px);
+        filter: blur(32px);
+        -webkit-backdrop-filter: blur(32px);
+        backdrop-filter: blur(32px);
+        transform: scale(2);
+    }
+}
+
+@keyframes shake {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(.5deg); }
+    50% { transform: rotate(0eg); }
+    75% { transform: rotate(-.5deg); }
+    100% { transform: rotate(0deg); }
+}
+
+@keyframes background-pan {
+    from {
+        background-position: 0% center;
+    }
+    to {
+        background-position: -200% center;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        scale: 0.8;
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+
+    }
+    to {
+        opacity: 0;
+        scale: 0.8
+    }
+}
+
+@keyframes scroll {
+    from {
+        opacity: 0.8;
+        scale: 0.75;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes rotate {
+    from {
+        rotate: 0deg;
+    }
+    
+    50% {
+        scale: 1 1.25;
+    }
+    
+    to {
+        rotate: 360deg;
+    }
+}
+
+@keyframes minimize {
+    from {
+        scale: 1;
+        opacity: 1;
+    }
+    to {
+        scale: 0;
+        opacity: 0;
+    }
+}
+
+
+/* animation: name duration timing-function delay iteration-count direction fill-mode; */
+
+
+/* animate class */
+.animate {
+    -webkit-animation-duration: 0.5s;
+    animation-duration: 0.5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.animate.animate--infinite {
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+}
+
+.animate.animation--delay-1s {
+    -webkit-animation-delay: 1s;
+    animation-delay: 1s;
+}
+.animate.animation--delay-p5s {
+    -webkit-animation-duration: 0.5s;
+    animation-duration: 0.5s;
+    animation-delay: 0.5s;
+}
+
+.animate.animation--delay-p3s {
+    -webkit-animation-duration: 0.3s;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+}
+
+.animate.animation--fast {
+    -webkit-animation-duration: 0.3s;
+    animation-duration: 0.3s;
+}
+
+.animate.animation--slow {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+}
+
+/* real utility classes */
+
+.animate.slideInTop {
+    animation-name: slideInTop;
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+}
+
+.animate.bounce {
+    -webkit-animation-name: bounce;
+    animation-name: bounce;
+}
+
+.animate.zoomIn {
+    -webkit-transition-timing-function: linear;
+    transition-timing-function: linear;
+    -webkit-animation-name: reveal;
+    animation-name: zoomIn;
+}
+
+.animate.zoomOut {
+    -webkit-transition-timing-function: linear;
+    transition-timing-function: linear;
+    -webkit-animation-name: zoomOut;
+    animation-name: zoomOut;
+}
+
+.animate.reveal {
+    animation-duration: 500ms;
+    -webkit-transition-timing-function: linear;
+    transition-timing-function: linear;
+    -webkit-animation-name: reveal;
+    animation-name: reveal;
+}
+
+.animate.shake {
+    -webkit-animation-name: shake;
+    animation-name: shake;
+}
+
+.animate.fadeIn {
+    -webkit-animation-name: fadeIn;
+    animation-name: fadeIn;
+}
+
+.animate.fadeOut {
+    -webkit-animation-name: fadeOut;
+    animation-name: fadeOut;
+}
+
+.animate.fadeZoomIn {
+    -webkit-animation-name: fadeZoomIn;
+    animation-name: fadeZoomIn;
+}
+
+.aniamte.persist {
+    animation-fill-mode: forwards;
+}
+
+/* transition */
+/* * {
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s; 
+} */
+
+@media (prefers-reduced-motion: no-preference) {
+    :has(:target) {
+        scroll-behavior: smooth;
+    }
+}
+
+:has(:target) {
+	scroll-padding-top: var(--topBarHeight);
+}
+
+
+.js-tilt-glare {
+    border-radius: 18px;
+    overflow: hidden;
+}
+
+/* other ================================================== */
+
+/* a {
+    outline: 3px solid currentColor;
+    outline-offset: -6px;
+} */
+
+a:hover, Button:hover {
+    font-weight: bold;
+    text-decoration: underline;
+    text-decoration-thickness: 3px;
+    -webkit-text-decoration-line: underline;
+    text-decoration-line: underline;
+    cursor: pointer;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
+    text-underline-offset: 1px;
+    position: relative;
+    height: 100%;
+    /* font-size: 5mm; */
+    text-transform: capitalize;
+    text-align: center;
+    /* start */
+    margin-left: 5mm;
+    margin-right: 5mm;
+    padding-top: 3mm;
+    padding-bottom: 3mm;
+    /* end
+    these lines will make it more appearence and jigully when hovered */
+    font-weight: bold;
+    -webkit-transition: all .5s;
+    transition: all .5s;
+    /* border-radius: 8px; */
+    /* color: #F4E8C1; */
+}
+
+a:active, Button:active {
+    transform: scale(0.9);
+}
+
+.blob {
+    min-height: 75%;
+    min-width: 75%;
+    /* aspect-ratio: 1; */
+    background-color: #fff;
+    background: -webkit-gradient(linear, left top, right top, from(#00FFFF), to(mediumpurple));
+    background: linear-gradient(90deg,#0ff,#9370db);
+    border-radius: 50%;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    filter: blur(7vmax);
+    -webkit-filter: blur(7vmax);
+    height: 15vmax;
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    translate: -50% -50%;
+    width: 20vmax;
+    z-index: 0;
+    animation-fill-mode: forwards;
+}
+
+
+.sblob {
+    background-color: white;
+    height: 15vmax;
+    width: 20vmax;
+    aspect-ratio: 1;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    translate: -50% -50%;
+    border-radius: 50%;
+    background: conic-gradient(#00FFFF, mediumpurple);
+    animation: rotate 20s infinite;
+    opacity: 0.8;
+    filter: blur(7vmax);
+    -webkit-filter: blur(7vmax);
+    z-index: -1;
+}
+
+
+html.is-changing .openlink {
+    transition: all 0.5s;
+}
+
+html.is-animating .openlink {
+    /* transform: scale(1000);
+    transition: transform 100s; */
+    transition: all 0.5s;
+    height: 100%;
+    width: 100%;
+    transition-timing-function: ease-out;
+}