read more section

Signed-off-by: Yash Khare <[email protected]>
keploy · Dec 18, 2024 · 4ad24f1 · 4ad24f1
1 parent cb4b4f7
commit 4ad24f1
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 19 deletions.
diff --git a/components/latest-post.tsx b/components/latest-post.tsx
@@ -1,3 +1,5 @@
+// components/latest-post.tsx
+
 import Avatar from "./avatar";
 import Date from "./date";
 import CoverImage from "./cover-image";
@@ -18,14 +20,17 @@ export default function LatestPost({
   author,
   slug,
   isCommunity,
-}) {
+}: Props) {
   const basePath = isCommunity ? "/community" : "/technology";
 
   return (
     <section>
-      <div className="bg-gray-100 border px-8 py-8 rounded-md flex flex-col lg:gap-x-8 mb-20 md:mb-28 content-center  lg:hover:shadow-md transition">
-        <h2 className="heading1  text-4xl lg:text-5xl font-bold leading-none mb-8">Our Latest Blog Post - </h2>
-        <div className="mb-8 w-full lg:mb-0 ">
+      <div className="bg-gray-100 border px-8 py-8 rounded-md flex flex-col lg:gap-x-8 mb-20 md:mb-28 relative lg:hover:shadow-md transition">
+        <h2 className="heading1 text-4xl lg:text-5xl font-bold leading-none mb-8">
+          Our Latest Blog Post -
+        </h2>
+
+        <div className="mb-8 w-full lg:mb-0">
           {coverImage && (
             <CoverImage
               title={title}
@@ -35,31 +40,57 @@ export default function LatestPost({
             />
           )}
         </div>
-        <div>
-          <div>
-            <h3 className="heading1  text-3xl lg:text-4xl font-bold leading-none">
-              <Link
-                href={`${basePath}/${slug}`}
-                className="hero-title-link title-link  bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:0px_10px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 hover:bg-[length:100%_10px] group-hover:bg-[length:100%_10px]"
-                dangerouslySetInnerHTML={{ __html: title }}
-              ></Link>
-            </h3>
-          </div>
-          <div className="flex items-center gap-4">
+
+        <div className="flex flex-col flex-1">
+          <h3 className="heading1 text-3xl lg:text-4xl font-bold leading-none mb-4">
+            <Link
+              href={`${basePath}/${slug}`}
+              className="hero-title-link title-link bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:0px_10px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 hover:bg-[length:100%_10px] group-hover:bg-[length:100%_10px]"
+              dangerouslySetInnerHTML={{ __html: title }}
+              aria-label={`Read more about ${title}`}
+            ></Link>
+          </h3>
+
+          <div className="flex items-center gap-4 mb-4">
             <Avatar author={author ? author : "Anonymous"} />
             <div className="divider bg-orange-700 h-1 w-1 rounded-full"></div>
-            <div className="text-md mb-4 pt-4">
+            <div className="text-md pt-1">
               <Date dateString={date} />
             </div>
           </div>
+
           <div>
             <div
               className="body xl:text-md text-md leading-relaxed mb-4 text-slate-600"
               dangerouslySetInnerHTML={{ __html: excerpt }}
             />
           </div>
+
+          <div className="mt-auto self-end">
+            <Link
+              href={`${basePath}/${slug}`}
+              className="text-orange-400 hover:text-orange-600 font-semibold flex items-center"
+              aria-label={`Read more about ${title}`}
+            >
+              Read More
+              <span className="ml-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                >
+                <path
+                    fillRule="evenodd"
+                    d="M7.707 14.707a1 1 0 010-1.414L10.586 10 7.707 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                    clipRule="evenodd"
+                />
+              </svg>
+              </span>
+            </Link>
+          </div>
         </div>
       </div>
     </section>
   );
-}
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -43,10 +43,10 @@ export default function Index({ communityPosts, technologyPosts, mostRecentPost,
                 <h2 className="heading1 font-bold 2xl:text-7xl text-6xl text-orange-400 text-center lg:text-left">
                   Keploy Blog
                 </h2>
-                <p className="content-body body 2xl:text-2xl text-lg mt-6 text-center lg:text-left">
+                <p className="content-body body 2xl:text-2xl text-lg mt-4 text-center lg:text-left">
                   Empowering your tech journey with expert advice and analysis
                 </p>
-                <div className="btn-wrapper flex flex-wrap gap-4 mt-6 justify-center lg:justify-start">
+                <div className="btn-wrapper flex flex-wrap gap-4 mt-4 justify-center lg:justify-start">
                   <Link
                     href="/technology"
                     className="relative px-4 py-1 overflow-hidden transition-all border border-black md:text-xl 2xl:text-2xl md:px-8 md:py-2 hover:border-orange-400 before:absolute before:bottom-0 before:left-0 before:top-0 before:z-0 before:h-full before:w-0 before:bg-orange-400 before:transition-all before:duration-250 rounded-xl hover:text-white hover:before:left-0 hover:before:w-full"