Merge pull request #32 from prashantbhandary/dev/prashant/0.0.2

added new site with new css

Author: prashantbhandary

next.config-new.js

@@ -0,0 +1,19 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+  images: {
+    domains: ['robotics.wrc.edu.np', 'techfest.org'],
+    dangerouslyAllowSVG: true,
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+  },
+  typescript: {
+    ignoreBuildErrors: false,
+  },
+  eslint: {
+    ignoreDuringBuilds: false,
+  },
+}
+
+module.exports = nextConfig

package-new.json

@@ -0,0 +1,40 @@
+{
+  "name": "wrc-robotics-new",
+  "version": "1.0.0",
+  "description": "Modern WRC Robotics Club Website - Inspired by Techfest Design",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^14.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "framer-motion": "^10.16.4",
+    "lucide-react": "^0.292.0",
+    "react-intersection-observer": "^9.5.2",
+    "swiper": "^11.0.4",
+    "embla-carousel-react": "^8.0.0-rc17",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "@types/node": "^20.8.7",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "eslint": "^8.52.0",
+    "eslint-config-next": "^14.0.3",
+    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/forms": "^0.5.7"
+  }
+}

public/vercel.svg

@@ -21,33 +21,78 @@ export default function FeatureCardColumn({
 const styles = {
   card: {
     display: "flex",
-    alignItems: ["center", "flex-center"],
+    alignItems: "center",
     flexDirection: "column",
-    mb: -1,
-    textAlign: ["center", null, "center"],
-    px: [4, null, 0],
+    textAlign: "center",
+    p: [6, 7],
+    background: "rgba(255, 255, 255, 0.7)",
+    backdropFilter: "blur(20px)",
+    borderRadius: "2xl",
+    border: "1px solid rgba(255, 255, 255, 0.2)",
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.1)",
+    transition: "all 0.4s ease",
+    position: "relative",
+    overflow: "hidden",
+    
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: "linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(0, 212, 255, 0.05) 100%)",
+      opacity: 0,
+      transition: "opacity 0.4s ease",
+      pointerEvents: "none",
+    },
+    
+    "&:hover": {
+      transform: "translateY(-8px)",
+      boxShadow: "0 20px 40px rgba(99, 102, 241, 0.15)",
+      
+      "&::before": {
+        opacity: 1,
+      },
+    },
   },
+  
   img: {
-    mx: ["auto", null, 0],
-    ml: ["auto", null, "-13px"],
-    mb: -2,
-    width: ["80px", null, null, "90px", null, "auto"],
+    width: ["80px", "90px", "100px"],
+    height: ["80px", "90px", "100px"],
+    objectFit: "contain",
+    mb: 4,
+    filter: "drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1))",
+    transition: "transform 0.4s ease",
+    
+    ".card:hover &": {
+      transform: "scale(1.1)",
+    },
   },
+  
   wrapper: {
     width: "100%",
     display: "flex",
     flexDirection: "column",
+    position: "relative",
+    zIndex: 2,
+    
     title: {
-      fontSize: 3,
-      color: "heading_secondary",
-      lineHeight: 1.4,
-      fontWeight: 700,
-      mb: [2, null, 3],
+      fontSize: [3, 4],
+      color: "text",
+      lineHeight: 1.3,
+      fontWeight: "bold",
+      mb: 3,
+      fontFamily: "heading",
     },
+    
     subTitle: {
-      fontSize: 1,
-      fontWeight: 400,
-      lineHeight: "1.9",
+      fontSize: [1, 2],
+      fontWeight: "body",
+      lineHeight: "relaxed",
+      color: "text_secondary",
+      maxWidth: "280px",
+      mx: "auto",
     },
   },
 };

src/assets/ClubLogo.jpg

@@ -7,10 +7,11 @@ import {data} from "./key-feature.data";
 
 export default function KeyFeature() {
   return (
-    <section sx={{ variant: "section.KeyFeature" }} id="feature">
+    <section sx={styles.section} id="feature">
       <Container sx={styles.container}>
         <SectionHeader
-          title="Achievements"
+          title="Our Focus Areas"
+          subtitle="What We Do"
         />
         <Grid sx={styles.grid}>
           {data.map((item) => (
@@ -29,27 +30,47 @@ export default function KeyFeature() {
 }
 
 const styles = {
+  section: {
+    py: [80, 100, 120],
+    position: "relative",
+    background: "linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(0, 212, 255, 0.02) 50%, rgba(139, 92, 246, 0.02) 100%)",
+    
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: "url('/grid-pattern.svg')",
+      opacity: 0.03,
+      pointerEvents: "none",
+    },
+  },
+  
   container: {
-    marginTop: "100px",
+    position: "relative",
+    zIndex: 2,
   },
+  
   grid: {
-    width: ["100%", "80%", "100%"],
+    width: ["100%", "90%", "100%"],
     mx: "auto",
     gridGap: [
-      "35px 0",
-      null,
+      "40px",
+      "50px",
       "40px 40px",
       "50px 60px",
-      "30px",
+      "40px",
       "50px 40px",
-      "55px 90px",
+      "60px 50px",
     ],
     gridTemplateColumns: [
-      "repeat(1,1fr)",
-      null,
-      "repeat(2,1fr)",
-      null,
-      "repeat(4,1fr)",
+      "repeat(1, 1fr)",
+      "repeat(2, 1fr)",
+      "repeat(2, 1fr)",
+      "repeat(3, 1fr)",
     ],
+    mt: [60, 80],
   },
-};
+};