fix design

Ecell-NITS · Jan 9, 2025 · 55d6b46 · 55d6b46
1 parent 5304d48
commit 55d6b46
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 38 deletions.
diff --git a/src/app/(pages)/page.js b/src/app/(pages)/page.js
@@ -12,7 +12,7 @@ export const metadata = {
 export default function Home() {
   return (
     <main className="bg-white w-screen min-h-screen flex flex-col items-center pb-16">
-      <div className="w-[70vw] h-[39vw] rounded-lg md:rounded-3xl mt-[6.75rem]">
+      <div className="w-[70vw] rounded-lg md:rounded-3xl mt-[6.75rem]">
         <video
           controls
           loop
@@ -21,18 +21,18 @@ export default function Home() {
           <source src="/aot.mp4" type="video/mp4" />
         </video>
       </div>
-      <div className="flex flex-col items-center justify-center mt-[2.5vw]">
+      <div className="flex flex-col items-center justify-center md:mt-[2.5rem] mt-[1.5rem]">
         <h1
-          className="text-4xl text-center md:text-5xl text-gray-800"
+          className="text-4xl text-center md:text-6xl text-gray-800"
           style={{ fontFamily: "Sofia Pro Medium" }}
         >
           Valuing Today, Shaping Tomorrow
         </h1>
         <Button href="/">Get Started</Button>
       </div>
-      <section className="mt-[6vw]  flex flex-col items-center">
+      <section className="md:mt-[6rem] mt-10  flex flex-col items-center">
         <h1
-          className="text-[6vw] md:text-[4vw] text-gray-800"
+          className="text-4xl md:text-6xl text-gray-800"
           style={{ fontFamily: "Sofia Pro Medium" }}
         >
           Our Areas of Expertise
@@ -45,17 +45,17 @@ export default function Home() {
                 alt="distribution"
                 width={350}
                 height={350}
-                className="h-[20vw] w-auto"
+                className="h-auto w-[20vw]"
               />
               <div className="mx-0 w-[65%]">
                 <h1
-                  className="text-[3.6vw] text-[#F2B263] text-start leading-[4.2vw]"
-                  style={{ fontFamily: "Sofia Pro Light" }}
+                  className="lg:text-5xl md:text-3xl text-lg md:leading-none leading-4  text-[#1E3432] text-start mb-4"
+                  style={{ fontFamily: "Sofia Pro Regular" }}
                 >
                   {item.title}
                 </h1>
                 <p
-                  className="text-start text-[2.4vw] md:text-[1.8vw] mt-[1vw] leading-[2.6vw] md:leading-[2vw]"
+                  className="lg:text-2xl md:text-[1rem] text-[0.5rem] lg:leading-none md:leading-5 leading-[0.6rem] text-start"
                   style={{ fontFamily: "Sofia Pro UltraLight" }}
                 >
                   {item.content}
@@ -65,18 +65,18 @@ export default function Home() {
           );
         })}
       </section>
-      <section className="mt-[6vw] flex flex-col items-center">
+      <section className="md:mt-[6rem] mt-10 flex flex-col items-center">
         <h1
-          className="text-[6vw] md:text-[4vw] text-gray-800"
+          className="text-4xl text-center md:text-6xl text-gray-800"
           style={{ fontFamily: "Sofia Pro Medium" }}
         >
           Why Us?
         </h1>
         <Testimonial />
       </section>
-      <section className="mt-[8vw] flex flex-col items-center">
+      <section className="md:mt-[6rem] mt-10 flex flex-col items-center">
         <h1
-          className="text-[6vw] md:text-[4vw] text-gray-800"
+          className="text-4xl text-center md:text-6xl text-gray-800"
           style={{ fontFamily: "Sofia Pro Medium" }}
         >
           Projects

diff --git a/src/app/components/Button.tsx b/src/app/components/Button.tsx
@@ -2,10 +2,10 @@ import Link from "next/link";
 
 export default function Button({ children, href }) {
   return (
-    <div className="mt-[3vw] 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="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">
       <Link
         href={href}
-        className="cursor-pointer px-[4vw] py-[1vw] bg-[#14342F] text-[3vw] md:text-[2vw] text-white rounded-full"
+        className="cursor-pointer px-[4vw] py-[1vw] bg-[#14342F] md:text-3xl text-xl text-white rounded-full"
       >
         <p className="select-none" style={{ fontFamily: "Sofia Pro Medium" }}>
           {children}

diff --git a/src/app/components/Projects.tsx b/src/app/components/Projects.tsx
@@ -47,7 +47,7 @@ export default function Projects() {
   const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]);
   return (
     <section>
-      <div className="mt-12 w-screen overflow-hidden" ref={emblaRef}>
+      <div className="md:mt-12 mt-6 w-screen overflow-hidden" ref={emblaRef}>
         <div className="flex">
           {testData.map((item, index) => (
             <div
@@ -64,19 +64,19 @@ export default function Projects() {
                     alt="project"
                     height={300}
                     width={300}
-                    className="h-[20vw] w-auto "
+                    className="h-auto w-[20vw] "
                   ></Image>
                 </div>
                 <div className="w-[65%] ml-4">
-                  <p
-                    className="text-[3.6vw] text-[#1E3432] text-start leading-[4.2vw] tracking-wide"
+                  <h1
+                    className="lg:text-5xl md:text-3xl text-lg md:leading-none leading-4  text-[#1E3432] text-start mb-4"
                     style={{ fontFamily: "Sofia Pro Regular" }}
                   >
                     {item.title}
-                  </p>
+                  </h1>
                   <p
-                    className="text-start text-[2.4vw] md:text-[1.8vw] mt-[1vw] leading-[2.6vw] md:leading-[2vw] tracking-wide"
-                    style={{ fontFamily: "Sofia Pro ExtraLight" }}
+                    className="lg:text-2xl md:text-[1rem] text-[0.5rem] lg:leading-none md:leading-5 leading-[0.6rem] text-start"
+                    style={{ fontFamily: "Sofia Pro UltraLight" }}
                   >
                     {item.content}
                   </p>

diff --git a/src/app/components/Slidebox.tsx b/src/app/components/Slidebox.tsx
@@ -30,10 +30,10 @@ export default function SlideBox({ children, side }) {
   return (
     <div
       ref={ref}
-      className={`w-[80vw] h-[35vw] md:h-[25vw] bg-angled-gradient rounded-[1.5vw] p-[2px] opacity-0 mt-[5.5vw] mb-[3.5vw] animate-none text-center text-2xl transition flex items-center justify-between ${side ? "translateX(-100%) flex-row-reverse" : "translateX(100%)"}`}
+      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-[1.5vw] flex items-center justify-between ${side ? "flex-row-reverse" : ""}`}
+        className={`h-full w-full p-[4vw] 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
@@ -55,6 +55,7 @@ const testData = [
     user: {
       userId: 1,
       name: "Batman",
+      role: "CEO at Doe",
       image:
         "https://4kwallpapers.com/images/wallpapers/batman-dc-superheroes-dc-comics-cosplay-2048x2048-954.jpg",
     },
@@ -65,6 +66,7 @@ const testData = [
     user: {
       userId: 2,
       name: "Batman",
+      role: "CEO at Doe",
       image:
         "https://4kwallpapers.com/images/wallpapers/batman-dc-superheroes-dc-comics-cosplay-2048x2048-954.jpg",
     },
@@ -75,6 +77,7 @@ const testData = [
     user: {
       userId: 3,
       name: "Batman",
+      role: "CEO at Doe",
       image:
         "https://4kwallpapers.com/images/wallpapers/batman-dc-superheroes-dc-comics-cosplay-2048x2048-954.jpg",
     },
@@ -85,6 +88,7 @@ const testData = [
     user: {
       userId: 4,
       name: "Batman",
+      role: "CEO at Doe",
       image:
         "https://4kwallpapers.com/images/wallpapers/batman-dc-superheroes-dc-comics-cosplay-2048x2048-954.jpg",
     },
@@ -95,6 +99,7 @@ const testData = [
     user: {
       userId: 5,
       name: "Batman",
+      role: "CEO at Doe",
       image:
         "https://4kwallpapers.com/images/wallpapers/batman-dc-superheroes-dc-comics-cosplay-2048x2048-954.jpg",
     },
@@ -105,6 +110,7 @@ const testData = [
     user: {
       userId: 6,
       name: "Batman",
+      role: "CEO at Doe",
       image:
         "https://4kwallpapers.com/images/wallpapers/batman-dc-superheroes-dc-comics-cosplay-2048x2048-954.jpg",
     },
@@ -115,6 +121,7 @@ const testData = [
     user: {
       userId: 7,
       name: "Batman",
+      role: "CEO at Doe",
       image:
         "https://4kwallpapers.com/images/wallpapers/batman-dc-superheroes-dc-comics-cosplay-2048x2048-954.jpg",
     },
@@ -144,24 +151,29 @@ export default function Testimonial() {
               className="min-w-0 flex-[0_0_60vw] md:flex-[0_0_100%] flex justify-center"
               key={item.user.userId}
             >
-              <div className="w-[80vw] hidden mx-[10vw] p-10 h-max rounded-3xl md:flex items-center justify-evenly bg-[#14342F] text-white text-center border border-[#F2B263]">
-                <div>
+              <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"
+              >
+                <div className="w-[26%] relative">
                   <Image
                     src={item.user.image}
                     alt="batman"
                     height={300}
                     width={300}
-                    className="h-[15vw] w-auto rounded-xl"
+                    className="w-full h-auto rounded-xl"
                   ></Image>
-                  <p
-                    className="text-white text-4xl mt-5"
-                    style={{ fontFamily: "Sofia Pro Regular" }}
-                  >
-                    {item.user.name}
-                  </p>
+                  <div className="text-white text-2xl mt-5">
+                    <p style={{ fontFamily: "Sofia Pro Regular" }}>
+                      {item.user.role}
+                    </p>
+                    <p style={{ fontFamily: "Sofia Pro Light" }}>
+                      {item.user.name}
+                    </p>
+                  </div>
                 </div>
-                <div className="w-[60%] max-h-[30vw] mt-10 flex">
-                  <span className="text-[#F2B662] text-8xl relative font-serif bottom-4 right-4 flex gap-2">
+                <div className="w-[65%] mt-10 mr-6">
+                  <span className="text-[#F2B662] text-8xl flex gap-2 mb-2 relative left-2">
                     <svg
                       width="20"
                       height="36"
@@ -188,12 +200,12 @@ export default function Testimonial() {
                     </svg>
                   </span>
                   <p
-                    className="text-white text-[1.2vw]"
+                    className="text-white mx-10"
                     style={{ fontFamily: "Sofia Pro UltraLight" }}
                   >
-                    {item.content.split(" ").slice(0, 55).join(" ")}...
+                    {item.content.split(" ").slice(0, 80).join(" ")}...
                   </p>
-                  <span className="text-[#F2B662] text-8xl relative font-serif top-44 flex gap-2 transform scale-x-[-1]">
+                  <span className="text-[#F2B662] text-8xl font-serif flex gap-2 transform scale-x-[-1]">
                     <svg
                       width="20"
                       height="36"