Added space grotesk font improved frontend of home page design and responsiveness

Author: Khagesh2409

src/app/fonts/SpaceGrotesk-Bold.ttf

@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: "Space Grotesk Bold";
+  src: url("./fonts/SpaceGrotesk-Bold.ttf");
+}
+
+@font-face {
+  font-family: "Space Grotesk Light";
+  src: url("./fonts/SpaceGrotesk-Light.ttf");
+}
+
+@font-face {
+  font-family: "Space Grotesk Medium";
+  src: url("./fonts/SpaceGrotesk-Medium.ttf");
+}
+
+@font-face {
+  font-family: "Space Grotesk Regular";
+  src: url("./fonts/SpaceGrotesk-Regular.ttf");
+}
+
+@font-face {
+  font-family: "Space Grotesk Semibold";
+  src: url("./fonts/SpaceGrotesk-SemiBold.ttf");
+}

src/app/fonts/SpaceGrotesk-Light.ttf

@@ -12,16 +12,16 @@ export default function Home() {
     <main className="bg-black p-1">
       <Navbar />
       <Hero />
-      <div className="flex flex-col gap-4 items-center justify-center mt-32">
-        <p className="font-bold text-white text-lg md:text-lg lg:text-5xl">
-          Features
+      <div className="flex flex-col gap-4 items-center justify-center mt-10 md:mt-32 lg:mt-40">
+        <p className="font-spacegrotesksemibold text-white text-2xl md:text-3xl lg:text-5xl">
+          Features of Codehive
         </p>
         <FeaturesSection />
       </div>
       <About />
-      <div className="flex flex-col mt-10">
-        <p className="flex font-bold items-center justify-center text-white text-lg md:text-lg lg:text-5xl">
-          Developers of Codehive
+      <div className="flex flex-col mt-10 md:mt-32 lg:mt-40 items-center justify-center">
+        <p className="font-spacegrotesksemibold text-center text-white text-2xl md:text-3xl lg:text-5xl">
+          Meet the Developers of Codehive
         </p>
         <Aboutus />
       </div>

src/app/fonts/SpaceGrotesk-Medium.ttf

@@ -48,7 +48,7 @@ export const CardContainer = ({
     <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
       <div
         className={cn(
-          "py-20 flex items-center justify-center",
+          "lg:py-20 md:py-10 py-2 flex items-center justify-center",
           containerClassName
         )}
         style={{

src/app/fonts/SpaceGrotesk-Regular.ttf

@@ -8,7 +8,7 @@ import Link from "next/link";
 
 const Aboutus = () => {
   return (
-    <div className="flex flex-col lg:flex-row md:flex-row gap-8 items-center justify-center">
+    <div className="flex flex-col lg:flex-row md:flex-row lg:gap-8 md:gap-8 gap-2 items-center justify-center">
       <CardContainer className="inter-var">
         <CardBody className="bg-black relative group/card border-white/[0.2] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border">
           <CardItem translateZ="50" className="text-xl font-bold text-white">

src/app/fonts/SpaceGrotesk-SemiBold.ttf

@@ -13,23 +13,23 @@ const FeaturesSection = () => {
       description:
         "Codehive offers a real-time collaborative coding playground, enabling seamless teamwork. With support for 5+ programming languages and 20+ color themes, it's designed to cater to diverse developer preferences.",
       image: Feature1,
-      color: "bg-blue-50",
+      color: "bg-black",
     },
     {
       icon: "💡",
       title: "Integrated Communication Tools",
       description:
         "Stay connected with inbuilt video calling and chat features, making collaboration smooth and efficient. Download your code as styled snippets or files, simplifying project sharing and documentation.",
       image: Feature2,
-      color: "bg-green-50",
+      color: "bg-black",
     },
     {
       icon: "🌟",
       title: "AI-Powered Coding Assistance",
       description:
         "Genie, our fine-tuned AI chatbot, provides smart code suggestions and instant corrections, empowering developers to write cleaner, more efficient code.",
       image: Feature3,
-      color: "bg-green-50",
+      color: "bg-black",
     },
   ];
 
@@ -60,7 +60,7 @@ const FeaturesSection = () => {
 
   return (
     <motion.div
-      className="container lg:w-[80vw] mx-auto px-4 py-16 font-spacegroteskmedium"
+      className="container lg:w-[80vw] mx-auto px-4 lg:py-8 md:py-8 py-4 font-spacegroteskmedium"
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true, amount: 0.2 }}
@@ -69,7 +69,7 @@ const FeaturesSection = () => {
       {features.map((feature, index) => (
         <motion.div
           key={feature.title}
-          className={`flex flex-col shadow-slate-400 md:flex-row bg-gradient-to-tl from-blue-600 to-violet-600 items-center mb-16 rounded-2xl overflow-hidden shadow-md ${
+          className={`flex flex-col md:flex-row items-center mb-16 rounded-2xl overflow-hidden shadow-md ${
             feature.color
           } ${index % 2 === 1 ? "md:flex-row-reverse" : ""}`}
           variants={containerVariants}
@@ -81,15 +81,15 @@ const FeaturesSection = () => {
             <div className="text-5xl mb-4 lg:text-start md:text-start text-center">
               {feature.icon}
             </div>
-            <h2 className="lg:text-3xl text-2xl lg:text-start md:text-start text-center font-bold mb-4 text-white">
+            <h2 className="lg:text-3xl font-spacegroteskregular text-blue-600 text-xl lg:text-start md:text-start text-center font-bold mb-4">
               {feature.title}
             </h2>
-            <p className="text-white lg:text-lg text-md lg:text-start md:text-start text-center leading-relaxed">
+            <p className="text-white font-spacegrotesklight lg:text-lg text-md lg:text-start md:text-start text-center leading-relaxed">
               {feature.description}
             </p>
           </motion.div>
           <motion.div
-            className="md:w-1/2 p-8"
+            className="md:w-1/2 lg:p-8 md:p-8 p-2"
             variants={itemVariants(index % 2 === 1)}
           >
             <Image

src/app/globals.css

@@ -12,6 +12,13 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
+      fontFamily: {
+        spacegroteskbold: "Space Grotesk Bold",
+        spacegrotesklight: "Space Grotesk Light",
+        spacegroteskmedium: "Space Grotesk Medium",
+        spacegroteskregular: "Space Grotesk Regular",
+        spacegrotesksemibold: "Space Grotesk Semibold",
+      },
     },
   },
   plugins: [],