Add a New Features - "Tech Resouorces" page

[codeaashu]

What feature?

Overview: First create a button on Sidebar - Button Name: Tech Resources

When a user clicks on this button a new page should open

In this Tech Resources Page

First Create a hero Section - Hero Section Content:

Main Title: "Tech Resources"

Subtitle: "Your One-Stop Hub for Developer Resources"

Supporting Tagline: "Whether you're a beginner or a pro, access curated resources for every tech skill — from programming courses to AI tools, top GitHub repos, and top project."

in the hero section add an animation in Background : Create an engaging and attractive animated background to make the hero section visually appealing. You can use tools like CSS Animations, Anime.js, GSAP or any other animation you use here.

After hero section

Implement the all resources which are needed to a techy or developers the resources i want to implement in this are listed below

Sections to Implement:

1. Section - Programming languge courses

• For this section first make a "courses" name a container or button when user click on this then all programming language are shown and when when any user click on any programming language the all resouces are shown in linkable form and when any user click on any link they go where is availavle be sure when clicking a category, display a list of GitHub repositories (linked) with smooth animations with better animation" for now you use random link here related to this.

2. Section - Top Github Repository

• For this section first make a "Top GitHub Repo" name a container or button when user click on this then the all trending & Top github repo shown and when user click on any of this then they go to the github where this repo is available be sure when clicking a category, display a list of GitHub repositories (linked) with smooth animations with better animation" for now you use random github repo link here.

3. Section - Top AI Tools

• For this section first make a "Top AI Tools" name a container or button when user click on this then the all categories of ai tools are shown

Categories of AI Tools: Each category will represent a specific domain or use case for AI tools.

Example categories could include: Image Creation: AI tools for generating images, digital art, etc. Sales Automation: AI tools for optimizing sales processes, lead generation, etc. Text and Code Generation: Tools for AI-powered writing, programming, or documentation assistance. Data Analysis: AI tools for analyzing data, performing predictions, and drawing insights. Voice and Speech Recognition: Tools for AI-powered voice assistants, speech-to-text, etc. Video and Audio Editing: Tools for AI-driven media editing and enhancement.

You can expand or modify the categories based on the target audience.

Now when user click on any of this categories the all ai tools are display here on screen with smooth animation you can use chatgpt for adding this categories's related AI Tools and when any user click on any ai tools they go to the ai tools website where this tools is available be sure when clicking a AI Tools, display a list of AI Tools (linked) with smooth animations with better animation" u use chatgpt for AI tools.

after that if you have some other resources idea to implement in this you can also implement here same like listed three resources.

After that create a footer section

Unique Design: Create a footer with a unique and engaging design. The footer should be visually consistent with the rest of the page and include: Links to external resources (e.g., documentation, community) Social media links Any other creative elements that fit the theme Key Requirements: Animations: Use smooth and subtle animations for each interaction (you can use Framer Motion, Anime.js, or CSS transitions). Responsiveness: Ensure that the page is fully responsive across all devices.

Reusable Components: Create reusable components for containers and lists to make future updates easier.

Tech Stack: Frontend: React.js (Use functional components and hooks where possible) Styling: Tailwind CSS (or your preferred method) for styling Animation Libraries (Optional): Framer Motion Anime.js GSAP or etc.

Design Specifications:

Primary Background Color: #141d2f Accent Color (Buttons, Highlights, etc.): #00a6fb Text Color: White Not same like this just follow the design concept of Project.

💌 DevDisplay waited for you contribution.

Thanks, Team DevDisplay

Add screenshots

Add screenshots

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[infernodragon456]

Hello, I am interested in working on this. Please assign me this issue @codeaashu

[jyothimanoj12]

please assign this issue for me to work on

[jyothimanoj12]

Hey can you check whether i had done it right ?? . Plz guide me if any changes required also can you add gsoc-extended label too

[haylemon]

Hi, I've never contributed to a project before. I'd love to be assigned!

[ishap11]

📢 Invitation to Join the DevDisplay WhatsApp Community! We are excited to invite you to join the WhatsApp community of DevDisplay, where developers and contributors come together to collaborate and share their ideas.

Collaborative Support: If you are interested in working together with extensive support, we encourage you to join our community.

Open Source Contribution: If you would like to contribute to the DevDisplay open-source project, your participation is welcomed in our WhatsApp group.

By joining, you will have the opportunity to connect with like-minded individuals, discuss project developments, and contribute to our shared goals. For more information and to join the community, please visit: Join DevDisplay WhatsApp Community.

We look forward to your participation!