Rise at Seven — New Look

A modern, high-end frontend redesign of the Rise at Seven website — built to showcase advanced UI/UX craftsmanship, buttery-smooth scrolling, and professional-grade animations using GSAP.

🔗 Live Demo: riseatsevenapu.vercel.app

---

✨ Highlights

This project was built as a frontend skills showcase, focused on delivering an agency-quality web experience:

• 🎬 GSAP-powered animations — scroll-triggered reveals, staggered transitions, and micro-interactions throughout
• 🌊 Buttery smooth scrolling for a premium, native-app feel
• 🖼️ Top-quality animated sections — every section is custom-crafted with motion design in mind
• ⚡ Fast development and builds powered by Vite
• 🎨 Clean, accessible UI components from shadcn/ui
• 📱 Fully responsive across all screen sizes
• 🔒 Type-safe codebase with TypeScript

🛠️ Tech Stack

Technology	Purpose
React	UI library
TypeScript	Type safety
Vite	Build tool & dev server
GSAP	Scroll animations & motion design
Smooth Scroll	Premium scrolling experience
shadcn/ui	UI components
pnpm	Package management

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• pnpm installed globally

Installation

# Clone the repository
git clone https://github.com/Apur0y/rise-at-seven-newlook.git

# Navigate into the project directory
cd rise-at-seven-newlook

# Install dependencies
npm i

Running the Development Server

npm run dev

The app will be available at http://localhost:5173 (or the port shown in your terminal).

📁 Project Structure

rise-at-seven-newlook/
├── src/                    # Application source code
├── index.html              # Entry HTML file
├── package.json            # Project dependencies and scripts
├── vite.config.ts          # Vite configuration
├── postcss.config.mjs      # PostCSS configuration
├── default_shadcn_theme.css # Theme styles
└── pnpm-workspace.yaml      # pnpm workspace config

💡 What This Project Demonstrates

This build highlights core frontend strengths:

• Building performant, scroll-driven animations with GSAP (ScrollTrigger, timelines, stagger effects)
• Implementing smooth scroll libraries for a polished, premium feel
• Structuring reusable, animated section components in React + TypeScript
• Translating design concepts into pixel-perfect, motion-rich interfaces
• Writing clean, maintainable, type-safe code with modern tooling

📄 Attributions

See ATTRIBUTIONS.md for third-party assets and credits.

📝 License

This project is open source. Feel free to use it as a reference or starting point for your own projects.

👤 Author

Apur0y

• GitHub: @Apur0y