feat[PROFILE]: Rebased old static profile page from zephyr-old

.github/README.md

@@ -37,7 +37,7 @@
 ###### _<div align="right"><sub>// Installation</sub></div>_
 
 <p align="left">
-We use **pnpm** and **turbo** for managing the dependencies and the monorepo structutre. To install the dependencies and start the development server, run the following commands:
+We use <strong>pnpm</strong> and <strong>turbo</strong> for managing the dependencies and the monorepo structutre. To install the dependencies and start the development server, run the following commands:
 </p>
 
 > [!IMPORTANT]

apps/web/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@mui/icons-material": "^6.1.3",
     "@node-rs/argon2": "^2.0.0",
     "@prisma/client": "^5.20.0",
     "@radix-ui/react-avatar": "^1.1.1",

apps/web/src/components/Profile/ProfileFeedView.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type React from "react";
+
+import { Button } from "@/components/ui/button";
+import MyPosts from "@zephyr-ui/Profile/profileview/MyPosts";
+import Recommendations from "@zephyr-ui/Profile/profileview/RecommendedPeople";
+import RecommendedPosts from "@zephyr-ui/Profile/profileview/RecommendedPosts";
+import Skills from "@zephyr-ui/Profile/profileview/Skills";
+
+// Temporary static data
+const tempData = {
+  myPosts: {
+    blogs: [
+      {
+        title: "The Future of UX Design",
+        date: "2 days ago",
+        likes: 24,
+        comments: 8,
+        image: "/blogi.png"
+      },
+      {
+        title: "Designing for Accessibility",
+        date: "1 week ago",
+        likes: 56,
+        comments: 12,
+        image: "/placeholderii.jpg"
+      },
+      {
+        title: "Mobile-First Design Principles",
+        date: "2 weeks ago",
+        likes: 42,
+        comments: 15,
+        image: "/blogiii.png"
+      },
+      {
+        title: "Mobile-First Design Principles",
+        date: "2 weeks ago",
+        likes: 42,
+        comments: 15,
+        image: "/placeholderiii.jpg"
+      }
+    ],
+    researchPapers: [
+      {
+        title: "Impact of AI on UX Design Processes",
+        date: "1 month ago",
+        citations: 15
+      },
+      {
+        title: "User Behavior in AR Interfaces",
+        date: "3 months ago",
+        citations: 22
+      }
+    ]
+  },
+  recommendedPeople: [
+    {
+      name: "Leon Ward",
+      role: "CEO",
+      comment: "It was so good to work with Jean. She's very creative.",
+      avatar: "/useri.jpg"
+    },
+    {
+      name: "Keith Scott",
+      role: "Project Manager",
+      comment: "Jean is a super-talented individual with a constant eager...",
+      avatar: "/userii.jpg"
+    },
+    {
+      name: "Sarah Johnson",
+      role: "UX Designer",
+      comment: "Jean's insights have been invaluable to our team...",
+      avatar: "/useriii.jpg"
+    }
+  ],
+  skills: [
+    "UI",
+    "UX",
+    "UX Research",
+    "Responsive Web Design",
+    "Mobile design",
+    "Web UI",
+    "Wireframing",
+    "Branding",
+    "Usability Testing",
+    "UX Prototyping",
+    "UI Graphics"
+  ],
+  recommendedPosts: [
+    {
+      id: 1,
+      className: "md:col-span-2",
+      thumbnail: "/placeholderii.jpg",
+      title: "The Art of UX Design",
+      description:
+        "Exploring the principles and practices that make great user experiences."
+    },
+    {
+      id: 2,
+      className: "col-span-1",
+      thumbnail: "/placeholderiii.jpg",
+      title: "Mobile-First Design",
+      description:
+        "Why starting with mobile design leads to better overall user interfaces."
+    },
+    {
+      id: 3,
+      className: "col-span-1",
+      thumbnail: "/placeholderiv.jpg",
+      title: "The Future of AI in Design",
+      description:
+        "How artificial intelligence is shaping the future of design tools and processes."
+    },
+    {
+      id: 4,
+      className: "md:col-span-2",
+      thumbnail: "/placeholderv.jpg",
+      title: "Accessibility in Web Design",
+      description:
+        "Creating inclusive web experiences for users of all abilities."
+    },
+    {
+      id: 5,
+      className: "col-span-1",
+      thumbnail: "/blogii.png",
+      title: "The Art of UX Design",
+      description:
+        "Exploring the principles and practices that make great user experiences."
+    },
+    {
+      id: 6,
+      className: "md:col-span-2",
+      thumbnail: "/blogi.png",
+      title: "The Art of UX Design",
+      description:
+        "Exploring the principles and practices that make great user experiences."
+    },
+    {
+      id: 7,
+      className: "md:col-span-2",
+      thumbnail: "/blogiv.png",
+      title: "The Art of UX Design",
+      description:
+        "Exploring the principles and practices that make great user experiences."
+    },
+    {
+      id: 8,
+      className: "col-span-1",
+      thumbnail: "/blogiii.png",
+      title: "The Art of UX Design",
+      description:
+        "Exploring the principles and practices that make great user experiences."
+    },
+    {
+      id: 9,
+      className: "md:col-span-2 row-span-2",
+      thumbnail: "/Banner.png",
+      title: "The Art of UX Design",
+      description:
+        "Exploring the principles and practices that make great user experiences."
+    },
+    {
+      id: 10,
+      className: "col-span-1 row-span-2",
+      thumbnail: "/useri.jpg",
+      title: "The Art of UX Design",
+      description:
+        "Exploring the principles and practices that make great user experiences."
+    }
+  ]
+};
+
+const ProfileFeedView: React.FC = () => (
+  <motion.main
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    transition={{ duration: 0.5 }}
+    className="flex-1 overflow-auto bg-background p-8 text-foreground"
+  >
+    <motion.div
+      initial={{ y: -20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ delay: 0.2, duration: 0.5 }}
+      className="mb-6 flex items-center justify-between"
+    >
+      <h1 className="mb-2 text-left font-bold text-2xl text-muted-foreground uppercase">
+        User Profile
+      </h1>
+      <Button>Engage</Button>
+    </motion.div>
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 0.4, duration: 0.5 }}
+      className="space-y-4"
+    >
+      <MyPosts data={tempData.myPosts} />
+      <Skills skills={tempData.skills} />
+      <Recommendations people={tempData.recommendedPeople} />
+      <RecommendedPosts posts={tempData.recommendedPosts} />
+    </motion.div>
+  </motion.main>
+);
+
+export default ProfileFeedView;

