Geers — Creative Agency Template

Thank you for purchasing Geers v2. A premium creative-agency landing page rebuilt on Bootstrap 5 with vanilla JavaScript, full dark UI, RTL Arabic support, and three color schemes.

Live preview: open index.html at the package root for the overview, or v2/index.html for the main demo.

What's New in v2

Bootstrap 5.3.3 + vanilla JavaScript — no jQuery (v1 used Bootstrap 3 + jQuery).
Font Awesome 6.5 icons.
Sleek dark UI with gradient accents and glassmorphism.
3 color schemes — Violet, Coral, Emerald — switched by one body class.
Full RTL Arabic build with the Cairo font.
Futuristic preloader, full-screen search overlay, scroll-spy nav, portfolio filter, testimonials slider, lightbox.
Optimized: lazy-loaded + dimensioned images (no CLS), compressed assets, rAF-throttled scripts, prefers-reduced-motion support.
Fully responsive from 220px up to 4K.

File Structure

Geers/
├── index.html              ← overview page (showcases all demos)
├── changelog.txt
├── v1/                     ← classic version (Bootstrap 3 + jQuery)
│   ├── HTML/
│   └── documentation/
└── v2/                     ← current version (Bootstrap 5, vanilla JS)
    ├── index.html              ← default (Violet)
    ├── index-color-2.html      ← Coral scheme
    ├── index-color-3.html      ← Emerald scheme
    ├── rtl/
    │   ├── index.html          ← Arabic RTL (Violet)
    │   ├── index-color-2.html  ← Arabic RTL (Coral)
    │   └── index-color-3.html  ← Arabic RTL (Emerald)
    ├── css/premium.css         ← all theme styles (incl. RTL, loader, search)
    ├── js/premium.js           ← all behavior (vanilla, single IIFE)
    ├── images/                 ← all imagery
    └── documentation/          ← this file

Pages & Demos

Geers v2 is a single-page template. It ships as 6 ready demo pages (3 color schemes × LTR/RTL):

Page	Scheme	Direction
`v2/index.html`	Violet	LTR (English)
`v2/index-color-2.html`	Coral	LTR (English)
`v2/index-color-3.html`	Emerald	LTR (English)
`v2/rtl/index.html`	Violet	RTL (Arabic)
`v2/rtl/index-color-2.html`	Coral	RTL (Arabic)
`v2/rtl/index-color-3.html`	Emerald	RTL (Arabic)

Page Sections (each demo)

Banner / Hero · About Us · Services · Portfolio (Our Works, filterable) · Pricing · Blog · Testimonials · Clients · Newsletter / Contact · Footer — all reachable from the sticky scroll-spy navigation.

Color Schemes

The scheme is controlled by the <body> class. Switch it to recolor the whole page:

<body class="theme-1">   <!-- Violet (default) -->
<body class="theme-2">   <!-- Coral -->
<body class="theme-3">   <!-- Emerald -->

To create your own scheme, copy a .theme-N block in css/premium.css and change the accent variables:

.theme-1{ --accent:#6c4cf1; --accent-2:#00d4c8; --accent-rgb:108,76,241; }

RTL / Arabic

RTL pages live in v2/rtl/. They set <html lang="ar" dir="rtl">, load bootstrap.rtl.min.css and the Cairo font, and reference assets with ../.

The shared premium.css contains an RTL OVERRIDES section that mirrors every custom component (nav underline, drawer, arrows, badges, portfolio zoom, back-to-top, etc.) via [dir="rtl"] rules.

To localize text, edit the Arabic copy directly in the v2/rtl/*.html files. The layout mirrors automatically.

Editing Sections

Each section is a clearly-commented <section id="..."> block. Edit the text/markup inline. Navigation links use the section id as an anchor (#about, #services, #works…), so keep ids in sync if you rename a section.

Portfolio filter

Each work item has data-cat="..."; the filter buttons use data-filter="...". Match the values to add categories.

Changing Images

All imagery is in v2/images/ grouped by section (about-us, our-projects, our-blog, team-members, parallax-bg, gallery-thumbs, sliders). Replace a file keeping the same name, or update the src / background-image path.

Slot	Recommended size
Hero / parallax background	1920 × 1080
About images	750 × 800
Portfolio tiles	860 × 800
Blog thumbnails	410 × 250
Team members	390 × 310

Note: demo photos are placeholders (Unsplash) and are not licensed for redistribution — replace them with your own licensed images before launch. Keep width/height/loading="lazy" attributes to preserve performance & avoid layout shift.

CSS & Styling

All custom styles are in a single file: css/premium.css. Bootstrap 5 is loaded from CDN. Key areas (top → bottom): design tokens (:root), base, header/nav, hero, sections, components, responsive media queries (down to 220px), RTL overrides, search overlay, 2035 loader, performance (content-visibility, prefers-reduced-motion, :focus-visible).

JavaScript

All behavior is in js/premium.js — one vanilla IIFE, no dependencies. Modules: preloader, sticky header, mobile menu, smooth-scroll + scroll-spy (rAF-throttled), hero slider, counters & reveal (IntersectionObserver), portfolio filter, testimonials slider, lightbox, newsletter, search overlay, back-to-top.

Fonts & Icons

Fonts (Google Fonts, free): display/body in LTR; Cairo for Arabic. Loaded via <link> in each page <head>.
Icons: Font Awesome 6.5 Free via CDN. Swap an icon by changing its <i class="fas fa-..."> class.

Deployment

Geers is static HTML — host it anywhere (Apache, Nginx, Netlify, Vercel, GitHub Pages, any CDN). Just upload the v2/ folder (or the whole package). No build step required.

# local preview
cd v2 && python3 -m http.server 8080
# then open http://localhost:8080/index.html

Credits

Bootstrap 5.3.3 — getbootstrap.com (MIT)
Font Awesome 6.5 Free — fontawesome.com
Google Fonts (Outfit, Cairo) — fonts.google.com (OFL)
Demo photography — Unsplash (placeholders, not redistributed)

Support

Need help? Contact IT Geeks at info@itgeeks.store or itgeeks.store · Phone: +20 100 274 7846. Please include your purchase code.