Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
Binary file not shown.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
24 changes: 24 additions & 0 deletions class-community-landing-page/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
34 changes: 34 additions & 0 deletions class-community-landing-page/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Class Community Landing Page

A modern, responsive landing page for educational communities, built with React and styled using Tailwind CSS. This project aims to create an engaging and user-friendly interface for educational institutions to showcase their community and programs.

## Tech Stack

- **React 19**: Chosen for its component-based architecture and efficient rendering capabilities
- **Vite**: Fast build tool and development server for optimal development experience
- **Tailwind CSS**: Utility-first CSS framework for rapid UI development and consistent styling
- **Swiper.js**: For creating smooth, touch-enabled sliders and carousels
- **Framer Motion**: For adding fluid animations and transitions
- **Radix UI**: For accessible, unstyled UI components
- **DaisyUI**: Component library built on top of Tailwind CSS
- **Font Awesome**: For scalable vector icons

## Usage / Demo

1. After starting the development server, open your browser to `http://localhost:5173`
2. The landing page will be fully interactive with all components and animations
3. Use the navigation menu to explore different sections
4. Test the responsive design by resizing your browser window

## Code Overview

- `src/Components/`: Contains all React components
- Navigation components for site navigation
- UI components for reusable elements
- Layout components for page structure
- `src/assets/`: Stores static assets like images and icons
- `src/styles/`: Contains global styles and Tailwind configurations
- `src/App.jsx`: Main application component
- `src/main.jsx`: Application entry point


33 changes: 33 additions & 0 deletions class-community-landing-page/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'

export default [
{ ignores: ['dist'] },
{
files: ['**/*.{js,jsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...reactHooks.configs.recommended.rules,
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
]
19 changes: 19 additions & 0 deletions class-community-landing-page/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading