Merge pull request #653 from hngprojects/feat/external-dynamic_pages

hngprojects · Jul 24, 2024 · 0da0a69 · 0da0a69
2 parents 7abf700 + 25300b0
commit 0da0a69
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 20 deletions.
diff --git a/public/images/blogPage/blogHero.svg b/public/images/blogPage/blogHero.svg
diff --git a/public/images/blogPage/utils/index.tsx b/public/images/blogPage/utils/index.tsx
@@ -4,4 +4,4 @@ export { default as blogCard2 } from "../../blogPage/blogCard2.png";
 export { default as blogCard4 } from "../../blogPage/blogCard4.png";
 export { default as blogCard5 } from "../../blogPage/blogCard5.png";
 export { default as blogCard6 } from "../../blogPage/blogCard1.png";
-export { default as blogHero } from "../../blogPage/blogHero.png";
+export { default as blogHero } from "../../blogPage/blogHero.svg";
diff --git a/src/app/(landing-routes)/blog/latest/page.tsx b/src/app/(landing-routes)/blog/latest/page.tsx
@@ -7,7 +7,7 @@ const LatestArticlesPage = () => {
 
   return (
     <>
-      <main className="mx-auto max-w-6xl px-5 py-5 md:px-10 md:py-5">
+      <main className="mx-auto px-5 py-5 md:px-10 md:py-5">
         <h1 className="text-[28px] font-[700] leading-[33.89px] text-neutral-dark-1 md:text-center md:text-[30px] md:leading-[43.57px] lg:text-[36px]">
           Latest Articles
         </h1>
@@ -27,7 +27,7 @@ const LatestArticlesPage = () => {
 
               return (
                 <div
-                  className="mx-auto w-fit border-b-neutral-dark-1 md:border-b"
+                  className="mx-auto flex w-full items-center justify-center"
                   key={index}
                 >
                   <BlogCard

diff --git a/src/app/(landing-routes)/blog/page.tsx b/src/app/(landing-routes)/blog/page.tsx
@@ -65,11 +65,11 @@ const BlogHome = () => {
   return (
     <div>
       <HeroSection />
-      <div className="container flex flex-col">
+      <div className="flex w-full flex-col px-[5%]">
         <h1 className="mb-6 mt-12 text-3xl font-bold text-[#525252]">
           Recent Blog Posts
         </h1>
-        <div className="container grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
           {blogPosts.map((post, index) => (
             <BlogCard
               key={index}
@@ -88,7 +88,7 @@ const BlogHome = () => {
           variant="primary"
           size="lg"
           ariaLabel="Show More Articles"
-          href="#"
+          href="/blog/latest"
         >
           Show More Articles
         </CustomButton>

diff --git a/src/components/common/blogCard/BlogCard.tsx b/src/components/common/blogCard/BlogCard.tsx
@@ -29,10 +29,10 @@ const BlogCard = (properties: blogCardProperties) => {
   }, []);
 
   return (
-    <div className="flex items-center justify-center">
+    <div className="flex items-center justify-center border-b border-b-neutral-dark-1 py-3 lg:w-[70%]">
       <Card
         data-testid="mobile-element"
-        className="flex w-[100%] flex-col-reverse items-center border-none bg-transparent shadow-none md:w-[70%] lg:w-[890px] lg:flex-row"
+        className="flex w-full flex-col items-center border-none bg-transparent shadow-none lg:flex-row"
       >
         <CardHeader className="flex-auto lg:flex-1">
           <div
@@ -86,7 +86,7 @@ const BlogCard = (properties: blogCardProperties) => {
             src={properties.blogImage}
             alt="author"
             className="rounded-0 h-full w-full object-cover md:rounded-[8px]"
-            width={900}
+            width={600}
             height={100}
           />
         </Link>

diff --git a/src/components/extDynamicPages/blogCollection/BlogPageHero.tsx b/src/components/extDynamicPages/blogCollection/BlogPageHero.tsx
@@ -5,17 +5,17 @@ import { blogHero } from "../../../../public/images/blogPage/utils";
 
 const HeroSection: React.FC = () => {
   return (
-    <div className="relative h-[80vh] text-white">
-      <div className="absolute inset-0 z-20 bg-black/20"></div>
+    <div className="relative h-[80vh] text-white md:mx-[5%]">
+      <div className="absolute inset-0 z-20 h-full w-full bg-black/20"></div>
       <Image
         src={blogHero}
-        fill
-        className="absolute inset-0 object-center"
+        layout="fill"
+        className="absolute inset-0 object-cover"
         alt="Hero Background"
       />
       <div className="relative z-30 flex h-full flex-col items-start justify-end px-[5%] pb-16 text-center md:text-left">
-        <div className="w-full py-5 md:w-[55%]">
-          <h1 className="mb-4 text-left text-3xl font-bold leading-[2.3rem] md:leading-[4.6rem] 2xl:text-6xl">
+        <div className="w-full py-5 md:w-[50%]">
+          <h1 className="mb-4 text-left text-3xl font-bold leading-[2.3rem] lg:leading-[2.4rem] 2xl:text-6xl">
             Unlock Industry Insights: Get Essential Tips & Boilerplate Hacks
           </h1>
         </div>

diff --git a/src/components/layouts/BlogCards/index.tsx b/src/components/layouts/BlogCards/index.tsx
@@ -25,20 +25,20 @@ const BlogCard: React.FC<BlogCardProperties> = ({
         <Image
           src={image}
           height={288}
-          width={512}
-          style={{ objectFit: "contain" }}
-          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          width={620}
           className="rounded-t-lg object-cover"
           alt={title}
         />
         <span
-          className={`max-w-1/2 absolute left-4 top-4 flex w-1/4 items-center justify-center rounded-full px-2 py-1.5 text-xs font-semibold capitalize tracking-wide text-white ${labelClassName}`}
+          className={`absolute left-4 top-4 flex items-center justify-center rounded-full px-2 py-1.5 text-xs font-semibold capitalize tracking-wide text-white ${labelClassName}`}
         >
           {category}
         </span>
       </div>
       <CardHeader>
-        <CardTitle>{title}</CardTitle>
+        <CardTitle>
+          <div className="text-lg">{title}</div>
+        </CardTitle>
       </CardHeader>
       <CardContent>
         <div className="flex items-center justify-between text-sm text-[#0A0A0A] text-muted-foreground">