Current Status & Future Plans

Hellows!

This project is currently a work-in-progress, this is for the SAMAHAN System Development org application. Due to recent commitments with other subjects, specifically Cybersec and Techno, this is the current progress I was able to do from my available time. The Stage 2 will come soon!

Features & Tech

1. BEM applied
2. Varnames made close to TailwindCSS
3. Font Family used as alternative: -apple-system
4. Responsive Grid Layout using Variable Override method:
        - Mobile (up to 767px)
        - Tablet (768px to 1023px)
        - Desktop (1024px and up)

Project Structure:

.
├── index.html
├── .prettierrc
└── assets/
    ├── css/
    │   ├── globals.css
    │   └── main.css
    ├── js/
    │   ├── data.json
    │   └── script.js
    └── images/
        ├── colors/
        └── products/

Stage 1

✅ "Featured iPhone Accessories" Grid Section
✅ Product Cards: Each card contains:
        ✅ Product image
        ✅ Title
        ✅ Price
        ✅ Colored dots (non-interactive)
✅ iPhone Cases Only
✅ Entire Card is Clickable!
✅ Hover Transition for Product Name: all 0.1s ease
✅ "Shop Cases & Protection" Link does not redirect to any page.
✅ Bento Grid Layout - The layout closely matches the specified Bento grid design.

✅ Others (Not required):
        - Color Gallery
        - Violator Badge ("New")
        - Color Swatch Display (included (+) indicator for more than 6 colors)

Link to deployed website:
https://arcpsy-sysdev-front.vercel.app/