Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added ai page #803

Closed
wants to merge 2 commits into from
Closed

added ai page #803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb94f66
added `ai` page
dhruv8433 Jun 13, 2024
f086818
Merge branch 'main' into ai-page
dhruv8433 Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 66 additions & 50 deletions frontend/src/pages/AI.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,74 @@
import React from 'react'
import React from "react";
import "../style/AI.css";

const blogs = [
{
id: 1,
title: "Understanding the Basics of AI",
content:
"Artificial Intelligence (AI) is a branch of computer science that aims to create intelligent machines. It has become an essential part of the technology industry.",
image: "https://i.pinimg.com/564x/89/bf/42/89bf42fe0ad34d9132e762d9398ab0e5.jpg",
description:
"Learn the fundamentals of Artificial Intelligence and its importance in modern technology.",
},
{
id: 2,
title: "Applications of AI",
content:
"AI has various applications in today's society. It is used in web search engines, recommendation systems, understanding natural language, and more.",
image: "https://i.pinimg.com/564x/0a/6c/7c/0a6c7c72d826a0b9cae104538bcd964d.jpg",
description: "Discover the diverse applications of AI in various fields.",
},
{
id: 3,
title: "Future of AI",
content:
"The future of AI looks promising with advancements in machine learning, deep learning, and other AI technologies. It is expected to revolutionize many industries.",
image: "https://i.pinimg.com/564x/03/2b/b4/032bb4387d0796e02d7e23ac92adea99.jpg",
description: "Explore the potential future developments and impacts of AI.",
},
{
id: 4,
title: "AI in Healthcare",
content:
"AI is transforming healthcare with applications in diagnosis, treatment planning, and patient care.",
image: "https://i.pinimg.com/564x/bd/76/0b/bd760b51404df1c0d24462c6e1b05e0c.jpg",
description: "Learn how AI is revolutionizing the healthcare industry.",
},
{
id: 5,
title: "Ethics in AI",
content:
"As AI becomes more prevalent, ethical considerations such as privacy, bias, and accountability become crucial.",
image: "https://i.pinimg.com/736x/e1/d8/a0/e1d8a094a3c0c0e1b2c244ad0cc4031e.jpg",
description: "Understand the ethical challenges and considerations in AI.",
},
{
id: 6,
title: "AI in Finance",
content:
"AI is being used in finance for fraud detection, algorithmic trading, and personalized financial advice.",
image: "https://i.pinimg.com/736x/0a/9e/d7/0a9ed7796b48f63ebb69305ebeaf0d7c.jpg",
description: "Discover how AI is changing the finance industry.",
},
];

const AI = () => {
const blogs = [
{
title: 'Introduction to AI',
date: 'July 1, 2024',
summary: 'Learn the basics of AI, its importance.Gain insight into a topic and learn the fundamentals',
image: 'https://amta.sg/wp-content/uploads/2023/09/Introduction-to-Artificial-Intelligence-scaled.jpg',
},
{
title: 'Different types of AI',
date: 'July 10, 2024',
summary: 'Explore the different types of AI and their importance.',
image: 'https://www.bluefin.com/wp-content/uploads/2020/08/ai-future.jpg',
},
{
title: 'Top 10 AI tools',
date: 'July 5, 2024',
summary: 'Use AI tools to help develop ideas and content, make more informed decisions, and speed up daily work tasks',
image: 'https://media.licdn.com/dms/image/D4D12AQE-62Ifk1Ky-Q/article-cover_image-shrink_600_2000/0/1693372628210?e=2147483647&v=beta&t=nvztC0_RuPSchP_tjjSTlVIh1q5kBuuBSV1eMydJU50',
},
{
title: 'How to Start a Career in AI',
date: 'July 15, 2024',
summary: 'A step-by-step guide on how to begin a career in AI, including necessary skills and certifications.',
image: 'https://plate.libpx.com/prod1-img/3d017cb903/Header%20AI%20Blog%20Articles%209altitudes.png?width=768&crop=0%2C0%2C1200%2C675&mode=crop&format=jpeg&dpr=1.0&signature=38f685ff6660d422abe1bd633a92f87b40dda314',
},
{
title: 'Benefits of AI',
date: 'July 25, 2024',
summary: 'Unlock and leverage the potential of AI. Learn how you can use the capabilities of AI to enhance your work and daily life.',
image: 'https://sdsdigitals.com/wp-content/uploads/2023/09/What-is-Artiificial-IntelligenceAI.webp',
},
{
title: 'The Future of AI',
date: 'July 25, 2024',
summary: 'Explore the future trends in AI and how they will have an impact on our lives.',
image: 'https://static.cegos.com/wp-content/uploads/sites/3/2023/06/19103608/Blog-Global-LD-Post-banner-AI-20210610-scaled-1.jpg',
},
];
return (
<div className="container">
<h1 className="title">AI Blog</h1>
<div className="grid-container">
{blogs.map((blog, index) => (
<div key={index} className="grid-item" style={{ objectFit: "cover", maxWidth: "100%" }}>
<img src={blog.image} alt={blog.title} height={300} width={"100%"} className="blog-image" />
<h2 className="blog-title">{blog.title}</h2>
<p className="blog-date">{blog.date}</p>
<p className="blog-summary">{blog.summary}</p>
<div className="ai-container">
<h1>AI Blogs</h1>
<div className="blog-grid">
{blogs.map((blog) => (
<div key={blog.id} className="blog-post">
<img src={blog.image} height={300} style={{objectFit: "cover"}} width={"100%"} alt={blog.title} />
<h2>{blog.title}</h2>
<p className="description">{blog.description}</p>
<p>{blog.content}</p>
</div>
))}
</div>
</div>
);
}
export default AI;
};

export default AI;
122 changes: 62 additions & 60 deletions frontend/src/style/AI.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,64 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
/* AI.css */
.ai-container {
margin: 50px auto;
max-width: 1200px;
padding: 20px;
text-align: center;
}

.blog-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}

.blog-post {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
max-width: 350px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
flex: 1 1 calc(33.333% - 40px);
box-sizing: border-box;
}

.blog-post:hover {
transform: scale(1.02);
}

.blog-post img {
max-width: 100%;
border-radius: 5px;
margin-bottom: 15px;
}

.blog-post h2 {
font-size: 1.5em;
margin-bottom: 10px;
}

.blog-post .description {
font-size: 1em;
font-style: italic;
margin-bottom: 10px;
}

.blog-post p {
font-size: 1em;
line-height: 1.6;
}

@media (max-width: 1024px) {
.blog-post {
flex: 1 1 calc(50% - 40px);
}

.container {
max-width: 1200px;
margin: 0 auto;
height: auto;
padding: 20px;
}

@media (max-width: 600px) {
.blog-post {
flex: 1 1 100%;
}

.title {
text-align: center;
margin-bottom: 40px;
font-size: 2.5rem;
color: #333;
}

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}

.grid-item {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.grid-item:hover {
transform: translateY(-10px);
}

.blog-image {
width: 100%;
height: auto;
border-radius: 8px;
}

.blog-title {
font-size: 1.5rem;
color: #007BFF;
margin-top: 15px;
}

.blog-date {
font-size: 0.9rem;
color: #888;
margin-bottom: 10px;
}

.blog-summary {
font-size: 1rem;
color: #555;
}

}
Loading