SR-002: Responsive styling

Made the services section responsive. Fixed some text as well and changed the border color under each service.

src/pages/index.tsx

@@ -4,6 +4,10 @@ import Web from "../../public/icons/web.svg";
 import Mobile from "../../public/icons/mobile.svg";
 // import Design from "../../public/icons/design.svg";
 
+interface BorderProps {
+  color: string;
+}
+
 const Home: NextPage = () => {
   return (
     <>
@@ -43,7 +47,7 @@ const Services = () => {
     {
       id: 1,
       icon: "web.svg",
-      borderColor: "#F4A261",
+      borderColor: "border-[#F4A261]",
       title: "Websites",
       description:
         "Fast. Responsive. Accessible. We specialize in building high-performing websites without leaving any users behind. ",
@@ -51,7 +55,7 @@ const Services = () => {
     {
       id: 2,
       icon: "mobile.svg",
-      borderColor: "#2A9D8F",
+      borderColor: "border-[#2A9D8F]",
       title: "Mobile Apps",
       description:
         "We build cross-platform mobile apps. Lorem ipsum dolor sit amet consectetur adipiscing elit.",
@@ -59,7 +63,7 @@ const Services = () => {
     {
       id: 3,
       icon: "design.svg",
-      borderColor: "#E76F51",
+      borderColor: "border-[#E76F51]",
       title: "UI/UX Design",
       description:
         "First impressions matter. We know how to craft unique and impressive digital experiences.",
@@ -69,18 +73,20 @@ const Services = () => {
   return (
     <div className="container mx-auto my-10">
       <div>
-        <h2 className="text-[40px] font-extrabold">What we can do for you</h2>
+        <h2 className="text-center text-[32px] font-extrabold sm:text-left sm:text-[40px]">
+          What we can do for you
+        </h2>
       </div>
       <div className="flex flex-col sm:flex-col md:flex-row">
         {Services.map((data) => (
           <div
             key={data.id}
-            className="my-2 flex  w-1/3 flex-col items-center justify-start"
+            className="my-2 flex w-full flex-col items-center justify-start sm:w-1/3"
           >
             <img src={`icons/${data.icon}`} alt="service-icon" />
             <h3 className="text-[32px] font-semibold">{data.title}</h3>
-            <div className={`my-5 w-3/4 border-2 border-[#000]`} />
-            <p className="w-1/2 text-center text-[20px]">{data.description}</p>
+            <div className={`my-5 w-3/4 border-2 ${data.borderColor}`} />
+            <p className="w-3/4 text-center text-[20px] ">{data.description}</p>
           </div>
         ))}
       </div>
@@ -90,5 +96,3 @@ const Services = () => {
 // const Projects = () => {}
 // const About = () => {}
 // const Contact = () => {}
-
-// const Service: React.FC = () => {}