updated

components.json

@@ -7,11 +7,13 @@
     "config": "tailwind.config.ts",
     "css": "src/app/globals.css",
     "baseColor": "slate",
-    "cssVariables": true,
+    "cssVariables": false,
     "prefix": ""
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "magicui": "@/components/magicui"
   }
 }

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.3.30",
     "lucide-react": "^0.436.0",
     "next": "14.2.6",
     "react": "^18",

src/app/globals.css

@@ -1,69 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+

src/app/page.tsx

@@ -1,115 +1,68 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Card, CardContent, CardHeader } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-import { Menu, X } from "lucide-react"
-import AttendanceTracker from "@/components/AttendanceTracker"
-import Features from "@/components/Features"
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu"
-import Link from "next/link"
+import { useState } from 'react';
+import HomePage from '@/components/HomePage';
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
-export default function Component() {
-  const [isAttendanceTrackerOpen, setIsAttendanceTrackerOpen] = useState(false)
-  const [activeTab, setActiveTab] = useState("home")
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
+export default function Home() {
+  const [showDashboard, setShowDashboard] = useState(false);
+  const [activeTab, setActiveTab] = useState("home");
 
   const webPages = [
-    { name: "Uni-Notes", url: "https://uni-notes.netlify.app/" },
-    { name: "ERP", url: "https://erp.bits-pilani.ac.in/" },
-    { name: "ACM Library", url: "https://openlib-cs.acmbpdc.org/" },
-    { name: "GDSC Resources", url: "https://gdscbpdc.github.io" }
-  ]
+    { name: "Uni-Notes", url: "https://uninotes.com" },
+    { name: "ERP", url: "https://erp.bits-pilani.ac.in" },
+    // Add other web pages as needed
+  ];
+
+  if (!showDashboard) {
+    return <HomePage onEnter={() => setShowDashboard(true)} />;
+  }
 
   return (
     <div className="min-h-screen w-full bg-gray-100 p-2 sm:p-4 md:p-6">
       <Card className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg mb-6">
-        <CardHeader className="flex flex-col space-y-2 border-b border-gray-200 bg-gray-50 px-4 py-4">
-          <div className="flex justify-between items-center">
-            <div className="hidden md:block">
-              <NavigationMenu>
-                <NavigationMenuList>
-                  <NavigationMenuItem>
-                    <NavigationMenuTrigger onClick={() => setActiveTab("home")}>Home</NavigationMenuTrigger>
-                  </NavigationMenuItem>
-                  <NavigationMenuItem>
-                    <NavigationMenuTrigger onClick={() => setActiveTab("features")}>Features</NavigationMenuTrigger>
-                  </NavigationMenuItem>
-                  <NavigationMenuItem>
-                    <NavigationMenuLink className={navigationMenuTriggerStyle()} onClick={() => setIsAttendanceTrackerOpen(true)}>
-                      Attendance Tracker
-                    </NavigationMenuLink>
-                  </NavigationMenuItem>
-                </NavigationMenuList>
-              </NavigationMenu>
-            </div>
-            <Button variant="outline" size="icon" className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
-              {isMenuOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
-            </Button>
-            <Input className="w-full max-w-[200px]" placeholder="Search..." />
-          </div>
-          {isMenuOpen && (
-            <div className="flex flex-col space-y-2 md:hidden">
-              <Button 
-                variant={activeTab === "home" ? "default" : "outline"} 
-                onClick={() => { setActiveTab("home"); setIsMenuOpen(false); }}
-                className="w-full"
+        <CardHeader className="border-b border-gray-200 bg-gray-50 p-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-xl font-bold">University Dashboard</h2>
+            <div className="flex space-x-2">
+              <Button
+                variant={activeTab === "home" ? "default" : "outline"}
+                onClick={() => setActiveTab("home")}
               >
-                Home page
+                Home
               </Button>
-              <Button 
-                variant={activeTab === "features" ? "default" : "outline"} 
-                onClick={() => { setActiveTab("features"); setIsMenuOpen(false); }}
-                className="w-full"
+              <Button
+                variant={activeTab === "features" ? "default" : "outline"}
+                onClick={() => setActiveTab("features")}
               >
                 Features
               </Button>
-              <Button 
-                variant="outline" 
-                onClick={() => { setIsAttendanceTrackerOpen(true); setIsMenuOpen(false); }}
-                className="w-full"
-              >
-                Attendance Tracker
-              </Button>
             </div>
-          )}
+          </div>
         </CardHeader>
         <CardContent className="p-2 sm:p-4">
           {activeTab === "home" && (
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {webPages.map((page, index) => (
-                <div key={index} className="border rounded-lg overflow-hidden h-[400px] sm:h-[500px] md:h-[600px]">
-                  <h3 className="bg-gray-100 p-2 font-semibold text-sm">{page.name}</h3>
-                  <iframe 
-                    src={page.url} 
-                    title={page.name} 
-                    width="100%" 
-                    height="100%" 
-                    className="border-0"
-                  />
+                <div key={index} className="border rounded-lg p-4">
+                  <h3 className="font-semibold mb-2">{page.name}</h3>
+                  <div className="h-[400px] sm:h-[500px] md:h-[600px]">
+                    <iframe 
+                      src={page.url} 
+                      title={page.name} 
+                      width="100%" 
+                      height="100%" 
+                      className="border-0"
+                    />
+                  </div>
                 </div>
               ))}
             </div>
           )}
-          {activeTab === "features" && <Features />}
+          {activeTab === "features" && <div>Features content here</div>}
         </CardContent>
-
-        <Dialog open={isAttendanceTrackerOpen} onOpenChange={setIsAttendanceTrackerOpen}>
-          <DialogContent className="w-[90vw] max-w-[400px] sm:max-w-[600px]">
-            <AttendanceTracker />
-          </DialogContent>
-        </Dialog>
       </Card>
     </div>
-  )
+  );
 }

