feat: created super admin navbar

.github/workflows/dev-cicd.yml

@@ -43,6 +43,9 @@ jobs:
       - name: Lint code
         run: pnpm lint
 
+      - name: Build email
+        run: pnpm email:build
+
       - name: Build project
         run: pnpm build
 

.github/workflows/prod-cicd.yml

@@ -43,6 +43,9 @@ jobs:
       - name: Lint code
         run: pnpm run lint
 
+      - name: Build email
+        run: pnpm email:build
+
       - name: Build project
         run: pnpm run build
 

.github/workflows/staging-cicd.yml

@@ -43,6 +43,9 @@ jobs:
       - name: Lint code
         run: pnpm run lint
 
+      - name: Build email
+        run: pnpm email:build  
+
       - name: Build project
         run: pnpm run build
 

app/components/BlogCards.tsx

@@ -1,5 +1,3 @@
-import type { FC } from "react";
-
 interface BlogCardProperties {
   title: string;
   description: string;
@@ -12,7 +10,7 @@ interface BlogCardProperties {
   link: string;
 }
 
-const BlogCard: FC<BlogCardProperties> = ({
+const BlogCard: React.FC<BlogCardProperties> = ({
   title,
   description,
   date,
@@ -29,6 +27,7 @@ const BlogCard: FC<BlogCardProperties> = ({
       <div className="p-4 lg:order-1 lg:w-2/3">
         <div className="mb-2 flex items-center">
           <span className="mr-2 inline-block h-3 w-3 rounded-full bg-gray-400"></span>
+
           <span className="text-sm font-semibold text-gray-700">{tag}</span>
         </div>
         <div>

app/components/BlogPost.tsx

@@ -0,0 +1,75 @@
+import RecentBlogCard from "./RecentBlogCard";
+import { Button } from "./ui/button";
+
+const blogPosts = [
+  {
+    title: "The Power of Networking: How to Build Meaningful connections",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/business.jpg",
+    description: "Business",
+    variant: 0,
+  },
+  {
+    title: "The Global Impact of Climate Change: A Look at the Evidence",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/nature.png",
+    description: "World News",
+    variant: 1,
+  },
+  {
+    title: "5 Easy and Delicious Recipes for Busy Weeknights",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/food1.jpg",
+    description: "Food",
+    variant: 2,
+  },
+  {
+    title: "5 Simple Habits to Improve Your Mental Wellbeing",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/yoga.jpg",
+    description: "Lifestyle",
+    variant: 3,
+  },
+  {
+    title: "The Ultimate Guide to Dressing Stylishly with Fewer Clothes",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/fashion.jpg",
+    description: "Fashion",
+    variant: 4,
+  },
+  {
+    title: "The Future of Travel: What Will the World Look Like in 2030?",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/person with glasses.jpg",
+    description: "World News",
+    variant: 5,
+  },
+];
+
+const BlogPost = () => {
+  return (
+    <section className="my-10 flex w-[100%] flex-col overflow-hidden md:px-10 lg:px-[100px]">
+      <h3 className="my-5 px-4 text-[28px] font-bold text-[#525252]">
+        Recent Blog posts
+      </h3>
+      <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 lg:pr-7">
+        {blogPosts.map((post, index) => (
+          <RecentBlogCard href={"/"} key={index} {...post} />
+        ))}
+      </div>
+      <div className="my-11 flex items-center justify-center">
+        <Button className="hover:default-foreground mt-4 bg-primary px-7">
+          Show More Articles
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export default BlogPost;

app/components/CommentBox.tsx

@@ -0,0 +1,69 @@
+import {
+  Forward,
+  MessageCircle,
+  Share2,
+  ThumbsDown,
+  ThumbsUp,
+} from "lucide-react";
+
+type CommentProperties = {
+  userPicUrl: string;
+  userDisplayName: string;
+  userTagName: string;
+  commentContent: string;
+  pubDate: string;
+  likeCount: number;
+};
+
+const CommentBox = ({
+  userPicUrl,
+  userDisplayName,
+  userTagName,
+  commentContent,
+  pubDate,
+  likeCount,
+}: CommentProperties) => {
+  return (
+    <div className="flex w-full max-w-[54rem] items-start gap-[0.75rem] self-stretch rounded-[.5rem] border-[.8px] border-solid border-[#cbd5e1] bg-white px-[1rem] py-[1.2rem] lg:py-4">
+      <img src={userPicUrl} alt="Profile Pic" className="h-10 w-10" />
+      <div className="flex flex-col gap-[.88rem]">
+        <div className="flex flex-col gap-[.25rem] lg:gap-[.38rem]">
+          <h1 className="font-inter w-fit text-base font-semibold text-[#0a0a0a] lg:text-2xl">
+            {userDisplayName}
+          </h1>
+          <p className="font-inter text-xs font-medium text-[#71717a] lg:text-sm">
+            @{userTagName}
+          </p>
+        </div>
+        <div className="comment-content font-inter w-full text-sm font-normal text-[#71717a] lg:text-base">
+          {commentContent}
+        </div>
+        <div className="mt-[-.13rem] flex gap-3">
+          <p className="font-inter text-xs font-normal text-[#525252]">
+            {pubDate}
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <button className="like-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <ThumbsUp size={20} strokeWidth={1.5} color="#0A0A0A" />
+            <p className="font-inter">{likeCount !== 0 && likeCount}</p>
+          </button>
+          <button className="dislike-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <ThumbsDown size={20} strokeWidth={1.4} color="#0A0A0A" />
+          </button>
+          <button className="share-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <Share2 size={20} strokeWidth={1.4} color="#0A0A0A" />
+          </button>
+          <button className="forward-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <Forward size={20} strokeWidth={1.4} color="#0A0A0A" />
+          </button>
+          <button className="reply-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <MessageCircle size={20} strokeWidth={1.4} color="#0A0A0A" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CommentBox;

app/components/Dialog/Dialog.tsx

@@ -0,0 +1,56 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
+import { Button } from "~/components/ui/button";
+
+type Variants =
+  | "default"
+  | "destructive"
+  | "outline"
+  | "link"
+  | "ghost"
+  | "secondary";
+
+type DialogProperties = {
+  headerText: string;
+  description?: string;
+  footer: React.ReactNode[];
+  triggerText: string;
+  variants: Variants | null | undefined;
+};
+
+export default function Dialog({
+  headerText,
+  description,
+  footer,
+  triggerText,
+  variants,
+}: DialogProperties) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant={variants}>{triggerText}</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{headerText}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="gap-2">
+          {footer.map((item, index) => (
+            <AlertDialogAction key={index} asChild>
+              {item}
+            </AlertDialogAction>
+          ))}
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

app/components/EmailSubRenewal/EmailRenewal.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+
+import { Button } from "../../components/ui/button";
+
+export interface SubscriptionProperties {
+  title: string;
+  name: string;
+  image: string;
+  email: string;
+  renewalDate: string;
+  renewalPrice: string;
+  renewalPeriod: string;
+  reviewSubscriptionLink: string;
+  renewSubscriptionLink: string;
+}
+
+const Subscription: React.FC<SubscriptionProperties> = ({
+  title,
+  name,
+  image,
+  email,
+  renewalDate,
+  renewalPrice,
+  renewalPeriod,
+  reviewSubscriptionLink,
+  renewSubscriptionLink,
+}) => {
+  return (
+    <div className="relative flex w-full flex-col items-center justify-start overflow-hidden bg-white text-left font-[Inter] text-5xl text-black">
+      <div className="flex flex-col items-center justify-start gap-[56px] self-stretch bg-white p-14 text-base">
+        <img className="relative h-[178px] w-[200.2px]" alt="" src={image} />
+        <div className="text-neutral-colors-dark-2 flex flex-col items-center justify-center self-stretch text-center text-xl md:text-5xl lg:text-5xl">
+          <div className="relative self-stretch font-semibold">{title}</div>
+        </div>
+        <div className="flex flex-col items-center justify-center gap-[32px] self-stretch">
+          <div className="flex flex-col items-start justify-start self-stretch text-lg">
+            <div className="relative self-stretch font-semibold">
+              Hi {name},
+            </div>
+          </div>
+          <div className="flex flex-col items-center justify-start gap-[28px] self-stretch text-neutral-500">
+            <div className="relative self-stretch">
+              We hope you are enjoying your subscription, which will renew soon.
+            </div>
+            <div className="box-border flex w-full flex-col items-center justify-start gap-[4px] overflow-hidden bg-[#f97316] px-0 py-10 text-center text-white">
+              <div className="relative self-stretch leading-[27px]">
+                Your Renewal Date
+              </div>
+              <b className="text-neutral-colors-white relative self-stretch text-xl md:text-5xl lg:text-5xl">
+                {renewalDate}
+              </b>
+            </div>
+            <div className="relative self-stretch">
+              <span>
+                <span className="font-body-medium-small">{`Your subscription for `}</span>
+                <span className="font-body-medium-small font-semibold">
+                  {renewalPrice}/{renewalPeriod} features
+                </span>
+                <span>{` will automatically renew on ${renewalDate}. To avoid being charged, you should cancel at least a day before the renewal date. To learn more or cancel, `}</span>
+              </span>
+              <span className="font-semibold text-[#f97316]">
+                review subscription
+              </span>
+              <span>.</span>
+            </div>
+            <div className="relative self-stretch">
+              To keep your subscription, you can renew your plan for the next
+              month.
+            </div>
+          </div>
+          <Button className="box-border flex h-11 flex-row items-center justify-center rounded-lg bg-[#f97316] px-10 py-2 text-center text-white">
+            {renewSubscriptionLink}
+          </Button>
+        </div>
+        <div className="flex flex-col items-start justify-center gap-[8px] self-stretch text-sm">
+          <div className="relative self-stretch font-medium">Regards,</div>
+          <div className="relative self-stretch font-medium">Boilerplate</div>
+        </div>
+        <div className="relative self-stretch text-neutral-500">
+          <span className="font-body-medium-small text-neutral-500">{`If you have questions, please visit our `}</span>
+          <span className="font-body-medium-small font-semibold text-[#f97316]">
+            FAQs
+          </span>
+          <span className="font-body-medium-small">
+            <span className="text-neutral-500">{`, or email us at `}</span>
+            <span className="text-[#f97316]">{email}</span>
+            <span>{`. Our team can answer questions about your subscription status. To unsubscribe from future subscription renewal reminders, `}</span>
+          </span>
+          <span>
+            <span className="font-semibold [text-decoration:underline]">
+              click here {reviewSubscriptionLink}
+            </span>
+            <span className="font-body-medium-small">.</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Subscription;

app/components/HeroSection.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { Button } from "./ui/button";
+
+const HeroSection: React.FC = () => {
+  return (
+    <div className="relative flex w-full items-center lg:mx-[120px] lg:w-[81%]">
+      <img
+        src="/public/images/herosectionImg.jpg"
+        alt="hero img"
+        className="w-full"
+      />
+      <div className="top-15 absolute px-10 lg:bottom-16">
+        <h5 className="text-3 inset-0 font-bold text-white lg:text-[36px] lg:leading-[48px]">
+          Unlock Industry Insights: Get <br />
+          Essential Tips & Boilerplate <br /> Hacks
+        </h5>
+
+        <Button className="hover:default-foreground mt-4 bg-primary px-7">
+          {" "}
+          Read More
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default HeroSection;