Create page.tsx

next.config.js

@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images:{
+    domains:['rca.ac.rw','images.unsplash.com']
+}
 
 module.exports = nextConfig

package.json

@@ -29,6 +29,8 @@
     "react-spinners": "^0.13.8",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2",
+    "swiper": "^10.2.0",
+    "react-icons": "^4.10.1",
     "yup": "^1.2.0"
   }
 }

src/assets/assets/vectors/Pathvec.tsx

@@ -1,10 +1,20 @@
-const Pathvec = ()=>{
-    return(
-        <svg width="713" height="1488" viewBox="0 0 713 1488" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M62.5 7.5C62.5 7.5 -1.61494 226.533 62.5 339C174.967 536.284 528.626 143.402 644 339C712.054 454.374 712.054 547.126 644 662.5C528.626 858.098 181.434 488.546 62.5 682C-10.6191 800.934 -10.6191 920.566 62.5 1039.5C181.434 1232.95 539.172 900.675 657.5 1094.5C729.738 1212.83 716.238 1276.17 644 1394.5C525.672 1588.33 62.5 1394.5 62.5 1394.5" stroke="#523873" strokeWidth="14" strokeLinecap="round"/>
-</svg>
-
-    )
-
-}
-export default Pathvec;
+const Pathvec = () => {
+    return (
+      <svg
+        width="703"
+        height="1188"
+        viewBox="10 0 713 1288"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M62.5 7.5C62.5 7.5 -1.61494 226.533 62.5 339C174.967 536.284 528.626 143.402 644 339C712.054 454.374 712.054 547.126 644 662.5C528.626 858.098 181.434 488.546 62.5 682C-10.6191 800.934 -10.6191 920.566 62.5 1039.5C181.434 1232.95 539.172 900.675 657.5 1094.5C729.738 1212.83 716.238 1276.17 644 1394.5C525.672 1588.33 62.5 1394.5 62.5 1394.5"
+          stroke="#523873"
+          strokeWidth="14"
+          strokeLinecap="round"
+        />
+      </svg>
+    );
+  };
+  export default Pathvec;
+

src/assets/assets/vectors/Trapezium.tsx

