eliminating VW

Ecell-NITS · Jan 10, 2025 · f0416c8 · f0416c8
1 parent 55d6b46
commit f0416c8
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 17 deletions.
diff --git a/src/app/(pages)/page.js b/src/app/(pages)/page.js
@@ -28,7 +28,7 @@ export default function Home() {
         >
           Valuing Today, Shaping Tomorrow
         </h1>
-        <Button href="/">Get Started</Button>
+        <Button href="/pricing">Get Started</Button>
       </div>
       <section className="md:mt-[6rem] mt-10  flex flex-col items-center">
         <h1
@@ -55,7 +55,7 @@ export default function Home() {
                   {item.title}
                 </h1>
                 <p
-                  className="lg:text-2xl md:text-[1rem] text-[0.5rem] lg:leading-none md:leading-5 leading-[0.6rem] text-start"
+                  className="lg:text-2xl md:text-[1rem] text-[0.6rem] lg:leading-none md:leading-5 leading-[0.6rem] text-start"
                   style={{ fontFamily: "Sofia Pro UltraLight" }}
                 >
                   {item.content}

diff --git a/src/app/components/Button.tsx b/src/app/components/Button.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Button({ children, href }) {
   return (
-    <div className="md:mt-[3rem] mt-4 p-[2px] py-[2px] rounded-full flex items-center justify-center bg-[#F2B263] hover:bg-gradient-to-r hover:from-white to-[#F2B263] duration-300">
+    <div className="btn md:mt-[3rem] mt-4 p-[3px] py-[2px] rounded-full flex items-center justify-center bg-[#F2B263]">
       <Link
         href={href}
         className="cursor-pointer px-[4vw] py-[1vw] bg-[#14342F] md:text-3xl text-xl text-white rounded-full"

diff --git a/src/app/components/Projects.tsx b/src/app/components/Projects.tsx
@@ -75,7 +75,7 @@ export default function Projects() {
                     {item.title}
                   </h1>
                   <p
-                    className="lg:text-2xl md:text-[1rem] text-[0.5rem] lg:leading-none md:leading-5 leading-[0.6rem] text-start"
+                    className="lg:text-2xl md:text-[1rem] text-[0.6rem] lg:leading-none md:leading-5 leading-[0.6rem] text-start"
                     style={{ fontFamily: "Sofia Pro UltraLight" }}
                   >
                     {item.content}

diff --git a/src/app/components/Slidebox.tsx b/src/app/components/Slidebox.tsx
@@ -33,7 +33,7 @@ export default function SlideBox({ children, side }) {
       className={`w-[80vw] md:aspect-[16/5] aspect-[16/7] bg-angled-gradient rounded-[1rem] p-[2px] opacity-0 md:mt-[5.5rem] md:mb-[3.5rem] mt-[1.75rem] mb-[1.75rem] animate-none text-center text-2xl transition flex items-center justify-between ${side ? "translateX(-100%) flex-row-reverse" : "translateX(100%)"}`}
     >
       <div
-        className={`h-full w-full p-[4vw] bg-white rounded-[1rem] flex items-center justify-between ${side ? "flex-row-reverse" : ""}`}
+        className={`h-full w-full lg::py-48 lg:px-14 md:py-32 md:px-8 py-14 px-4 bg-white rounded-[1rem] flex items-center justify-between ${side ? "flex-row-reverse" : ""}`}
       >
         {children}
       </div>

diff --git a/src/app/components/Testimonial.tsx b/src/app/components/Testimonial.tsx
@@ -153,7 +153,7 @@ export default function Testimonial() {
             >
               <div
                 style={{ aspectRatio: "8/3" }}
-                className="w-[80vw] hidden h-max rounded-3xl p-10 md:flex items-center justify-between bg-[#14342F] text-white text-center border border-[#F2B263] realtive"
+                className="w-[80vw] hidden h-max rounded-3xl p-10 md:flex items-center gap-14 bg-[#14342F] text-white text-center border border-[#F2B263] realtive"
               >
                 <div className="w-[26%] relative">
                   <Image
@@ -163,7 +163,7 @@ export default function Testimonial() {
                     width={300}
                     className="w-full h-auto rounded-xl"
                   ></Image>
-                  <div className="text-white text-2xl mt-5">
+                  <div className="text-white xLarge:text-4xl text-2xl mt-5">
                     <p style={{ fontFamily: "Sofia Pro Regular" }}>
                       {item.user.role}
                     </p>
@@ -172,7 +172,7 @@ export default function Testimonial() {
                     </p>
                   </div>
                 </div>
-                <div className="w-[65%] mt-10 mr-6">
+                <div className="w-[65%] mt-10">
                   <span className="text-[#F2B662] text-8xl flex gap-2 mb-2 relative left-2">
                     <svg
                       width="20"
@@ -200,7 +200,7 @@ export default function Testimonial() {
                     </svg>
                   </span>
                   <p
-                    className="text-white mx-10"
+                    className="text-white mx-10 xLarge:text-2xl"
                     style={{ fontFamily: "Sofia Pro UltraLight" }}
                   >
                     {item.content.split(" ").slice(0, 80).join(" ")}...
@@ -234,26 +234,26 @@ export default function Testimonial() {
                 </div>
               </div>
               <div
-                className={`w-[50vw] md:hidden py-[2vw] h-[80vw] rounded-3xl flex flex-col items-center justify-evenly text-center duration-700 border border-[#F2B263] ${index === selectedIndex ? "bg-[#14342F]" : ""}`}
+                className={`w-[50vw] md:hidden py-[0.6rem] aspect-[5/8] rounded-3xl flex flex-col items-center justify-evenly text-center duration-700 border border-[#F2B263] ${index === selectedIndex ? "bg-[#14342F]" : ""}`}
               >
                 <div>
                   <Image
                     src={item.user.image}
                     alt="batman"
                     height={300}
                     width={300}
-                    className="h-[20vw] w-auto rounded-full"
+                    className="h-auto w-[20vw] rounded-full"
                   ></Image>
                   <p
-                    className="text-white  md:text-black text-[3.6vw]"
+                    className="text-white  md:text-black text-[0.9rem]"
                     style={{ fontFamily: "Sofia Pro Regular" }}
                   >
                     {item.user.name}
                   </p>
                 </div>
-                <div className="w-[70%] mt-[3vw]">
+                <div className="w-[70%] mt-[0.8rem]">
                   <p
-                    className={` text-[2.4vw] duration-700 ${index === selectedIndex ? "text-white" : ""}`}
+                    className={` text-[0.6rem] duration-700 ${index === selectedIndex ? "text-white" : ""}`}
                     style={{ fontFamily: "Sofia Pro UltraLight" }}
                   >
                     {truncateText(item.content, 50)}

diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -4,9 +4,12 @@
 
 body {
   height: 100%;
-  margin: 0; /* Remove any default margin */
-  padding: 0; /* Remove any default padding */
-  overflow-x: hidden; /* Prevent horizontal scrolling */
+  margin: 0;
+  /* Remove any default margin */
+  padding: 0;
+  /* Remove any default padding */
+  overflow-x: hidden;
+  /* Prevent horizontal scrolling */
 }
 
 @font-face {
@@ -125,3 +128,22 @@ body {
     local("Sofia Pro Bold"),
     url("../../public/fonts/Sofia Pro Bold Az.woff") format("woff");
 }
+
+.btn {
+  --c1: #fff;
+  --c2: #fda085;
+  text-transform: uppercase;
+  transition: 1s;
+  background: linear-gradient(
+      90deg,
+      var(--c1, #f6d365),
+      var(--c2, #fda085) 51%,
+      var(--c2, #f6d365)
+    )
+    var(--x, 0) / 200%;
+  --x: 100%;
+}
+
+.btn:hover {
+  --x: 0%;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,6 +6,14 @@ module.exports = {
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
+    screens: {
+      sm: "640px",
+      md: `768px`,
+      lg: `1024px`,
+      xl: `1280px`,
+      "2xl": `1536px`,
+      xLarge: "1920px",
+    },
     extend: {
       colors: {
         gold: "#FAC16A",