pharmacy_website

Imported from Mwangobora/pharmacy_website (AGENTS.md). Install upstream with npx skills add Mwangobora/pharmacy_website. Copyright stays with the author.

You are working inside an existing Next.js pharmacy management system.

Your task is to create a complete modern public-facing pharmacy website / landing website for this system.

IMPORTANT:

• First inspect the existing project directory carefully.
• Read the existing files, README, components, routes, styles, assets, configuration, and system information to understand what the pharmacy system does.
• Do NOT ask me to explain the system again. The necessary system details are already inside the project directory.
• This is already a Next.js application.
• All required packages have already been installed.
• Keep and respect the existing color system, theme, fonts, design tokens, and branding.
• Do not replace the existing application architecture unnecessarily.
• Do not break the existing login, registration, dashboard, backend integration, or other working features.

Main Goal

Create a visually impressive, premium, interactive pharmacy website that feels like a modern health-tech product.

The website should not look like a normal static template.

It should contain:

• 3D visual effects
• smooth animations
• animated cards
• animated text
• image animations
• modern video-like visual sections
• floating elements
• subtle particle effects where appropriate
• depth and perspective effects
• mouse/parallax interactions
• glass effects where appropriate
• modern gradients based on the existing color palette
• smooth section transitions
• professional medical/pharmacy visual language

The final website should feel alive while still remaining professional, clean, trustworthy, and appropriate for a pharmacy/healthcare system.

Homepage

Create a complete homepage.

1. Navigation Bar

Create a premium responsive navigation bar.

Include:

• Pharmacy/system logo or existing brand
• Home
• About
• Services
• Features
• How It Works
• Contact
• Login
• Register

Very important:

Add working links/buttons for:

Login → link it to the existing login page/route in the application.

Register / Get Started → link it to the existing registration page/route.

Inspect the existing routes first and use the actual routes already available in the project.

Do not create duplicate authentication pages if they already exist.

The navigation should:

• become slightly translucent/glass-like on scroll
• animate smoothly
• work well on desktop, tablet, and mobile
• have an animated mobile menu

2. Hero Section

Create a very impressive hero section.

The hero should immediately communicate that this is a modern pharmacy management platform.

Use content based on the actual pharmacy system found in the project.

Possible layout:

Left side:

• small animated badge
• large animated headline
• highlighted/gradient words
• supporting paragraph
• primary CTA: Get Started / Register
• secondary CTA: Login / Explore Features

Right side: Create a rich animated pharmacy visual.

Examples:

• 3D medicine bottle
• pharmacy dashboard mockup
• medicine cards
• floating tablets/capsules
• medical cross
• prescription card
• inventory card
• analytics cards
• floating product boxes
• health-related abstract objects

The objects should move slowly and naturally.

Use perspective and depth.

Add subtle background animation.

The hero should feel similar in quality to a premium SaaS / health-tech startup website.

3. Animated Pharmacy Visual / Video-Like Section

Create at least one section that feels like a short product video or interactive visual presentation.

It does not necessarily need a real external video.

You may create it using:

• animated UI mockups
• layered screenshots
• motion graphics
• floating dashboard cards
• moving pharmacy inventory elements
• animated statistics
• medicine product cards
• scrolling interface previews
• motion-based transitions

If existing screenshots/assets are available in the project, use them where appropriate.

Create an immersive visual experience.

4. About the Pharmacy System

Create an attractive About section.

Explain what the pharmacy system does using information found inside the project.

Use:

• animated heading
• short paragraphs
• visual illustration
• statistics
• floating cards
• smooth entrance animations

Do not invent important system capabilities that do not exist.

5. Services Section

Create animated service cards.

Depending on the functionality already implemented in the pharmacy system, services may include things such as:

• Medicine Management
• Prescription Management
• Sales Management
• Inventory Management
• Stock Monitoring
• Customer/Patient Management
• Supplier Management
• Expiry Tracking
• Reports and Analytics
• Pharmacy Operations

Only include features that make sense based on the existing project.

Each card should have:

• icon
• title
• short explanation
• hover animation
• depth
• smooth scale / tilt effect
• subtle glow or border animation

Cards should NOT look flat or boring.

6. Features Section

Create a premium feature showcase.

Use alternating layouts such as:

Text | Visual

Visual | Text

Examples of visual representations:

• inventory dashboard preview
• medicine stock cards
• sales graph
• prescription card
• product management UI
• notifications
• reporting dashboard

Animate each section when it enters the viewport.

7. 3D / Interactive Cards

Create interactive cards with modern effects.

Possible effects:

• cursor-based tilt
• perspective transform
• subtle 3D rotation
• glow following cursor
• floating icons
• layered backgrounds
• animated borders

Do not overdo the effect.

The website must remain professional and comfortable to use.

8. Animated Statistics

Create a pharmacy statistics section.

For example:

• Medicines Managed
• Inventory Accuracy
• Faster Operations
• Active Users
• Sales Records
• Reports Generated

Use realistic placeholder statistics only if actual statistics are not available.

Animate the numbers when the user scrolls to the section.

9. How It Works

Create a visually attractive process section.

For example:

1. Create an account
2. Login securely
3. Manage pharmacy information
4. Add medicines/products
5. Monitor stock
6. Record pharmacy operations
7. Generate reports

Adapt these steps based on the real project.

Use:

• connected animated steps
• timeline
• progress line
• icons
• scroll animations

10. Dashboard Preview

Create a section presenting the actual pharmacy management application.

Show a browser/device-style mockup of the dashboard.