@@ -0,0 +1,20 @@
+const Trapezium = () => {
+  return (
+    <svg
+      width="100%"
+      height="30%"
+      viewBox="0 0 799 703"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 701.5L256 1.5H797.5V701.5H3Z"
+        fill="#523873"
+        stroke="#523873"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+export default Trapezium;

src/components/Button/index.tsx

@@ -0,0 +1,14 @@
+type ButtonProps = {
+    text?:string,
+    clickHandler?:()=>void,
+    className?:string,
+    icon?:any
+
+}
+const Button = ({className,text,clickHandler,icon}:ButtonProps)=>{
+
+    return(
+<button onClick={clickHandler} className={`${icon && 'flex gap-4 items-center'} ${className} text-sm`}>{text} {icon && (<span className="text-xl ">{icon}</span>)}</button>
+    )
+}
+export default Button;

src/components/News/Mainarticle.tsx

@@ -0,0 +1,14 @@
+export type MainarticleProps = {
+    newsTitle: string,
+    publicationTime: string
+}
+const Mainarticle = ({ newsTitle, publicationTime }: MainarticleProps) => {
+    return (
+        <div className=" bg-slate-100 w-full md:w-11/12 h-[300px] md:h-[554px] rounded sm:px-12 px-6 border border-slate-100 relative">
+            <p className="text-textGray font-semibold text-lg absolute bottom-20 ">{newsTitle}</p>
+            <p className="text-[#434343] absolute bottom-8">{publicationTime}</p>
+        </div>
+    )
+
+}
+export default Mainarticle;

src/components/News/NewsComponent.tsx

@@ -0,0 +1,31 @@
+import Image, { StaticImageData } from "next/image"
+
+interface Props {
+    date: String,
+    title: string,
+    content: String
+    image: StaticImageData,
+    setNewsPaper: Function
+}
+const NewsComponent = ({ date, title, content, image, setNewsPaper }: Props) => {
+    const newsPaper = {
+            image: image,
+            title:title,
+            content: content,
+            date: date
+    }
+    return (
+        <div onClick={()=>setNewsPaper(newsPaper)} className="w-full sm:h-[260px] md:h-[200px] my-4 flex justify-between items-center border border-[#ccc] py-2 px-1 cursor-pointer rounded-lg">
+            <div className="w-2/5 h-[100%] rounded-lg bg-slate-100">
+                <Image src={image} alt={title} className="w-full h-full rounded-lg" />
+            </div>
+            <div className="w-3/5 flex flex-col mx-3">
+                <h4 className="pb-4 text-[#434343ba]">{date}</h4>
+                <h3 className="font-extrabold pb-4 test-[#49494af0]">{title}</h3>
+                <h6 className="text-[#434343ba]">{content}</h6>
+            </div>
+        </div>
+    )
+}
+
+export default NewsComponent

src/components/Swiper/index.tsx

@@ -0,0 +1,55 @@
+import { FaArrowRight } from "react-icons/fa";
+import Button from "../Button";
+import Image from "next/image";
+import img from "../../assets/background.png";
+const SwiperPage = ({
+  title,
+  subTitle,
+  description,
+  url,
+}: {
+  title: string;
+  subTitle: String;
+  description: String;
+  url: string;
+}) => {
+  return (
+    <div className="md:bg-purpleColor">
+      {/* background */}
+      <div className="flex  flex-col relative lg:w-[99vw] mx-auto h-fit md:h-[60vh]">
+        <div className="sm:space-y-2 md:space-y-8 h-[100%] p-6 z-20 txtShadow ">
+          <p className="text-white font-black text-2xl animate-bounce ">
+            {title}
+          </p>
+
+          <p className="font-semibold text-white text-md sm:text-lg md:text-xl lg:text-xl ">
+            {subTitle}
+          </p>
+          <p className="text-white text-sm sm:text-sm md:text-lg lg:text-lg ">
+            {description}
+          </p>
+          <div className="md:flex w-full md:w-11/12 lg:w-2/3 xl:w-1/2 gap-12 md:translate-y-[200px] space-y-2 md:space-y-0 mx-0 ">
+            <Button
+              text="View Academic Structure"
+              className="bg-purpleColor md:p-4  xl:px-12 px-4 sm:px-14 rounded-lg text-white p-2 "
+              icon={<FaArrowRight />}
+            />
+            <Button
+              text="Student or Staff? Use Portal"
+              className="text-purpleColor md:p-4 xl:px-16 p-2 sm:px-16 px-6 rounded-lg bg-[#D9D9D9]  border border-purpleColor"
+            />
+          </div>
+        </div>
+        <div className="absolute w-[100%] h-[122%] ">
+          <Image
+            src={url}
+            alt="image"
+            fill
+          />
+        </div>
+      </div>
+      <div className="h-32 w-full hidden sm:block"></div>
+    </div>
+  );
+};
+export default SwiperPage;

src/components/card/index.tsx

@@ -0,0 +1,17 @@
+export type CardProp = {
+    image:StaticImageData,
+    title:string,
+    description:string,
+    className?:string
+}
+import Image, { StaticImageData } from "next/image"
+const Card = ({image,title,description,className}:CardProp)=>{
+return(
+    <div className={`w-11/12 bg-white rounded-2xl shadow-sm shadow-textGray px-8 py-8 space-y-4 ${className}`}>
+<Image src={image} alt= "card Image" width={40} height={40}/>  
+<h2 className="font-semibold text-textGray text-lg ">{title}</h2>
+<p className="text-textGray">{description}</p>
+    </div>
+)
+}
+export default Card;

src/components/stats/index.tsx

@@ -0,0 +1,13 @@
+export type StatViewProp = {
+    statNo:number,
+    statDesc:string
+}
+const StatView = ({statNo,statDesc}:StatViewProp) =>{
+return(
+    <div className="space-y-6">
+<p className="text-4xl font-bold text-white">{statNo}+</p>
+<p className="text-md font-medium text-white">{statDesc}</p>
+    </div>
+)
+}
+export default StatView;

src/data/adminPath.tsx

@@ -0,0 +1,26 @@
+export type AdminPath = {
+    id: number,
+    title: string,
+    description: string
+}
+export const pathData: AdminPath[] = [
+    {
+        id: 1,
+        title:"Complete O' level Secondary Education in Rwanda",
+        description:"Begin your journey by excelling in O' level studies. Choose Rwanda Coding Academy for your advanced level classes. Your commitment and ambition set the foundation for your tech future."
+    }, {
+        id:2,
+        title:"Pass the O’ level National Examinations With The Highest  Grades",
+        description:"Excel in O' level national exams, showcasing brilliance in Math, Physics, and English. Your exceptional performance propels you closer to joining Rwanda Coding Academy, where tech dreams take flight."
+    },
+    {
+        id:3,
+        title:"Get Selected In the Top 120 Students in the country",
+        description:"Outshine your peers and secure your place among the nation's top 120 students. Your dedication and aptitude distinguish you, placing you on the path to join Rwanda Coding Academy's elite community."
+    },
+    {
+        id:4,
+        title:"Selected? Great Your Are Now Admitted to the Great Community",
+        description:"Congratulations! Your hard work and excellence have paid off. You're officially part of the exceptional Rwanda Coding Academy community. Get ready to embark on a transformative journey in the world of tech."
+    }
+]

src/data/index.tsx

@@ -0,0 +1,25 @@
+export interface SwiperInfo {
+    title: string;
+    subTitle: String;
+    description: String;
+    url: String;
+}
+export const swipersInfo: SwiperInfo[] = [
+    {
+        title: " Leading Through Digital Innovation",
+        subTitle: "Rwanda Coding Academy",
+        description: "Fueling Rwanda's tech revolution! Open to all Rwandans post ordinary level. Elevate your prospects at the esteemed Rwanda Coding Academy—a beacon of excellence nationwide, nestled in Nyabihu District, Western Province ,Fueling Rwanda's tech revolution! Open to all Rwandans post ordinary level. Elevate your prospects at the esteemed Rwanda Coding Academy—a beacon of excellence nationwide, nestled in Nyabihu District, Western Province Fueling Rwanda's tech revolution! Open to all Rwandans post ordinary level. Elevate your prospects at the esteemed Rwanda Coding Academy—a beacon of excellence nationwide, nestled in Nyabihu District, Western Province Fueling Rwanda's tech revolution! Open to all Rwandans post ordinary level. Elevate your prospects at the esteemed Rwanda Coding Academy—a beacon of excellence nationwide, nestled in Nyabihu District, Western Province Fueling Rwanda's tech revolution! Open to all Rwandans post ordinary level. Elevate your prospects at the esteemed Rwanda Coding Academy—a beacon of excellence nationwide, nestled in Nyabihu District, Western Province",
+        url:"https://images.unsplash.com/photo-1568333261345-0918efdce2d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
+    }, {
+        title: " Leading Through Digital Innovation",
+        subTitle: "Rwanda Coding Academy",
+        description: "Fueling Rwanda's tech revolution! Open to all Rwandans post ordinary level. Elevate your prospects at the esteemed Rwanda Coding Academy—a beacon of excellence nationwide, nestled in Nyabihu District, Western Province",
+        url:"https://images.unsplash.com/photo-1619410283995-43d9134e7656?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+    }
+    , {
+        title: " Leading Through Digital Innovation",
+        subTitle: "Rwanda Coding Academy",
+        description: "Fueling Rwanda's tech revolution! Open to all Rwandans post ordinary level. Elevate your prospects at the esteemed Rwanda Coding Academy—a beacon of excellence nationwide, nestled in Nyabihu District, Western Province",
+        url:"https://images.unsplash.com/photo-1544640808-32ca72ac7f37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bGlicmFyeXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60"
+    }
+]