Chore update categories #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

CijeTheCreator wants to merge 159 commits into himspired1:main from CijeTheCreator:chore-update-categories

.gitignore

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ @@
     # testing
     /coverage
+    *.lcov
     # next.js
     /.next/
@@ Expand Down Expand Up / @@ -39,3 +40,12 @@ yarn-error.log* @@
     # typescript
     *.tsbuildinfo
     next-env.d.ts
+    # logs
+    /logs
+    *.log
+    # test results
+    /test-results
+    /playwright-report
+    /playwright/.cache

README.md

-Original file line number
+Diff line change
@@ -1,36 +1,169 @@
-    This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+    # Himspired - Fashion E-commerce Website
-    ## Getting Started
+    ## Overview
+    Himspired is a premium fashion e-commerce platform that bridges the gap between thrift and luxury fashion. The brand offers a curated collection of clothing items across four main categories: Thrifts, Luxury, Vintage, and Modern. With a sleek, modern design and smooth user experience, Himspired aims to redefine style by making premium fashion accessible to everyone.
+    ## Features
+    - **Interactive Product Carousel**: Smooth, animated carousel showcasing different product categories
+    - **Responsive Design**: Fully responsive layout that adapts to all device sizes
+    - **Animated UI Elements**: Subtle animations and transitions for an engaging user experience
+    - **Category Navigation**: Easy navigation between different product categories
+    - **Loader Animation**: Branded loading animation for a polished first impression
+    - **Newsletter Subscription**: Email subscription functionality with validation
+    - **About Us Section**: Brand story and team showcase
+    - **Contact Form**: User-friendly contact form for inquiries
+    ## Technologies Used
-    First, run the development server:
+    - **Next.js 14**: React framework with App Router for server-side rendering and routing
+    - **TypeScript**: Type-safe JavaScript for better development experience
+    - **Tailwind CSS**: Utility-first CSS framework for styling
+    - **Framer Motion**: Animation library for smooth transitions and effects
+    - **Embla Carousel**: Lightweight carousel component
+    - **Lucide React**: Modern icon set
+    - **Geist Fonts**: Typography from Vercel's design system
+    - **Shadcn UI**: Reusable UI components
-    ```bash
-    npm run dev
-    # or
-    yarn dev
-    # or
-    pnpm dev
-    # or
-    bun dev
+    ## Project Structure
+    ```text
+    src/
+    ├── app/ # Next.js App Router
+    │ ├── _Home/ # Home page components
+    │ ├── about/ # About page
+    │ ├── cart/ # Shopping cart
+    │ ├── contact/ # Contact page
+    │ ├── shop/ # Shop page
+    │ ├── globals.css # Global styles
+    │ └── layout.tsx # Root layout
+    ├── components/ # Reusable components
+    │ ├── common/ # Common UI elements
+    │ ├── layout/ # Layout components
+    │ ├── pages/ # Page-specific components
+    │ ├── product/ # Product-related components
+    │ └── ui/ # UI components from shadcn
+    ├── constants/ # Constants and configuration
+    ├── data/ # Data files
+    ├── hooks/ # Custom React hooks
+    ├── lib/ # Utility functions
+    └── redux/ # State management
     ```
-    Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+    ### Key Components
+    - **Products.tsx**: Main product carousel with category navigation
+    - **ProductSection.tsx**: Reusable component for displaying products in a grid
+    - **Loader.tsx**: Loading animation with brand name reveal
+    - **Newsletter.tsx**: Newsletter subscription component
+    - **Navbar.tsx**: Navigation bar with responsive design
+    - **Footer.tsx**: Site footer with links and social media
+    ## Getting Started
+    ### Prerequisites
+    - Node.js 18.x or higher
+    - npm or yarn
+    ### Installation
+. Clone the repository:
+       ```bash
+       git clone <https://github.com/yourusername/himspired.git>
+       cd himspired
+       ```
+. Install dependencies:
+       ```bash
+       npm install
+       # or
+       yarn install
+       ```
+. Run the development server:
+       ```bash
+       npm run dev
+       # or
+       yarn dev
+       ```
+. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+    ## Usage
+    ### Home Page
+    The home page features a product carousel showcasing different categories. Users can:
+    - Navigate between categories using the dots or arrow buttons
+    - View products in a responsive grid layout
+    - Hover over products for subtle animations
+    - Add products to cart
+    ### Shop Page
+    The shop page allows users to browse all products with filtering options:
+    - Filter by category (All, Thrift, Luxury, Senators)
+    - View product details
+    - Add products to cart
-- Filter by category (All, Thrift, Luxury, Senators)
-- View product details
-- Add products to cart
+- Filter by category (All, Polos, T-Shirts, Jeans, Shirts)
+- View product details
+- Add products to cart
+    ### About Page
+    Learn about the Himspired brand story, vision, and team members.
+    ### Contact Page
+    Get in touch with the Himspired team through the contact form.
+    ## Design Features
+    ### Animations
+    - Smooth transitions between product categories
+    - Subtle hover effects on product cards
+    - Loading animation with brand name reveal
+    - Fade-in animations for section titles
+    ### Responsive Design
-    You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+    - Mobile-first approach with breakpoints for different device sizes
+    - Adaptive product grid that shows 1-4 items based on screen width
+    - Collapsible navigation menu on mobile devices
-    This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+    ## Future Enhancements
-    ## Learn More
+    - User authentication and account management
+    - Product filtering and search functionality
+    - Wishlist feature
+    - Product detail pages
+    - Shopping cart functionality
+    - Checkout process
+    - Order tracking
-    To learn more about Next.js, take a look at the following resources:
+    ## Contributing
-    - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-    - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+. Fork the repository
+. Create your feature branch (`git checkout -b feature/amazing-feature`)
+. Commit your changes (`git commit -m 'Add some amazing feature'`)
+. Push to the branch (`git push origin feature/amazing-feature`)
+. Open a Pull Request
-    You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+    ## License
-    ## Deploy on Vercel
+    This project is licensed under the MIT License - see the LICENSE file for details.
-    The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+    ## Acknowledgements
-    Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+    - Design inspiration from modern fashion e-commerce platforms
+    - Icons from Lucide React
+    - UI components from shadcn/ui

components.json

-Original file line number
+Diff line change
@@ -0,0 +1,21 @@
+    {
+      "$schema": "https://ui.shadcn.com/schema.json",
+      "style": "new-york",
+      "rsc": true,
+      "tsx": true,
+      "tailwind": {
+        "config": "tailwind.config.ts",
+        "css": "src/app/globals.css",
+        "baseColor": "neutral",
+        "cssVariables": true,
+        "prefix": ""
+      },
+      "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+      },
+      "iconLibrary": "lucide"
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chore update categories #57

Uh oh!

Diff view

Diff view

Uh oh!

There are no files selected for viewing

coderabbitai bot Aug 7, 2025

Uh oh!

Uh oh!

Chore update categories #57

Are you sure you want to change the base?

Uh oh!

Chore update categories #57

Uh oh!

Diff view

Diff view

Uh oh!

There are no files selected for viewing

coderabbitai bot Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!