Enhancement: Footer | SignIn-Card | About section cards | UI improved (…

…#373) * Ui changes (Footer/ SignIn-Card/ About section cards) * update Footer.test.js file * remove redundant css, comments
TeamShiksha · Oct 2, 2024 · 64bfb24 · 64bfb24
1 parent bd7dd90
commit 64bfb24
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 63 deletions.
diff --git a/client/src/components/footer/Footer.css b/client/src/components/footer/Footer.css
@@ -2,7 +2,15 @@
 	width: 100%;
 	background-color: #f1f1f1;
 	display: flex;
+	flex-direction: column;
 	padding: 12px 0;
+	align-items: center;
+}
+
+.footer-top {
+	width: 100%;
+	display: flex;
+	padding: inherit;
 }
 
 .footer-left {
@@ -13,23 +21,21 @@
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 24px;
-	border-right: var(--border);
 }
 
 .footer-left ul {
 	display: flex;
-	flex-direction: column;
 	gap: 24px;
+	padding: 10px;
 }
 
 .footer-items {
 	text-decoration: none;
 	font-size: 16px;
-	font-weight: bold;
-	color: #222;
+	color: var(--smooth-purple);
+	font-weight: thin;
 	display: flex;
-	align-items: center;
-	padding: 0 10px;
+	/* justify-content: space-around; */
 	cursor: pointer;
 }
 
@@ -64,6 +70,7 @@
 
 .poweredBy {
 	display: flex;
+	margin: 10px 0px;
 	align-items: center;
 	justify-content: center;
 	border: 2px solid var(--smooth-purple);
@@ -72,7 +79,7 @@
 	cursor: pointer;
 	color: var(--smooth-purple);
 	font-weight: 700;
-	font-size: var(--medium-text);
+	font-size: var(--large-text);
 }
 
 .poweredBy img {
@@ -81,22 +88,44 @@
 	height: 18px;
 }
 
+hr {
+	border: none;
+	height: 1px;
+	background: linear-gradient(
+		to right,
+		rgba(211, 211, 211, 0),
+		lightgray,
+		rgba(211, 211, 211, 0)
+	);
+	width: 100%;
+}
+
 @media screen and (max-width: 768px) {
 	.footer {
 		flex-direction: column;
 		align-items: center;
 	}
 
+	.footer-top {
+		flex-direction: column;
+	}
+
 	.footer-left {
 		width: 100%;
 		border-right: none;
 	}
+
+	.footer ul {
+		align-items: center;
+	}
 }
 
 @media screen and (max-width: 480px) {
 	.footer-left {
 		flex-direction: column;
-		width: fit-content;
-		align-items: flex-start;
+	}
+	.footer-left ul {
+		display: flex;
+		flex-direction: column;
 	}
 }
diff --git a/client/src/components/footer/Footer.js b/client/src/components/footer/Footer.js
@@ -7,27 +7,31 @@ import './Footer.css';
 const Footer = () => {
 	return (
 		<footer className='footer'>
-			<section className='footer-left'>
-				{footerColumns.map((footerColumn, index) => (
-					<ul key={index}>
-						{footerColumn.map((footerLink, index) => (
+			<section className='footer-top'>
+				<section className='footer-left'>
+					<ul>
+						{footerColumns.map((footerLink, index) => (
 							<li key={index} className='footer-items'>
 								<NavLink className='nav-links' to={footerLink.link}>
 									{footerLink.name}
 								</NavLink>
 							</li>
 						))}
 					</ul>
-				))}
+				</section>
+
+				<section className='footer-right'>
+					<div className='footer-right-heading-container'>
+						<img src={businessLogo} alt='Brand logo' />
+						<h4>
+							Empower Your Branding: Logo Executive Where Logos Shine in Every
+							Size
+						</h4>
+					</div>
+				</section>
 			</section>
-			<section className='footer-right'>
-				<div className='footer-right-heading-container'>
-					<img src={businessLogo} alt='Brand logo' />
-					<h4>
-						Empower Your Branding: Logo Executive Where Logos Shine in Every
-						Size
-					</h4>
-				</div>
+			<hr />
+			<section className='footer-bottom'>
 				<section
 					className='poweredBy'
 					onClick={() => {

diff --git a/client/src/components/footer/footer.test.js b/client/src/components/footer/footer.test.js
@@ -16,7 +16,7 @@ describe('Footer', () => {
 				<Footer />
 			</BrowserRouter>,
 		);
-		expect(screen.getByText('Welcome')).toBeInTheDocument();
+		expect(screen.getByText('Home')).toBeInTheDocument();
 		expect(screen.getByText('Demo')).toBeInTheDocument();
 		expect(screen.getByText('About')).toBeInTheDocument();
 		expect(screen.getByText('Contact')).toBeInTheDocument();

diff --git a/client/src/components/header/Header.css b/client/src/components/header/Header.css
@@ -50,7 +50,7 @@
 
 .nav-links {
 	text-decoration: none;
-	color: #222;
+	/* color: var(--smooth-purple); */
 	font-size: var(--large-text);
 	font-weight: bold;
 	color: var(--black);

diff --git a/client/src/components/signincard/Signincard.css b/client/src/components/signincard/Signincard.css
@@ -60,7 +60,7 @@
 .input-actiontext {
 	margin: 10px 0px 30px;
 	display: flex;
-	justify-content: space-between;
+	justify-content: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
@@ -72,3 +72,7 @@
 .input-actiontext-link {
 	text-decoration: none;
 }
+
+.forgot-password-link {
+	margin-left: 50%;
+}
diff --git a/client/src/components/signincard/Signincard.js b/client/src/components/signincard/Signincard.js
@@ -93,6 +93,12 @@ function Signincard() {
 					onChange={handleFormChange}
 					disabled={loading}
 				/>
+				<div className='forgot-password-link'>
+					<NavLink to='/forgot-password' className='input-actiontext-link'>
+						Forgot Password
+					</NavLink>
+				</div>
+				<br />
 				<button
 					className='login-btn'
 					aria-label='Sign in to Dashboard'
@@ -108,9 +114,6 @@ function Signincard() {
 						Sign up
 					</NavLink>
 				</div>
-				<NavLink to='/forgot-password' className='input-actiontext-link'>
-					Forgot Password
-				</NavLink>
 			</section>
 		</div>
 	);

diff --git a/client/src/constants.js b/client/src/constants.js
@@ -1,18 +1,8 @@
 export const footerColumns = [
-	[
-		{name: 'Welcome', link: '/home'},
-		{
-			name: 'Demo',
-			link: '/home#demo',
-		},
-	],
-	[
-		{name: 'About', link: '/about'},
-		{
-			name: 'Contact',
-			link: '/about#contactus',
-		},
-	],
+	{name: 'Home', link: '/home'},
+	{name: 'Demo', link: '/home#demo'},
+	{name: 'About', link: '/about'},
+	{name: 'Contact', link: '/about#contactus'},
 ];
 
 export const loggedInNavbarItems = [

diff --git a/client/src/pages/about/About.css b/client/src/pages/about/About.css
@@ -1,33 +1,88 @@
 .about {
-	padding: 64px 32px 0px;
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	grid-gap: 50px 60px;
-	justify-items: center;
-	max-width: 1440px;
-	margin: 0 auto;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-evenly;
 }
 
 .about-section {
-	max-width: 600px;
+	background-color: #ffffff;
+	border-radius: 8px;
+	width: calc(45% - 1rem);
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	margin-bottom: 2rem;
+	margin-left: 2rem;
+	padding: 2rem;
+	transition: all 0.3s ease;
+}
+
+.about-section:hover {
+	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+	transform: translateY(-5px);
 }
 
 .about-section-heading {
-	font-size: 2rem;
-	margin-bottom: 18px;
-	color: #111827;
+	color: #333;
+	font-size: 1.8rem;
+	margin-bottom: 1rem;
+	position: relative;
+	padding-bottom: 0.5rem;
+}
+
+.about-section-heading::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 50px;
+	height: 3px;
+	background-color: #3498db;
+	transition: width 0.3s ease;
+}
+
+.about-section:hover .about-section-heading::after {
+	width: 100px;
 }
 
 .about-section-paragraph {
-	color: var(--description);
-	line-height: 24px;
-	font-size: var(--large-text);
-	line-height: 32px;
+	color: #666;
+	font-size: 1rem;
+	line-height: 1.6;
+}
+
+.about-section:hover .about-section-paragraph {
+	transform: scale(1.02);
+	transition: transform 0.3s ease;
 }
 
-@media screen and (max-width: 768px) {
-	.about {
-		padding: 32px 16px;
-		grid-template-columns: 1fr;
+@media (max-width: 768px) {
+	.about-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.about-section {
+		width: 100%;
+		margin: 5px;
 	}
+
+	.about-section {
+		padding: 1.5rem;
+	}
+
+	.about-section-heading {
+		font-size: 1.5rem;
+	}
+
+	.about-section-paragraph {
+		font-size: 0.9rem;
+	}
+}
+
+.about-section:nth-child(odd) {
+	background-color: #f9f9f9;
+}
+
+.about-section + .about-section {
+	border-top: 1px solid #eaeaea;
 }
diff --git a/client/src/pages/about/About.js b/client/src/pages/about/About.js
@@ -4,6 +4,7 @@ import './About.css';
 function About() {
 	return (
 		<>
+			<br />
 			<article className='about'>
 				<section className='about-section'>
 					<h2 className='about-section-heading'>Journey</h2>
@@ -56,12 +57,12 @@ function About() {
 						or a large enterprise, our offerings are tailored to suit businesses
 						of all scales, providing unparalleled convenience and affordability.
 						<br />
-						<br />
+						{/* <br />
 						Ready to elevate your brand with LogoExecutive? Join us today and
 						unlock a world of logo exploration possibilities. Visit our website
 						to generate API keys and start accessing logos in various sizes and
 						formats. Experience convenience, affordability, and exceptional
-						quality with LogoExecutive - your ultimate logo exploration partner.
+						quality with LogoExecutive - your ultimate logo exploration partner. */}
 					</p>
 				</section>
 			</article>