udhamshil-nepal/AGENTS.md

Redesign the existing company portfolio website using a premium editorial / modern digital-agency design language.

IMPORTANT:

• The existing project already contains the company's content, pages, functionality, assets, routes, components, and business information.
• Do NOT rebuild the project from scratch.
• Do NOT remove existing functionality.
• First inspect and understand the entire existing codebase, including all pages, components, content, images, assets, routes, responsive behavior, and existing design system.
• Preserve the company's actual content and business information unless something clearly needs restructuring for the new visual hierarchy.
• The primary goal is a COMPLETE VISUAL AND UX REDESIGN.
• Do not make it look like a generic SaaS template or an AI-generated website.

DESIGN DIRECTION

Use a sophisticated:

"Premium Editorial + Swiss Minimalism + Contemporary Digital Agency"

aesthetic.

The website should feel like a high-end international creative agency / architecture studio / luxury brand website rather than a conventional corporate website.

The visual language should combine:

• Swiss-inspired typography
• Editorial magazine layouts
• Premium corporate branding
• Large-scale typography
• Asymmetric compositions
• Strong grid systems
• Generous whitespace
• Large immersive photography
• Minimal UI
• Sophisticated motion
• Strong visual hierarchy
• Intentional negative space
• Subtle organic shapes
• Restrained use of color
• High-quality transitions and micro-interactions

The final result should feel expensive, intentional, confident, and highly designed.

TYPOGRAPHY

Typography is one of the most important parts of the redesign.

Use typography as a major visual element rather than simply displaying text.

Use:

• Extremely large display headings
• Strong contrast between display and body typography
• Large section titles
• Tight but carefully controlled heading line-height
• Clear typographic hierarchy
• Editorial-style text blocks
• Occasional oversized numbers/statistics
• Small uppercase labels with subtle letter spacing
• Short, confident headlines

Avoid excessive font weights and unnecessary decorative typography.

The typography should feel modern, sophisticated, and editorial.

LAYOUT

Do NOT make every section centered.

Use a strong responsive grid with intentional asymmetry.

Use compositions such as:

• Text aligned to one side with large imagery on the other
• Full-width images
• Oversized headings extending across multiple grid columns
• Offset content blocks
• Uneven image/text ratios
• Large whitespace areas
• Overlapping elements when appropriate
• Editorial multi-column layouts
• Large visual pauses between sections

The page should feel composed rather than assembled from UI components.

Do not make every section look like:

heading → paragraph → three cards.

HERO

Create a visually dominant hero section.

The hero should immediately communicate the company's identity.

Use:

• Very large typography
• Strong composition
• High-quality company imagery
• Minimal supporting text
• Minimal CTA treatment
• Plenty of negative space
• Subtle entrance animation

Avoid the typical SaaS hero pattern.

Do not use a huge gradient background with floating cards.

The hero should feel like the opening spread of a premium magazine.

NAVIGATION

Create a minimal, sophisticated navigation.

Keep the navigation visually quiet.

Use:

• Simple logo
• Minimal navigation links
• Strong spacing
• Subtle hover interactions
• Optional menu interaction on smaller screens
• Sticky/floating behavior only if it improves the experience

Do not overcrowd the navbar.

Navigation should never compete with the content.

IMAGERY

Treat images as part of the design rather than simple content containers.

Use:

• Large editorial photographs
• Full-width imagery
• Carefully cropped images
• Different aspect ratios
• Asymmetric image compositions
• Subtle border radius where appropriate
• Image reveal animations
• Hover transformations that are subtle and sophisticated

Avoid putting every image inside a standard rounded rectangular card.

If the existing project already has images, reuse them intelligently.

Do not replace real company imagery with random stock imagery unless absolutely necessary.

SECTIONS

Reorganize the visual presentation of existing content into a strong editorial narrative.

Possible visual rhythm:

1. Minimal navigation
2. Massive hero statement
3. Introductory company statement
4. Large visual / company image
5. Company capabilities or services
6. Featured projects
7. Individual project showcases
8. Company statistics / achievements
9. About/company story
10. Process or expertise
11. Clients / partners
12. Testimonials if they already exist
13. Strong CTA
14. Minimal footer

Do not blindly follow this order.

Analyze the existing company's content and determine the most natural narrative.

PROJECT / PORTFOLIO SECTION

Projects should feel like editorial case studies.

Avoid generic grids of identical cards.

Instead use:

• Large featured project
• Different image sizes
• Asymmetric layouts
• Project number/category labels
• Large project titles
• Metadata presented subtly
• Image hover interactions
• Alternating compositions

Example visual rhythm:

Large project ↓ Two smaller projects ↓ Large offset project ↓ Full-width project ↓ Next major section

