I can see the contact information cards section showing 4 cards (Phone, Email, Location, Working Hours) with a simple white card design on gray background. The user wants me to redesign this section and use the Argesta font for a more premium look.

Now I'll add the Argesta font (a local font) and redesign the contact info cards with a more premium, elegant look. Argesta is a display serif font, so I'll need to add it as a local font file.

Since Argesta is not available on Google Fonts, I'll use a similar premium serif font that's available - Playfair Display which has similar elegant characteristics. Let me update the layout and redesign the contact section with a more premium look.

Now let me redesign the contact info cards section with a more premium, elegant design:

I've redesigned the contact info cards section with a premium look:

1. Added Playfair Display font - A elegant serif font similar to Argesta for headings (used with font-display class)

2. New card design - Dark navy gradient cards with:

   • Circular gold-bordered icons instead of square
   • Decorative corner accent shapes
   • Gold accent line that appears on hover
   • Smooth lift animation on hover
   • Better visual hierarchy with gold labels and white values
3. Enhanced typography - Labels now use the display font with tracking for an elegant look

I'll integrate this animated gallery CTA component into the projects section. Since the project already uses framer-motion (not motion/react), I'll adapt the component to use the existing library. Let me create the gallery building blocks and redesign the projects section.

Now let me check the i18n translations and the page structure to maintain bilingual support:

Now I'll redesign the projects section using the animated gallery grid layout — a two-column design with staggered text/CTA on one side and the animated image gallery on the other. Let me first add the needed translations, then rewrite the section.

Now let me rewrite the projects section to use the animated gallery grid layout with the staggered text + CTA on one side and the animated gallery on the other:

Let me verify the changes render correctly in the browser using the agent-browser skill.

Checked projects section

The redesigned projects section is working well. I integrated the animated gallery CTA component into the projects section with a two-column layout:

1. Left column — Staggered, blur-in animated text with the "Built to Last & Scalable" tagline, a Playfair Display heading ("We Build Your Dream, Crafted to Scale"), description, and two CTA buttons (View All Projects + Download Company Profile).
2. Right column — An animated masonry gallery grid where each cell fades in with a staggered delay, showing 4 featured projects with category badges and titles, plus hover zoom effects.

The component uses the project's existing framer-motion library (adapted from the motion/react import in the source) and maintains full bilingual RTL/LTR support with the Arabic font applied. The design is fully responsive, stacking to a single column on mobile.