Add floating supporting cards around it.

Examples:

• stock status
• medicine sales
• low-stock warning
• prescriptions
• revenue
• inventory summary

Use existing application screenshots or components if practical.

Do not interfere with the actual dashboard.

This section is only a marketing presentation of the system.

11. Benefits

Create a section explaining why a pharmacy should use this system.

Examples:

• Reduce manual work
• Track medicines easily
• Prevent stock shortages
• Monitor medicine expiry
• Improve sales records
• Better pharmacy organization
• Faster access to information
• Better decision making

Use animated visual cards.

12. CTA Section

Create a strong final call-to-action.

Example:

"Transform the way your pharmacy operates."

Include:

• Register / Get Started button
• Login button

Both must link to the existing authentication routes.

Use a visually impressive animated background.

13. Footer

Create a complete modern footer.

Include:

• logo/brand
• brief system description
• navigation links
• services/features links
• Login
• Register
• Contact information if available
• copyright

Make it responsive.

Animation Requirements

Use the animation libraries already installed in the project.

Inspect package.json before implementing anything.

If Framer Motion / Motion, GSAP, Three.js, React Three Fiber, Lenis, or similar packages are already installed, use them appropriately.

Do not reinstall packages unnecessarily.

Implement animations such as:

• fade up
• stagger animation
• scale
• blur-to-focus
• text reveal
• word-by-word text animation
• scroll-based motion
• image parallax
• subtle floating
• rotating decorative objects
• hover tilt
• cursor-follow glow
• animated gradient
• counters
• card entrance animation
• section reveal
• smooth page scrolling

Animations must be smooth and optimized.

Avoid excessive animations that make the website slow.

3D Requirements

Where practical, introduce lightweight 3D effects.

Possible implementation:

• CSS 3D transforms
• Three.js
• React Three Fiber
• animated SVG
• layered 3D cards
• perspective scenes

The 3D elements should represent pharmacy/healthcare concepts.

Possible objects:

• medicine bottle
• tablet
• capsule
• medicine box
• medical cross
• prescription
• healthcare dashboard cards

Do not use random 3D objects unrelated to the system.

Background Effects

Add subtle premium backgrounds.

Examples:

• animated radial gradients
• blurred circles
• glowing particles
• moving grid
• subtle medical symbols
• gradient mesh
• spotlight following cursor
• animated decorative lines
• floating medicine elements

Keep all colors consistent with the existing project color system.

Images and Visual Assets

Use high-quality visual assets where necessary.

Prefer:

• existing project assets
• local images
• optimized Next.js Image components
• custom CSS/SVG graphics
• generated UI visuals

Do not create a page that depends heavily on random stock images.

The interface itself should provide most of the visual experience.

Responsive Design

The website must work properly on:

• large desktop
• laptop
• tablet
• mobile

Check:

• text sizes
• card layouts
• navigation
• 3D visuals
• animation overflow
• buttons
• sections
• footer
• image responsiveness

There should be no horizontal scrolling.

Performance

Keep the website visually rich but performant.

Use:

• lazy loading
• dynamic import for heavy visual components
• optimized images
• GPU-friendly transforms
• reduced unnecessary re-renders
• reusable animation components

Avoid heavy animation loops where they are unnecessary.

Support prefers-reduced-motion where possible.

Code Quality

Use proper Next.js and React practices.

Create reusable components such as:

• Navbar
• Hero
• AnimatedText
• FloatingCard
• ServiceCard
• FeatureSection
• Stats
• HowItWorks
• DashboardPreview
• CTA
• Footer

Organize components properly.

Use TypeScript if the current project uses TypeScript.

Do not convert the project unnecessarily.

Important Design Direction

The visual style should feel like a combination of:

• premium SaaS
• modern healthcare
• pharmacy technology
• interactive product showcase
• futuristic but professional interface

Think of websites with the visual quality of modern technology companies rather than a simple Bootstrap pharmacy template.

Avoid:

• boring white card grids
• generic templates
• excessive text
• cheap-looking gradients
• random animations
• childish visuals
• overcrowded sections
• poor contrast
• inconsistent spacing

Use good:

• hierarchy
• whitespace
• typography
• depth
• rhythm
• visual storytelling
• animation timing
• accessibility

Existing Color System

DO NOT redesign the project's color system.

Inspect the existing:

• global CSS
• Tailwind config
• CSS variables
• theme configuration
• component styles

Use those colors consistently throughout the new website.

You may create different shades, opacity, gradients, shadows, and glows based on those existing colors, but the brand identity must remain consistent.

Routing

The public homepage should become the appropriate main landing route, normally /, unless the current project structure indicates something different.

Do not damage authenticated pages.

The marketing/public website and authenticated pharmacy dashboard should coexist.

Important:

• Login CTA → existing login route.
• Register CTA → existing registration route.
• After authentication, preserve the existing system behavior.

Final Verification

After implementation:

1. Run the project.
2. Fix TypeScript errors.
3. Fix lint errors that affect the implementation.
4. Check browser console errors.
5. Verify all animations.
6. Test mobile responsiveness.
7. Test desktop responsiveness.
8. Verify Login links.
9. Verify Register links.
10. Verify existing authenticated system still works.
11. Check for broken imports.
12. Check for missing assets.
13. Check animation performance.
14. Make sure there is no horizontal overflow.
15. Make sure every section looks polished.

Do not stop after creating a basic homepage.

Build the complete polished website.

The final result should look like a production-quality 3D animated pharmacy management system website, while keeping the existing application functionality, routes, packages, theme, and branding intact.