The portfolio should feel curated rather than like a database.

SERVICES / CAPABILITIES

Do not create generic SaaS feature cards.

Instead present services using editorial typography.

For example:

01 — SERVICE NAME Short description

02 — SERVICE NAME Short description

03 — SERVICE NAME Short description

Allow typography, spacing, dividers, and interaction to create the hierarchy.

If cards are appropriate for the existing content, make them editorial rather than conventional UI cards.

MOTION

Use sophisticated motion throughout the website.

Animations should feel intentional and restrained.

Use:

• Text reveal animations
• Image reveal animations
• Fade/slide transitions
• Subtle scale transformations
• Hover interactions
• Staggered content reveals
• Smooth section transitions
• Marquee/scrolling elements where appropriate
• Subtle parallax where it genuinely improves the composition

Motion should support the design rather than become a spectacle.

Avoid:

• Excessive bouncing
• Random animations
• Constant floating elements
• Overly aggressive parallax
• Long loading animations
• Animations that hurt usability

Respect prefers-reduced-motion.

MARQUEE / SCROLLING ELEMENTS

Where appropriate, introduce editorial scrolling elements such as:

COMPANY • SERVICES • PROJECTS • EXPERTISE • COMPANY • SERVICES • PROJECTS

Use them sparingly.

They should feel like part of the visual identity rather than a gimmick.

COLORS

Use the company's existing brand colors as the foundation.

Do not blindly introduce purple/blue gradients.

Prefer:

• Strong neutral base
• Black/near-black
• White/off-white
• Existing brand accent
• Very limited secondary colors

Color should support typography and imagery.

If the existing brand palette is poor, refine it rather than completely replacing the brand identity.

BORDERS / SHADOWS / CARDS

Use visual restraint.

Prefer:

• Thin borders
• Dividers
• Whitespace
• Typography
• Image composition

Avoid excessive:

• Box shadows
• Glassmorphism
• Gradient borders
• Floating cards
• Pills
• Huge border radiuses

Not every element needs a container.

FOOTER

Create a strong editorial footer.

The footer should feel like the final page of a magazine rather than a standard corporate footer.

Use:

• Large company statement
• Contact information
• Important navigation
• Social links if already present
• Location information if relevant
• Large typography
• Minimal legal links
• Strong whitespace

RESPONSIVE DESIGN

The design must be genuinely responsive.

Do not simply shrink the desktop version.

Create intentional layouts for:

• Large desktop
• Laptop
• Tablet
• Mobile

On mobile:

• Preserve the typography hierarchy
• Maintain the editorial feel
• Recompose asymmetric layouts
• Carefully control oversized typography
• Prevent horizontal overflow
• Maintain image quality
• Keep navigation simple
• Preserve whitespace without wasting viewport space

UX

Despite the highly visual design, usability must remain excellent.

Ensure:

• Clear navigation
• Accessible contrast
• Keyboard accessibility
• Proper semantic HTML
• Visible focus states
• Accessible buttons and links
• Proper heading hierarchy
• Fast loading
• Optimized images
• No unnecessary JavaScript
• No unnecessary dependencies

The website should look artistic without sacrificing usability.

IMPORTANT ANTI-PATTERNS

Do NOT produce:

• Generic SaaS design
• Generic corporate template
• AI-looking website
• Purple gradient hero
• Glassmorphism
• Excessive rounded cards
• Dashboard-style layouts
• Repeated 3-column cards
• Excessive shadows
• Excessive pills
• Giant CTA buttons everywhere
• Centered content in every section
• Same-sized cards everywhere
• Random decorative blobs
• Unnecessary icons
• Excessive animations
• Stock-template appearance

IMPLEMENTATION

Before changing code:

1. Inspect the entire existing project.
2. Identify the current architecture.
3. Identify reusable components.
4. Identify existing routes/pages.
5. Identify existing assets and images.
6. Identify the company's actual brand colors.
7. Identify existing functionality that must remain.
8. Identify opportunities to improve the information hierarchy.
9. Create a coherent design system based on the editorial direction.
10. Then implement the redesign systematically.

Do not rewrite working functionality unnecessarily.

Reuse existing components when technically appropriate, but redesign their visual presentation where necessary.

Keep the code clean, maintainable, responsive, and production-ready.

The final website should feel like a website designed by a high-end digital agency, not a collection of UI components.

MOST IMPORTANT:

The goal is not to copy another website.

The goal is to reproduce the same DESIGN PHILOSOPHY:

large typography + editorial composition + asymmetric grid + premium imagery + whitespace + restrained UI + sophisticated motion + strong visual identity.

Make the existing company feel like a premium, established, internationally credible brand through visual design alone.