src/components/About.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Card, CardContent } from "@/components/ui/card";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+
+export default function About() {
+  return (
+    <div className="flex min-h-screen bg-gray-100">
+      {/* Left Sidebar */}
+      <aside className="w-64 bg-white p-6 shadow-md">
+        <h2 className="text-lg font-semibold mb-4">About Us</h2>
+        <nav>
+          <ul className="space-y-2">
+            <li><a href="#university" className="text-blue-600 hover:underline">Our University</a></li>
+            <li><a href="#courses" className="text-blue-600 hover:underline">Courses & Requirements</a></li>
+            <li><a href="#admissions" className="text-blue-600 hover:underline">Admissions</a></li>
+            <li><a href="#campus-life" className="text-blue-600 hover:underline">Campus Life</a></li>
+          </ul>
+        </nav>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 p-8">
+        <h1 className="text-3xl font-bold mb-6">About BITS Pilani Dubai Campus</h1>
+
+        <section id="university" className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Our University</h2>
+          <p>BITS Pilani Dubai Campus is a premier institution of higher education known for its excellence in engineering and technology. As part of the renowned BITS Pilani network, we offer world-class education with a focus on innovation and practical learning.</p>
+        </section>
+
+        <section id="courses" className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Courses & Requirements</h2>
+          <Accordion type="single" collapsible>
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Core Subjects and Electives</AccordionTrigger>
+              <AccordionContent>
+                <ul className="list-disc pl-5 space-y-2">
+                  <li><strong>Core Subjects:</strong> All core subjects must be completed by the end of the graduation program.</li>
+                  <li><strong>Humanities Electives:</strong> Three humanities electives are required.</li>
+                  <li><strong>Discipline Electives:</strong> Five discipline electives are required.</li>
+                  <li><strong>Open Electives:</strong> Five open electives are required.</li>
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+              <AccordionTrigger>Design Projects</AccordionTrigger>
+              <AccordionContent>
+                <p>It is recommended to incorporate more design projects starting in the second or third year to reduce workload in the fourth year.</p>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3">
+              <AccordionTrigger>Degree Programs</AccordionTrigger>
+              <AccordionContent>
+                <ul className="list-disc pl-5 space-y-2">
+                  <li>B.E. Computer Science</li>
+                  <li>B.E. Electrical and Electronics Engineering</li>
+                  <li>B.E. Mechanical Engineering</li>
+                  <li>B.E. Biotechnology</li>
+                  <li>B.E. Software Systems</li>
+                  <li>B.E. Microelectronics</li>
+                  <li>Executive MBA</li>
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </section>
+      </main>
+
+      {/* Right Sidebar */}
+      <aside className="w-64 bg-white p-6 shadow-md">
+        <h2 className="text-lg font-semibold mb-4">On this page</h2>
+        <nav>
+          <ul className="space-y-2">
+            <li><a href="#university" className="text-gray-600 hover:text-blue-600">Our University</a></li>
+            <li><a href="#courses" className="text-gray-600 hover:text-blue-600">Courses & Requirements</a></li>
+            <li><a href="#admissions" className="text-gray-600 hover:text-blue-600">Admissions</a></li>
+            <li><a href="#campus-life" className="text-gray-600 hover:text-blue-600">Campus Life</a></li>
+          </ul>
+        </nav>
+      </aside>
+    </div>
+  );
+}