apps/web/src/components/Profile/profileview/MyPosts.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { BookOpen, Edit, Plus, Settings, Upload } from "lucide-react";
+import type React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { DirectionAwareHover } from "@/components/ui/direction-aware-hover";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+interface MyPostsProps {
+  data: {
+    blogs: Array<{
+      title: string;
+      date: string;
+      likes: number;
+      comments: number;
+      image: string;
+    }>;
+    researchPapers: Array<{
+      title: string;
+      date: string;
+      citations: number;
+    }>;
+  };
+}
+
+const MyPosts: React.FC<MyPostsProps> = ({ data }) => (
+  <Card className="bg-card text-card-foreground">
+    <CardContent className="p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="font-semibold text-lg text-muted-foreground uppercase">
+          My Posts
+        </h2>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="sm"
+              className="bg-primary text-primary-foreground hover:bg-primary/90"
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              New Post
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuItem>
+              <Edit className="mr-2 h-4 w-4" /> Create Blog Post
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <BookOpen className="mr-2 h-4 w-4" /> Create Research Paper
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Upload className="mr-2 h-4 w-4" /> Upload Existing Post
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Settings className="mr-2 h-4 w-4" /> Manage Categories
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <Tabs defaultValue="blogs" className="mb-4">
+        <TabsList className="bg-muted">
+          <TabsTrigger
+            value="blogs"
+            className="text-muted-foreground transition-colors hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground"
+          >
+            Blogs
+          </TabsTrigger>
+          <TabsTrigger
+            value="research"
+            className="text-muted-foreground transition-colors hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground"
+          >
+            Research Papers
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="blogs">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {data.blogs.map((post, index) => (
+              <motion.div
+                key={index}
+                whileHover={{ scale: 1.05 }}
+                className="relative overflow-hidden rounded-lg shadow-md"
+              >
+                <div className="relative h-128 w-full">
+                  <DirectionAwareHover
+                    imageUrl={post.image}
+                    className="h-full w-full object-cover"
+                  >
+                    <div className="p-0">
+                      <h3 className="font-semibold text-white">{post.title}</h3>
+                      <p className="text-gray-300 text-sm">{post.date}</p>
+                      <div className="mt-2 flex items-center space-x-4">
+                        <span className="text-sm text-white">
+                          {post.likes} likes
+                        </span>
+                        <span className="text-sm text-white">
+                          {post.comments} comments
+                        </span>
+                      </div>
+                    </div>
+                  </DirectionAwareHover>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </TabsContent>
+        <TabsContent value="research">
+          <div className="space-y-4">
+            {data.researchPapers.map((paper, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between rounded-lg bg-muted p-4"
+              >
+                <div>
+                  <h3 className="font-semibold text-foreground">
+                    {paper.title}
+                  </h3>
+                  <p className="text-muted-foreground text-sm">{paper.date}</p>
+                </div>
+                <Badge variant="secondary">{paper.citations} citations</Badge>
+              </div>
+            ))}
+          </div>
+        </TabsContent>
+      </Tabs>
+    </CardContent>
+  </Card>
+);
+
+export default MyPosts;