Merge pull request #47 from TartejBrothers/Updates

Updated: Showcase

src/components/styles/contact.css

@@ -16,7 +16,7 @@
     rgba(0, 0, 0, 1) 100%
   );
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#230540",endColorstr="#000000",GradientType=1);
-  overflow-y: hidden;
+  overflow-y: clip;
 }
 .contactmain {
   display: flex;

src/components/styles/designs.css

@@ -7,15 +7,15 @@
   justify-content: center;
   gap: 40px;
   padding-inline: 40px;
-  overflow: hidden;
+  overflow: clip;
 }
 
 .designleft,
 .designcenter,
 .designright {
   width: 30%;
   height: 100vh;
-  overflow: hidden;
+  overflow: clip;
   position: relative;
 }
 

src/components/styles/expertisecomponent.css

@@ -37,7 +37,7 @@
 
 .rightexpertise {
   position: relative;
-  overflow: hidden;
+  overflow: clip;
 }
 .rightexpertisetop {
   z-index: 10;

src/components/styles/home.css

@@ -4,7 +4,7 @@
   height: 100vh;
   background-position: center center;
   background-color: #1b052d;
-  overflow: hidden;
+  overflow: clip;
 }
 .navbar {
   background-color: #1f0238;

src/components/styles/showcase.css

@@ -11,9 +11,27 @@
   display: flex;
   font-family: "Inter", sans-serif;
   justify-content: center;
-  overflow-y: hidden;
+  overflow-y: clip;
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0.3;
+    transform: scale(0.2);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes contentfade {
+  from {
+    opacity: 0.1;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .showcasecenter,
 .showcaseright {
   width: 45%;
@@ -27,6 +45,14 @@
 }
 .showcaseright img {
   height: 100%;
+  animation-timeline: view();
+  animation-range-start: 300px;
+  animation-range-end: 550px;
+
+  animation-name: fade-in;
+  animation-fill-mode: both;
+  animation-duration: 100ms;
+  animation-timing-function: linear;
 }
 
 .showcasecenter {
@@ -42,6 +68,13 @@
 }
 .showcasecentercontent {
   width: 90%;
+  animation-timeline: view();
+  animation-range-start: 300px;
+  animation-range-end: 550px;
+
+  animation-name: contentfade;
+  animation-fill-mode: both;
+  animation-duration: 100ms;
 }
 .showcaseright {
   justify-content: center;
@@ -52,6 +85,12 @@
   font-weight: 600;
   color: #ffffff;
   margin-bottom: 10px;
+  animation-timeline: view();
+  animation-range-start: 300px;
+  animation-range-end: 550px;
+
+  animation-name: contentfade;
+  animation-fill-mode: both;
 }
 .showcaseleft {
   display: flex;
@@ -60,19 +99,33 @@
   margin-left: 30px;
   overflow: visible;
   position: relative;
+  animation-timeline: view();
+  animation-range-start: 300px;
+  animation-range-end: 550px;
+
+  animation-name: fade-in;
+  animation-fill-mode: both;
+  animation-duration: 100ms;
 }
 .showcaseline {
   width: 2px;
   height: calc(100% - 84px);
   background-color: #ffffff;
   position: absolute;
-  overflow: hidden;
+  overflow: clip;
   top: 40px;
 }
 .showcasecircle {
   position: absolute;
   bottom: 37px;
   left: -4px;
+  animation-timeline: view();
+  animation-range-start: 300px;
+  animation-range-end: 550px;
+
+  animation-name: fade-in;
+  animation-fill-mode: both;
+  animation-duration: 100ms;
 }
 
 .showcasecenterspeaker {
@@ -111,6 +164,7 @@
 .showcasemobile .showcasecentercontent {
   width: 100%;
 }
+
 @media screen and (max-width: 1000px) {
   .showcasedesktop {
     display: none;

src/components/styles/style.css

@@ -5,7 +5,7 @@
   padding: 0;
   color: #ffffff;
   font-family: "Montserrat", sans-serif;
-  overflow-x: hidden;
+  overflow-x: clip;
 }
 *::-webkit-scrollbar {
   display: none;

src/components/styles/testimonial.css

@@ -81,7 +81,7 @@
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 640px;
-  overflow-x: hidden;
+  overflow-x: clip;
   overflow-y: visible;
   padding: 10px;
   gap: 40px;

src/index.css

@@ -14,3 +14,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.App {
+  background-color: #111110;
+}