Skip to main content

Placement

The Training and Placement page showcases the placement activities at Thakur College of Engineering and Technology in Mumbai. It provides comprehensive information about the placement process, services, and objectives of the Training and Placement department. The page likely presents data on the number of students successfully placed, the count of companies that have visited the campus for recruitment, and may also categorize companies into different tiers such as super dream, dream, normal, and core companies. By visiting the page, visitors can access valuable information and insights into the placement activities at TCET.

Placement Hero Section​

The Placement Hero Section tell us about the placements scenarios in TCET, and also the statistics like Number of students placed and Number of companies visited.

Here are the steps we followed to achieve this:

  1. Opening the PlacementHero.astro file.

  2. The first child contaier of <div> showcases the headings and a short description about the Placements in TCET.

  3. Next up we inserted a <button> tag which redirects to the Guidelines of placements.

    PlacementHero.astro
    <div class="flex space-x-10 lg:flex-row flex-col items-center gap-12 w-full mt-12 mb-12">
        <div class="w-full order-1">
            <h1 class="lg:text-4xl text-3xl mb-4 font-title">About Placement</h1>
            <p class="mb-8 lg:text-base text-md text-slate-500">
                The Training and Placement department serves as a bridge between the
                academic environment and the industry by establishing connections with
                various companies and organizations. The ultimate aim of the T&P
                department is to ensure that students are well-prepared for the job market
                and have access to the resources they need to achieve their career goals.
            </p>
            <button
            class="text-slate-500 hover:bg-slate-100 active:bg-slate-50 transition-all border border-gray-300 rounded-xl px-4 py-2"
            >Visit our Guidelines</button>
        </div>
        <!-- Other containers>

  4. Next we added an <img> tag in another <div> container specifying its attributes.

    PlacementHero.astro
    <div class="flex space-x-10 lg:flex-row flex-col items-center gap-12 w-full mt-12 mb-12">
        <!-- First About Us Container -->

        <div class="w-3/4 order-2">
        <div class="mb-6 flex flex-col justify-center gap-6 rounded-xl">
            <img
                src="/Placement/placement.png"
                class="w-full aspect-auto rounded-xl"
                alt="image-of-a-female-student-pointing-towards-a-laptop-screen"
            />
        </div>
    </div>

  5. Now we added the CountUp Components by specifiyng the configuration properties like the start and end and the title of the CountUp Component.

    PlacementHero.astro
        <!-- First About Us Container -->
        <div class="flex space-x-10 lg:flex-row flex-col items-center gap-12 w-full mt-12 mb-12">
            
            <!-- Image Container -->
            <div class="mb-6 flex flex-col justify-center gap-6 rounded-xl">

                <!-- CountUp Component -->
                <div class="flex justify-between sm:flex-row flex-col items-center gap-3">
                    <div class="w-full md:w-max">
                    <CountUpComponent
                        client:only="react"
                        start={0}
                        end={852}
                        title="Number of students placed"
                    />
                    </div>
                    <!-- Another CountUp Component -->
                </div>
            </div>
        </div>
    tip

    Similar steps were carried out for multiple CountUp Components.

After completing the above steps, we successfully implemented the Hero section of Placements in our website. You can see the snapshot below:

Placements Hero Section

Companies Categories​

This page section provides detailed statistics on the successful placements of students and the number of companies that actively participate in campus recruitment. Moreover, these companies are often classified into distinct tiers based on their significance and desirability for students. This categorization includes tiers such as super dream, dream, normal, and core companies. This classification helps students gauge the level of competition and prioritize their preferences during the placement process.

This sections are already made in our Internships and Companies component.

tip

Similar steps were carried out for adding multiple Companies Category Sections.


After successfully implementing the Placement component of the TNP (Training and Placement) website, the next step is to move forward with the implementation of the Top Placed Students component.