forked from Counselllor/Counsellor-Web
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request Counselllor#778 from dhruv8433/blogs-page
blogs page with beautiful styling
- Loading branch information
Showing
4 changed files
with
287 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| /* Blogs.css */ | ||
|
|
||
| body { | ||
| background-color: #f4f4f9; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; /* Ensure full viewport height */ | ||
| font-family: "ABeeZee"; | ||
| } | ||
|
|
||
| .blogs-container { | ||
| background-color: #fff; | ||
| width: 100%; | ||
| min-height: 100vh; /* Adjusted to use viewport height */ | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| border-radius: 10px; | ||
| overflow: hidden; | ||
| padding: 20px; | ||
| background: linear-gradient(135deg, #4375ff, #80ccff); | ||
| padding-inline: 200px; | ||
| } | ||
|
|
||
| .blogs-header h1 { | ||
| color: #fff; | ||
| font-family: "ABeeZee"; | ||
| font-size: 70px; | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .blogs-header p { | ||
| font-size: 1.2em; | ||
| color: #fff; | ||
| font-family: "ABeeZee"; | ||
| font-size: 20px; | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .blogs-list { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .blog-card { | ||
| background-color: #fff; | ||
| width: calc(33.33% - 20px); | ||
| margin: 10px; | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| text-align: left; | ||
| transition: transform 0.2s; | ||
| } | ||
|
|
||
| .blog-card:hover { | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
| .blog-card h2 { | ||
| font-size: 1.9em; | ||
| font-family: "ABeeZee"; | ||
| color: #007bff; | ||
| } | ||
|
|
||
| .blog-card .blog-date { | ||
| font-size: 1.4em; | ||
| font-family: "ABeeZee"; | ||
| color: #777; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .blog-card p { | ||
| font-size: 1.6em; | ||
| color: #333; | ||
| font-family: "ABeeZee"; | ||
| } | ||
|
|
||
| .blog-author { | ||
| font-size: 0.9em; | ||
| color: #555; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .blog-tags { | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .blog-tag { | ||
| display: inline-block; | ||
| background-color: #a7d0fc; | ||
| color: #007bff; | ||
| padding: 5px 10px; | ||
| margin-right: 5px; | ||
| border-radius: 5px; | ||
| font-size: 1em; | ||
| } | ||
|
|
||
| .read-more { | ||
| display: inline-block; | ||
| margin-top: 10px; | ||
| padding: 10px 20px; | ||
| background-color: #007bff; /* Blue color for the read more button */ | ||
| color: #fff; | ||
| text-decoration: none; | ||
| border-radius: 5px; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| .read-more:hover { | ||
| background-color: #0056b3; /* Darker blue for hover effect */ | ||
| } | ||
|
|
||
| /* Responsive Design */ | ||
| @media (max-width: 968px) { | ||
| .blogs-container { | ||
| padding-inline: 0; | ||
| } | ||
|
|
||
| .blogs-container h1 { | ||
| font-size: 40px; | ||
| } | ||
|
|
||
| .blogs-container p { | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .blog-card { | ||
| width: calc(50% - 20px); | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 480px) { | ||
| .blog-card { | ||
| width: calc(100% - 20px); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import React from "react"; | ||
| import './Blogs.css'; // Import CSS file for styles | ||
|
|
||
| const blogsData = [ | ||
| { | ||
| title: "Understanding the Role of a Counselor", | ||
| date: "June 20, 2024", | ||
| summary: "Counselors play a vital role in supporting individuals through personal challenges and mental health issues. Learn more about their responsibilities and impact.", | ||
| tags: ["Counseling", "Mental Health"], | ||
| author: "John Doe", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "How to Choose the Right Counselor for You", | ||
| date: "June 22, 2024", | ||
| summary: "Finding the right counselor can make a significant difference in your therapy journey. Here are some tips to help you select a counselor that fits your needs.", | ||
| tags: ["Counseling", "Advice"], | ||
| author: "Jane Smith", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "The Benefits of Counseling for Mental Health", | ||
| date: "June 25, 2024", | ||
| summary: "Explore the various ways counseling can improve your mental health and overall well-being. From stress management to personal growth, counseling offers numerous benefits.", | ||
| tags: ["Mental Health", "Well-being"], | ||
| author: "Emily Johnson", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "Counseling Techniques for Stress Management", | ||
| date: "June 28, 2024", | ||
| summary: "Discover effective counseling techniques that can help manage stress and improve your mental health.", | ||
| tags: ["Stress Management", "Techniques"], | ||
| author: "Michael Brown", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "The Importance of Mental Health Awareness", | ||
| date: "June 30, 2024", | ||
| summary: "Raising awareness about mental health is crucial in today’s society. Learn why it matters and how you can contribute.", | ||
| tags: ["Awareness", "Mental Health"], | ||
| author: "Jessica Davis", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "How to Support a Friend Going Through Counseling", | ||
| date: "July 2, 2024", | ||
| summary: "Supporting a friend who is going through counseling can be challenging. Here are some tips to help you provide the right support.", | ||
| tags: ["Support", "Friendship"], | ||
| author: "David Wilson", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "Overcoming the Stigma of Counseling", | ||
| date: "July 4, 2024", | ||
| summary: "Many people still face stigma when seeking counseling. This article explores ways to overcome these challenges.", | ||
| tags: ["Stigma", "Counseling"], | ||
| author: "Chris Lee", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "The Role of Counseling in Personal Development", | ||
| date: "July 6, 2024", | ||
| summary: "Counseling is not only for mental health issues; it also plays a significant role in personal development.", | ||
| tags: ["Personal Development", "Growth"], | ||
| author: "Megan Anderson", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "Different Types of Counseling Approaches", | ||
| date: "July 8, 2024", | ||
| summary: "Learn about different counseling approaches and find out which one might be best for you.", | ||
| tags: ["Approaches", "Counseling"], | ||
| author: "Brian Martinez", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "Counseling for Families: What You Need to Know", | ||
| date: "July 10, 2024", | ||
| summary: "Family counseling can help resolve conflicts and improve communication. Here’s what you need to know.", | ||
| tags: ["Family", "Counseling"], | ||
| author: "Sarah Robinson", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "The Benefits of Group Counseling", | ||
| date: "July 12, 2024", | ||
| summary: "Group counseling offers unique benefits that individual sessions might not. Discover what group counseling can offer.", | ||
| tags: ["Group Counseling", "Benefits"], | ||
| author: "James Walker", | ||
| link: "#" | ||
| }, | ||
| { | ||
| title: "Counseling and Self-Care: A Perfect Match", | ||
| date: "July 14, 2024", | ||
| summary: "Learn how counseling and self-care go hand in hand in promoting mental health and overall well-being.", | ||
| tags: ["Self-Care", "Counseling"], | ||
| author: "Amanda Harris", | ||
| link: "#" | ||
| } | ||
| ]; | ||
|
|
||
| const Blogs = () => { | ||
| return ( | ||
| <div className="blogs-container"> | ||
| <header className="blogs-header"> | ||
| <h1>Our Latest Blogs</h1> | ||
| <p>Stay updated with our latest news and articles on counseling.</p> | ||
| </header> | ||
| <div className="blogs-list"> | ||
| {blogsData.map((blog, index) => ( | ||
| <div key={index} className="blog-card"> | ||
| <h2>{blog.title}</h2> | ||
| <p className="blog-date">{blog.date}</p> | ||
| <p>{blog.summary}</p> | ||
| <p className="blog-author">By: {blog.author}</p> | ||
| <div className="blog-tags"> | ||
| {blog.tags.map((tag, tagIndex) => ( | ||
| <span key={tagIndex} className="blog-tag">{tag}</span> | ||
| ))} | ||
| </div> | ||
| <div className="read-more-container"> | ||
| <a href={blog.link} className="read-more">Read More</a> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Blogs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters