add domain sections + navbar

client/src/app/corporate/page.tsx

@@ -0,0 +1,12 @@
+import Domain from "@/components/domainsections/domain";
+import { corporateData } from "@/components/domainsections/data";
+
+export default function CorporatePage() {
+  return (
+    <Domain
+      imgSrc={corporateData.imgSrc}
+      altText={corporateData.altText}
+      sections={corporateData.sections}
+    />
+  );
+}

client/src/app/creatives/page.tsx

@@ -0,0 +1,12 @@
+import Domain from "@/components/domainsections/domain";
+import { creativesData } from "@/components/domainsections/data";
+
+export default function CreativesPage() {
+  return (
+    <Domain
+      imgSrc={creativesData.imgSrc}
+      altText={creativesData.altText}
+      sections={creativesData.sections}
+    />
+  );
+}

client/src/app/globals.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

client/src/app/research/page.tsx

@@ -0,0 +1,12 @@
+import Domain from "@/components/domainsections/domain";
+import { researchData } from "@/components/domainsections/data";
+
+export default function ResearchPage() {
+  return (
+    <Domain
+      imgSrc={researchData.imgSrc}
+      altText={researchData.altText}
+      sections={researchData.sections}
+    />
+  );
+}

client/src/app/technical/page.tsx

@@ -0,0 +1,12 @@
+import Domain from "@/components/domainsections/domain";
+import { technicalData } from "@/components/domainsections/data";
+
+export default function ResearchPage() {
+  return (
+    <Domain
+      imgSrc={technicalData.imgSrc}
+      altText={technicalData.altText}
+      sections={technicalData.sections}
+    />
+  );
+}

client/src/components/domainsections/data.tsx

@@ -0,0 +1,95 @@
+export const corporateData = {
+  imgSrc: "/corporate.png",
+  altText: "Corporate",
+  sections: [
+    {
+      heading: "Corporate Domain",
+      content:
+        "For those who thrive on networking, strategy, and the business side of data science, the Corporate Domain is your playground. This domain bridges the gap between technology and industry, offering opportunities to engage with professionals, manage partnerships, and explore data-driven business strategies.",
+    },
+    {
+      heading: "Content",
+      content:
+        "The creative powerhouse behind every campaign. From crafting compelling narratives to storytelling, content is your key to unlocking impactful communication.",
+    },
+    {
+      heading: "PR & Events",
+      content:
+        "Turn visions into unforgettable realities. Meticulously plan and execute events that leave a lasting impression, turning every moment into an extraordinary experience.",
+    },
+    {
+      heading: "Sponsorship",
+      content:
+        "Forge impactful partnerships that go beyond business deals. Elevate brands and innovations through strategic collaborations that open new doors to success.",
+    },
+  ],
+};
+
+export const creativesData = {
+  imgSrc: "/creatives.png",
+  altText: "Creatives",
+  sections: [
+    {
+      heading: "Creatives Domain",
+      content:
+        "The artistic heart of our community! This is where imagination takes center stage, focusing on designing eye-catching posters, crafting visual content, and bringing ideas to life through design. If you have a passion for creativity, visual storytelling, or just love making things look great, this is your space.",
+    },
+    {
+      heading: "UI/UX",
+      content:
+        "Design with purpose. In the UI/UX space, we create seamless user experiences that balance aesthetics and functionality. It’s where innovation meets empathy, and every interface tells a story through design.",
+    },
+    {
+      heading: "Photography",
+      content:
+        "Capture the world one frame at a time. Whether it’s the beauty in everyday moments or the extraordinary through your lens, photography is where moments become timeless.",
+    },
+    {
+      heading: "VFX",
+      content:
+        "Craft the unseen and bring imagination to life, one visual at a time. From transforming the ordinary into the extraordinary to pushing the boundaries of creativity, VFX is where visions evolve into immersive realities.",
+    },
+  ],
+};
+
+export const researchData = {
+  imgSrc: "/research.png",
+  altText: "Research",
+  sections: [
+    {
+      heading: "Research Domain",
+      content:
+        '"Research is seeing what everybody else has seen and thinking what nobody else has thought." This powerful statement captures the essence of innovation and discovery, particularly in the field of data science and artificial intelligence. If you are someone who thrives on curiosity, analytical thinking, and the relentless pursuit of knowledge, then the Research Domain is your ideal playground.\n\n' +
+        "Here, you have the opportunity to collaborate on groundbreaking projects, experiment with new methodologies, and push the boundaries of what is possible. Whether it’s diving deep into complex datasets, uncovering hidden patterns, or developing new algorithms, your contributions can have a significant impact on the ever-evolving fields of AI and machine learning.\n\n" +
+        "Moreover, the Research Domain is not just about exploring the unknown; it’s also about sharing your findings with the world. By publishing papers and presenting your work, you can contribute to the global body of knowledge and inspire others to think differently.\n\n" +
+        "Join us in this exciting journey to uncover new insights, challenge existing paradigms, and shape the future of technology.",
+    },
+  ],
+};
+
+export const technicalData = {
+    imgSrc: "/technical.png",
+    altText: "Technical",
+    sections: [
+      {
+        heading: "Technical Domain",
+        content:
+          "Just like mastering each level in a retro game, the Technical Domain empowers you to build, code, and create with precision. Whether you're coding your way through complex problems or developing the next big app, this is where you hone your technical prowess and play to win.",
+      },
+      {
+        heading: "AI/ML",
+        content:
+          "Enter the realm of artificial intelligence, where machines learn and data becomes your game controller. Train models, analyze patterns, and unlock the future of tech.",
+      },
+      {
+        heading: "Web Dev",
+        content:
+          "Build the web like crafting the perfect game map—one line of code at a time. Design responsive, interactive websites that level up user experiences and leave a lasting impact.",
+      },
+      {
+        heading: "App Dev",
+        content:
+          "Take your coding skills to the next level by developing apps that feel like a cheat code for the modern world. Dive deep into the world of app creation and build with hands-on learning.",
+      },
+    ],
+  };

client/src/components/domainsections/domain.tsx

@@ -0,0 +1,42 @@
+import Navbar from "@/components/navbar";
+import Image from "next/image";
+import React from "react";
+
+type DomainProps = {
+  imgSrc: string;
+  altText: string;
+  sections: { heading: string; content: string }[];
+};
+
+export default function Domain({ imgSrc, altText, sections }: DomainProps) {
+  return (
+    <div className="min-h-screen bg-[#11071F] pb-12 xl:pb-96">
+      <Navbar />
+      <div className="p-12 flex flex-col gap-16 xl:gap-28">
+        <Image
+          className="absolute z-10 w-60 lg:w-96"
+          src={imgSrc}
+          alt={altText}
+          width={500}
+          height={500}
+        />
+
+        {sections.map((section, index) => (
+          <div key={index} className="z-50 flex flex-col items-center justify-center content">
+            <h1 className="text-white text-2xl lg:text-5xl font-semibold font-Montserrat">
+              {section.heading}
+            </h1>
+            <h2 className="text-white text-base text-center lg:text-2xl font-semibold w-2/3 mt-16 font-Montserrat">
+              {section.content.split("\n").map((line, lineIndex) => (
+                <React.Fragment key={lineIndex}>
+                  {line}
+                  <br />
+                </React.Fragment>
+              ))}
+            </h2>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

client/src/components/navbar.tsx

@@ -0,0 +1,92 @@
+
+export default function Navbar() {
+  return (
+    <div className="min-h-20 bg-[#1A0B2E] px-2 lg:px-10 py-2 flex justify-between items-center shadow-md">
+      <div className="flex items-center gap-2 logo">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="50"
+          height="50"
+          viewBox="0 0 74 80"
+          fill="none"
+        >
+          <path
+            d="M54.9297 48.093L36.8147 37.3573L18.3923 48.0674L37.1222 58.9825L54.9297 48.093Z"
+            fill="#8855C4"
+          />
+          <path
+            d="M54.9296 48.093L36.7891 37.3829V16.0652L54.9296 26.3017V48.093Z"
+            fill="#2B0D4F"
+          />
+          <path
+            d="M36.7891 37.3829V16.0652L18.3923 26.0751V48.0674L36.7891 37.3829Z"
+            fill="#4B207A"
+          />
+          <path
+            d="M65.0759 21.5226C65.0845 18.1746 65.0964 11.4274 65.0759 11.2224L73.8387 15.9369V26.3908L65.0759 21.5226Z"
+            fill="#4B207A"
+          />
+          <path
+            d="M64.7685 52.5769L64.7173 42.533L73.7363 47.8624L64.7685 52.5769Z"
+            fill="#2B0D4F"
+          />
+          <path
+            d="M46.6281 31.8741L45.9619 0L57.9019 6.20059V25.4173L73.7365 34.8463V47.8624L46.6281 31.8741Z"
+            fill="#6F389F"
+          />
+          <path
+            d="M46.1924 10.4026L45.9618 0L37.2502 5.15008L46.1924 10.4026Z"
+            fill="#2B0D4F"
+          />
+          <path
+            d="M0.200439 27.262V16.7569L9.37321 11.6775V21.9326L0.200439 27.262Z"
+            fill="#4B207A"
+          />
+          <path
+            d="M9.04007 52.9869L0.0979004 47.8624L9.04007 42.8661V52.9869Z"
+            fill="#2B0D4F"
+          />
+          <path
+            d="M27.9238 10.2489L27.8726 0L36.7891 5.15008L27.9238 10.2489Z"
+            fill="#2B0D4F"
+          />
+          <path
+            d="M28.0262 32.2841L0.0979445 47.8624L0 34.4876L15.9838 25.1098V6.76428L27.8725 0L28.0262 32.2841Z"
+            fill="#683B9B"
+          />
+          <path
+            d="M36.9171 69.5389L28.1799 74.6634L36.6865 79.9928L45.6031 74.6634L36.9171 69.5389Z"
+            fill="#4B207A"
+          />
+          <path
+            d="M64.5636 52.9869L64.7686 63.4408L55.9033 58.4701L64.5636 52.9869Z"
+            fill="#2B0D4F"
+          />
+          <path
+            d="M9.06567 63.6458L9.27065 53.4481L18.1872 58.4957L9.06567 63.6458Z"
+            fill="#2B0D4F"
+          />
+          <path
+            d="M21.2619 70.6724L37.0196 61.3397L52.9852 70.7175L64.7685 63.4408L37.0196 47.8624L9.06567 63.6457L21.2619 70.6724Z"
+            fill="#6F389F"
+          />
+        </svg>
+
+        <div className="logo-text flex flex-col">
+          <div className="flex gap-1 items-center">
+            <h1 className="text-xs lg:text-2xl font-semibold font-Poppins text-white">Data</h1>
+            <h1 className="lg:text-2xl text-xs font-semibold font-Poppins text-[#8855C4]">Science</h1>
+          </div>
+          <div className="flex gap-1 items-center">
+            <h1 className="lg:text-2xl text-xs font-semibold font-Poppins text-white">Community</h1>
+            <h1 className="lg:text-2xl text-xs font-semibold font-Poppins text-[#8855C4]">SRM</h1>
+          </div>
+        </div>
+      </div>
+      <div className="sections flex items-center lg:gap-16 gap-4">
+        <a href="/" className="text-white text-xs lg:text-lg font-Montserrat">Home</a>
+        <a href="/aboutus" className="text-white text-xs lg:text-lg font-Montserrat">About Us</a>
+      </div>
+    </div>
+  );
+}

client/tailwind.config.ts

@@ -8,6 +8,10 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      fontFamily:{
+        Montserrat: ["Montserrat","sans-serif"],
+        Poppins: ["Poppins","sans-serif"]
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",