feat: page container layout, feature options added

app/dashboard/page.tsx

@@ -1,15 +1,17 @@
+import PageContent from "@/components/layouts/page-content";
 import DashboardFeatureList from "@/components/sections/dashboard-features-list";
 import DashboardRecentActivity from "@/components/sections/dashboard-recent-activity";
 import TopicSuggestions from "@/components/sections/topic-suggestions";
-import StatusAlert from "@/components/ui/status-alert";
 
 const Dashboard: React.FunctionComponent = () => {
     return (
-        <div className="dashboard">
-            <DashboardFeatureList />
-            <DashboardRecentActivity />
-            <TopicSuggestions />
-        </div>
+        <PageContent>
+            <div className="dashboard grid grid-cols-1 gap-20">
+                <DashboardFeatureList />
+                {/* <DashboardRecentActivity /> */}
+                {/* <TopicSuggestions /> */}
+            </div>
+        </PageContent>
     )
 }
 export default Dashboard;

app/globals.css

@@ -9,4 +9,9 @@
 
 h1, h2, h3, h4 {
     @apply tracking-tight;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+    width: 0;  /* Remove scrollbar space */
+    background: transparent;  /* Optional: just make scrollbar invisible */
 }

app/page.tsx

@@ -1,10 +1,14 @@
+import PageContent from "@/components/layouts/page-content";
+import ViewContainer from "@/components/layouts/view-container";
 import StatusAlert from "@/components/ui/status-alert";
 
 const App: React.FunctionComponent = () => {
   return (
-    <div className="app m-12">
-      <StatusAlert />
-    </div>
+    <PageContent>
+      <ViewContainer>
+        <StatusAlert />
+      </ViewContainer>
+    </PageContent>
   )
 }
 

components/layouts/page-content.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+const PageContent: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div className={cn("page-content my-10", className)} {...props}>
+      {children}
+    </div>
+  )
+};
+
+export default PageContent;

components/sections/dashboard-features-list/index.tsx

@@ -1,8 +1,43 @@
+import ViewContainer from "@/components/layouts/view-container";
+import FeatureOption from "@/components/ui/feature-option";
+import { Video } from "lucide-react";
+
+const FeatureList: Array<FeatureOptionInterface> = [
+  {
+    featureName: "Video Interview",
+    icon: <Video />
+  },
+  {
+    featureName: "ATS Resume Review",
+  },
+  {
+    featureName: "Topic Based Q/A"
+  },
+  {
+    featureName: "Mock Aptitude"
+  },
+  {
+    featureName: "Behavioural Rounds"
+  },
+]
 
 const DashboardFeatureList: React.FunctionComponent = () => {
   return (
     <section className="dashboard-features-list">
-      {"DashboardFeatureList"}
+      <ViewContainer>
+        <h3 className="text-lg font-semibold">
+          {"Start new activity"}
+        </h3>
+        <div className="features-list-container mt-3 flex flex-row gap-4 overflow-x-scroll hide-scrollbar">
+          {FeatureList.map((featureItem, featureIndex) => (
+            <FeatureOption
+              featureName={featureItem.featureName}
+              icon={featureItem.icon}
+              key={featureIndex}
+            />
+          ))}
+        </div>
+      </ViewContainer>
     </section>
   )
 }

components/ui/feature-option.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils"
+import Link from "next/link"
+
+const FeatureOption: React.FunctionComponent<FeatureOptionInterface> = ({
+  featureName,
+  icon,
+  className,
+  ...props
+}) => {
+  return (
+    <Link href={""}>
+      <div
+        className={cn("relative w-[240px] h-[140px] rounded-2xl border border-transparent bg-neutral-800 text-neutral-50 shadow hover:shadow-md transition-all")}
+        {...props}
+      >
+        {icon && <div className="absolute icon-wrapper top-4 right-4">{icon}</div>}
+        {<p className="absolute font-medium text-lg bottom-4 left-4">{featureName}</p>}
+      </div>
+    </Link>
+  )
+}
+
+export default FeatureOption;

types/feature-option.d.ts

@@ -0,0 +1,10 @@
+
+declare interface FeatureOptionInterface extends React.HTMLAttributes<HTMLDivElement> {
+  featureName: "Video Interview"
+  | "ATS Resume Review"
+  | "Topic Based Q/A"
+  | "Mock Aptitude"
+  | "Behavioural Rounds"
+  ;
+  icon?: React.ReactNode;
+};