Add Vision and Mission Components for IET and DAVV

[faroutfarhaan]

Description:

This pull request introduces two new components that enhance the about page for IET and DAVV:

Vision Component

• Responsive Layout: Displays vision statements alongside corresponding images for IET and DAVV.
• Image Overlay: Includes a semi-transparent background over images to improve text visibility.
• Dynamic Content: Imports vision text and images from constants, allowing for easy updates.

Mission Component

• Dynamic Tab Navigation: Users can switch between different mission statements via button navigation, with the active mission clearly highlighted.
• Responsive Grid Layout: Organizes mission descriptions in a grid for improved readability.
• Reusability: Utilizes the DesCard component for displaying mission descriptions.
• State Management: Implements React's useState to manage the currently displayed mission details.

Files Modified:

• Vision.tsx: Implemented the Vision component.
• Mission.tsx: Implemented the Mission component.
• Updated constants in about-page/about.ts and about-page/mission.ts.

Screenshots:

Testing:

• Ensure both components render correctly on the about page.
• Verify that the Mission component allows proper navigation between mission statements.
• Check responsive design across various screen sizes.

Checklist:

• Code adheres to coding standards and best practices.
• Unit tests have been added or updated.
• Documentation has been updated (if applicable).
• Review the changes before merging.

[faroutfarhaan]

Description:

This pull request introduces a new Landmarks component that enhances the user experience on the about page by showcasing important landmarks with a responsive carousel.

Landmarks Component

• Responsive Carousel: Utilizes react-slick to create a responsive slider that displays multiple landmarks at once.
• Dynamic Rendering: Maps through a list of landmarks imported from constants, ensuring that the content can be easily updated.
• Settings Customization: Configures carousel settings such as dots for navigation, scroll speed, and slide visibility for an optimized user experience.
• Custom Slide Integration: Renders each landmark with the Customslide component, allowing for reusable design and functionality.

Files Modified:

• Landmarks.tsx: Implemented the Landmarks component and integrated the carousel functionality.
• Updated constants in about-page/landmarks.ts.

Testing:

• Ensure the Landmarks component renders correctly on the about page.
• Verify that the slider functionality works as expected, including navigation and responsiveness.

Screenshots:

Checklist:

• Code adheres to coding standards and best practices.
• Unit tests have been added or updated.
• Documentation has been updated (if applicable).
• Review the changes before merging.