{{title}}
-Get in touch with us using the form below.
- -
-
-
+
diff --git a/components/Navigation/Navigation.js b/components/Navigation/Navigation.js
index 76c153c..1bf2ba4 100644
--- a/components/Navigation/Navigation.js
+++ b/components/Navigation/Navigation.js
@@ -2,11 +2,23 @@ import { Component, store, define } from '../../core/component.js';
export default class Navigation extends Component {
static templateUrl = '/components/Navigation/Navigation.html';
- static store = ['user', 'isAuthenticated', 'theme'];
+ static store = ['lang'];
- bind() {
- this.on('#auth-btn', 'click', () => {
- store.get('isAuthenticated') ? store.logout() : store.login();
+ setLanguage(e) {
+ const lang = e.target.closest('button')?.dataset.lang;
+ if (lang) store.setLang(lang);
+ }
+
+ mount() {
+ window.addEventListener('scroll', () => {
+ const nav = this.$('nav');
+ if (nav) {
+ if (window.scrollY > 60) {
+ nav.style.background = 'rgba(10, 24, 37, 0.98)';
+ } else {
+ nav.style.background = 'rgba(10, 24, 37, 0.92)';
+ }
+ }
});
}
}
diff --git a/components/ThemeToggle/ThemeToggle.js b/components/ThemeToggle/ThemeToggle.js
deleted file mode 100644
index 12bee46..0000000
--- a/components/ThemeToggle/ThemeToggle.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component, store, define } from '../../core/component.js';
-
-export default class ThemeToggle extends Component {
- static templateUrl = '/components/ThemeToggle/ThemeToggle.html';
- static store = ['theme'];
-
- bind() {
- this.on('#toggle-btn', 'click', () => store.toggleTheme());
- }
-}
-
-define('theme-toggle', ThemeToggle);
diff --git a/components/Values/Values.html b/components/Values/Values.html
new file mode 100644
index 0000000..dab617e
--- /dev/null
+++ b/components/Values/Values.html
@@ -0,0 +1,73 @@
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+
diff --git a/app/Home/Home.js b/app/Home/Home.js
new file mode 100644
index 0000000..0d52dbc
--- /dev/null
+++ b/app/Home/Home.js
@@ -0,0 +1,23 @@
+import { Component, define } from '../../core/component.js';
+
+export default class Home extends Component {
+ static templateUrl = '../../app/Home/Home.html';
+ static store = ['lang']; // Subscribe to lang for dynamic text
+
+ mount() {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ }, { threshold: 0.12 });
+
+ // Find elements with 'fade-up' class within the component's shadow DOM.
+ // This ensures animations are applied to elements within the component itself,
+ // rather than relying on global selectors that might not work as expected with Shadow DOM.
+ this.$$('.fade-up').forEach(el => observer.observe(el));
+ }
+}
+
+define('home-page', Home);
diff --git a/app/Login/Login.html b/app/Login/Login.html
deleted file mode 100644
index 621a334..0000000
--- a/app/Login/Login.html
+++ /dev/null
@@ -1,206 +0,0 @@
-
-
-
- {{#if redirectFrom}}
-
diff --git a/app/Login/Login.js b/app/Login/Login.js
deleted file mode 100644
index 8ba264f..0000000
--- a/app/Login/Login.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Component, store, navigate, define } from '../../core/component.js';
-import { validateAll } from '../../lib/validate.js';
-import { getQueryParam } from '../../lib/nav.js';
-
-const schema = { username: { min: 2 }, email: { email: true } };
-
-export default class LoginPage extends Component {
- static templateUrl = '/app/Login/Login.html';
- static metadata = { title: 'Login', description: 'Login to access your dashboard.' };
- static local = { username: '', email: '', isLoading: false, errors: {}, attempts: 0 };
- // local values auto-included in SSR; only need computed defaults here
- static ssrProps = { hasErrors: false, errorMessages: [], canSubmit: false };
-
- get props() {
- const { username, errors, isLoading, attempts } = this.local;
- const errorMessages = Object.values(errors);
- const redirectFrom = this.pageProps?.query?.from || getQueryParam('from');
- return { ...super.props, isLoading, attempts, hasErrors: errorMessages.length > 0, errorMessages, canSubmit: username.length > 0 && !errorMessages.length, redirectFrom };
- }
-
- bind() {
- // Combined handler: update value + validate in one render cycle
- this.on('#username', 'input', e => this.updateField('username', e.target.value));
- this.on('#email', 'input', e => this.updateField('email', e.target.value));
- this.on('#custom-login', 'click', () => this.login({ username: this.local.username, email: this.local.email }));
- this.on('#quick-login', 'click', () => this.login());
- this.on('#clear-form', 'click', () => this.batch(() => Object.assign(this.local, { username: '', email: '', errors: {}, attempts: 0 })));
- }
-
- updateField(field, value) {
- // Batch updates to trigger only one re-render
- this.batch(() => {
- this.local[field] = value;
- const { errors } = validateAll(this.local, schema);
- this.local.errors = errors;
- });
- }
-
- async login(creds = {}) {
- this.local.attempts++;
- await this.withLoading(async () => {
- await new Promise(r => setTimeout(r, 600));
- store.login(creds);
- navigate(this.props.redirectFrom || '/dashboard');
- });
- }
-}
-
-define('login-page', LoginPage);
diff --git a/app/NotFound/NotFound.html b/app/NotFound/NotFound.html
deleted file mode 100644
index 5030183..0000000
--- a/app/NotFound/NotFound.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
diff --git a/app/NotFound/NotFound.js b/app/NotFound/NotFound.js
deleted file mode 100644
index 94d09aa..0000000
--- a/app/NotFound/NotFound.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component, define } from '../../core/component.js';
-
-export default class NotFoundPage extends Component {
- static templateUrl = '/app/NotFound/NotFound.html';
- static metadata = { title: '404 - Not Found', description: 'Page not found.' };
-}
-
-define('notfound-page', NotFoundPage);
diff --git a/app/Products/Products.html b/app/Products/Products.html
new file mode 100644
index 0000000..2b316ad
--- /dev/null
+++ b/app/Products/Products.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
diff --git a/app/Products/Products.js b/app/Products/Products.js
new file mode 100644
index 0000000..0286736
--- /dev/null
+++ b/app/Products/Products.js
@@ -0,0 +1,17 @@
+import { Component, define } from '../../core/component.js';
+
+export default class Products extends Component {
+ static templateUrl = '/app/Products/Products.html';
+ static store = ['lang'];
+
+ mount() {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) entry.target.classList.add('visible');
+ });
+ }, { threshold: 0.12 });
+ this.$$('.fade-up').forEach(el => observer.observe(el));
+ }
+}
+
+define('products-page', Products);
diff --git a/app/Sustainability/Sustainability.html b/app/Sustainability/Sustainability.html
new file mode 100644
index 0000000..6a9de0f
--- /dev/null
+++ b/app/Sustainability/Sustainability.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
diff --git a/app/Sustainability/Sustainability.js b/app/Sustainability/Sustainability.js
new file mode 100644
index 0000000..3f2f86a
--- /dev/null
+++ b/app/Sustainability/Sustainability.js
@@ -0,0 +1,17 @@
+import { Component, define } from '../../core/component.js';
+
+export default class Sustainability extends Component {
+ static templateUrl = '/app/Sustainability/Sustainability.html';
+ static store = ['lang'];
+
+ mount() {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) entry.target.classList.add('visible');
+ });
+ }, { threshold: 0.12 });
+ this.$$('.fade-up').forEach(el => observer.observe(el));
+ }
+}
+
+define('sustainability-page', Sustainability);
diff --git a/app/Users/[id]/User.html b/app/Users/[id]/User.html
deleted file mode 100644
index ac0618f..0000000
--- a/app/Users/[id]/User.html
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
diff --git a/app/Users/[id]/User.js b/app/Users/[id]/User.js
deleted file mode 100644
index a2a41fc..0000000
--- a/app/Users/[id]/User.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, define } from '../../../core/component.js';
-
-export default class UserPage extends Component {
- static templateUrl = '/app/Users/[id]/User.html';
- static store = ['user', 'isAuthenticated'];
-
- mount() {
- const id = this.pageProps?.params?.id || 'Unknown';
- this.setMeta({ title: `User ${id}`, description: `Profile for user ${id}.` });
- }
-}
-
-define('user-page', UserPage);
diff --git a/app/_Layout/_Layout.html b/app/_Layout/_Layout.html
index 1fac284..350e30c 100644
--- a/app/_Layout/_Layout.html
+++ b/app/_Layout/_Layout.html
@@ -1,38 +1,7 @@
-
-
+
App Stats
-Counter value: {{counter}}
-You've clicked the counter {{counter === 1 ? 'once' : counter + ' times'}}
+
+
-
- + {{#if lang === 'es'}} + Hablemos sobre nuestros productos + {{else}} + Let's talk about our products + {{/if}} +
-
+
diff --git a/app/Contact/Contact.js b/app/Contact/Contact.js
index 23008d7..b48057c 100644
--- a/app/Contact/Contact.js
+++ b/app/Contact/Contact.js
@@ -1,73 +1,17 @@
import { Component, define } from '../../core/component.js';
-import { validateAll } from '../../lib/validate.js';
-const schema = {
- name: { required: true, min: 2 },
- email: { required: true, email: true },
- message: { required: true, min: 10 }
-};
-
-export default class ContactPage extends Component {
+export default class Contact extends Component {
static templateUrl = '/app/Contact/Contact.html';
- static store = ['counter'];
- static metadata = { title: 'Contact', description: 'Get in touch with us.' };
- static local = { errors: {}, isLoading: false, sent: false };
- // local values auto-included in SSR; only need non-local values here
- static ssrProps = { title: 'Contact Us' };
- static reactive = false; // Don't auto-update, we'll handle it manually
-
- get props() {
- const { errors, isLoading, sent } = this.local;
- return { ...super.props, title: 'Contact Us', timestamp: new Date().toLocaleString(), isLoading, sent, errors };
- }
-
- bind() {
- this.on('button', 'click', () => this.submit());
- }
-
- showErrors(errors) {
- // Update error messages and styles without full re-render
- ['name', 'email', 'message'].forEach(field => {
- const input = this.$(`#${field}`);
- const errorEl = this.$(`.error-${field}`);
- if (input) input.classList.toggle('input-error', !!errors[field]);
- if (errorEl) {
- errorEl.textContent = errors[field] || '';
- errorEl.style.display = errors[field] ? 'block' : 'none';
- }
- });
- }
-
- async submit() {
- const data = {
- name: this.$('#name')?.value || '',
- email: this.$('#email')?.value || '',
- message: this.$('#message')?.value || ''
- };
-
- const { valid, errors } = validateAll(data, schema);
- this.showErrors(errors);
- if (!valid) return;
-
- // Show loading state
- const btn = this.$('button');
- btn.disabled = true;
- btn.textContent = 'Sending...';
-
- await new Promise(r => setTimeout(r, 800));
-
- // Show success and clear form
- this.$('#name').value = '';
- this.$('#email').value = '';
- this.$('#message').value = '';
- this.showErrors({});
- btn.disabled = false;
- btn.textContent = 'Send Message';
-
- // Show success message
- const successEl = this.$('.success-message');
- if (successEl) successEl.style.display = 'block';
+ static store = ['lang'];
+
+ mount() {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) entry.target.classList.add('visible');
+ });
+ }, { threshold: 0.12 });
+ this.$$('.fade-up').forEach(el => observer.observe(el));
}
}
-define('contact-page', ContactPage);
+define('contact-page', Contact);
diff --git a/app/Dashboard/Dashboard.html b/app/Dashboard/Dashboard.html
deleted file mode 100644
index 6782e70..0000000
--- a/app/Dashboard/Dashboard.html
+++ /dev/null
@@ -1,379 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/app/Dashboard/Dashboard.js b/app/Dashboard/Dashboard.js
deleted file mode 100644
index a64bdea..0000000
--- a/app/Dashboard/Dashboard.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Component, define } from '../../core/component.js';
-
-export default class DashboardPage extends Component {
- static templateUrl = '/app/Dashboard/Dashboard.html';
- static store = ['user', 'isAuthenticated'];
- static requiresAuth = true;
- static metadata = { title: 'Dashboard', description: 'Protected dashboard area' };
- static local = {
- todos: [
- { id: 1, text: 'Review quarterly reports', completed: false, priority: 'high' },
- { id: 2, text: 'Update user documentation', completed: true, priority: 'medium' },
- { id: 3, text: 'Optimize database queries', completed: false, priority: 'high' },
- { id: 4, text: 'Plan team meeting agenda', completed: false, priority: 'low' }
- ],
- filter: 'all', nextId: 5
- };
-
- get props() {
- const { todos, filter } = this.local;
- const filtered = filter === 'all' ? todos : todos.filter(t => filter === 'completed' ? t.completed : !t.completed);
- const completed = todos.filter(t => t.completed).length;
- return { ...super.props, filteredTodos: filtered, filter, filterMessage: filtered.length ? null : `No ${filter} todos`, todoCount: todos.length, activeCount: todos.length - completed, completedCount: completed };
- }
-
- bind() {
- this.on('#add-todo', 'click', () => this.addTodo());
- this.on('#new-todo-input', 'keypress', e => e.key === 'Enter' && this.addTodo());
- this.on('#clear-completed', 'click', () => this.local.todos = this.local.todos.filter(t => !t.completed));
- this.delegate('click', '[data-filter]', el => this.local.filter = el.dataset.filter);
- this.delegate('click', '.todo-delete', el => this.local.todos = this.local.todos.filter(t => t.id !== +el.dataset.todoId));
- this.delegate('change', '.todo-checkbox', el => this.local.todos = this.local.todos.map(t => t.id === +el.dataset.todoId ? { ...t, completed: !t.completed } : t));
- }
-
- addTodo() {
- const input = this.$('#new-todo-input'), text = input?.value.trim();
- if (!text) return;
- this.local.todos = [...this.local.todos, { id: this.local.nextId++, text, completed: false, priority: 'medium' }];
- input.value = '';
- }
-}
-
-define('dashboard-page', DashboardPage);
diff --git a/app/Fleet/Fleet.html b/app/Fleet/Fleet.html
new file mode 100644
index 0000000..a136f46
--- /dev/null
+++ b/app/Fleet/Fleet.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
diff --git a/app/Fleet/Fleet.js b/app/Fleet/Fleet.js
new file mode 100644
index 0000000..4f0e1d7
--- /dev/null
+++ b/app/Fleet/Fleet.js
@@ -0,0 +1,17 @@
+import { Component, define } from '../../core/component.js';
+
+export default class Fleet extends Component {
+ static templateUrl = '/app/Fleet/Fleet.html';
+ static store = ['lang'];
+
+ mount() {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) entry.target.classList.add('visible');
+ });
+ }, { threshold: 0.12 });
+ this.$$('.fade-up').forEach(el => observer.observe(el));
+ }
+}
+
+define('fleet-page', Fleet);
diff --git a/app/Home/Home.html b/app/Home/Home.html
index 5d6f0a9..6e8cfe9 100644
--- a/app/Home/Home.html
+++ b/app/Home/Home.html
@@ -1,29 +1,417 @@
+
+
+
+
+You are currently on the {{title.split(' ')[0]}} page.
-Navigate to: - Home Page | - About Page -
+ + +
+
-
-
+
+
+ {{lang === 'es' ? 'Contacto' : 'Contact'}}
+info@estremar.com
+
+
+ {{lang === 'es' ? 'Formulario de contacto aquí.' : 'Contact form here.'}}
+🛡️ Protected Dashboard
-This is a protected page that requires authentication. You can only see this content because you're logged in!
- -
- 
-
-
-
-
- Welcome back, {{user.username}}!
-Email: {{user.email}}
-Role: {{user.role}}
-User ID: {{user.id}}
-
-
-
- 🔒 Secret Information
-This content is only visible to authenticated users. Your session is secure and persistent across page refreshes.
-
-
-
- {{#if user.role === 'admin'}}
-
-
- 42
- Projects
-
-
- 1,337
- Points
-
-
- {{user.role === 'admin' ? '∞' : '5'}}
- Access Level
-
-
- {{/if}}
-
-
- 👑 Admin Features
-You have administrator privileges. Special admin-only content and features are available to you.
-
-
-
- 📝 My Tasks
-A reactive todo list with local component state management
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{#if filteredTodos.length}}
- {{#each filteredTodos}}
-
-
-
-
-
- {{/each}}
- {{else}}
-
-
- {{text}}
- {{priority}}
-
-
-
- {{#if filterMessage}}{{filterMessage}}{{else}}No todos yet!{{/if}}
-
- {{/if}}
-
- Total: {{todoCount}}
- Active: {{activeCount}}
- Completed: {{completedCount}}
-
- - Try logging out and visiting this page again - you'll be redirected to login! -
-
+
+
+
+
+
+
++ {{#if lang === 'es'}} + Nuestra Flota + {{else}} + Our Fleet + {{/if}} +
+
+
+
+
+
+
+ {{lang === 'es' ? 'Buques Palangreros' : 'Longline Vessels'}}
+ {{#if lang === 'es'}}
+ Técnica selectiva y sustentable para la captura de Merluza Negra.
+ {{else}} +Selective and sustainable technique for Patagonian Toothfish capture.
+ {{/if}} +
+
+ {{lang === 'es' ? 'Buques Pelágicos' : 'Pelagic Vessels'}}
+ {{#if lang === 'es'}}
+ Flota dirigida a pesquerías bien gestionadas de la plataforma continental.
+ {{else}} +Fleet targeting well-managed fisheries of the continental shelf.
+ {{/if}} +
+
+ {{lang === 'es' ? 'Planta a bordo' : 'Onboard Plant'}}
+ {{#if lang === 'es'}}
+ Procesamiento inmediato para garantizar máxima frescura.
+ {{else}} +Immediate processing to guarantee maximum freshness.
+ {{/if}} +
@@ -76,41 +464,293 @@
-{{t.home.authContext}}
{{t.auth.persistNote}}
-
+ You are currently on the path: {{path}}
-Navigate to: About Page | Contact Page
-
+
+
-
+
+
+ 30+
+ {{#if lang === 'es'}} AÑOS DE OPERACIÓN {{else}} YEARS OF OPERATION {{/if}}
+
+
+ MSC
+ {{#if lang === 'es'}} CERTIFICADO DESDE 2012 {{else}} CERTIFIED SINCE 2012 {{/if}}
+
+
+ #1
+ {{#if lang === 'es'}} MERLUZA NEGRA ARGENTINA {{else}} ARGENTINE TOOTHFISH #1 {{/if}}
+
+
+
+
+
-
+
+ {{#if lang === 'es'}} QUIÉNES SOMOS {{else}} WHO WE ARE {{/if}}
+
+ + {{#if lang === 'es'}} Una compañía pesquera Argentina líder {{else}} A leading Argentine fishing company {{/if}} +
+
+ {{#if lang === 'es'}}
+
+
+ {{#if lang === 'es'}} Mensaje del Presidente {{else}} President's Message {{/if}}
+
+ Estremar es una de las más grandes compañías pesqueras en Argentina. Somos proveedores líderes de Merluza Negra y nuestros productos de mar se sirven en los platos de los mercados más importantes del mundo.
+Mejoramos continuamente nuestras operaciones e invertimos en procesos de producción innovadores. Hemos operado en el puerto más austral, Ushuaia, desde 1992, y siempre nos hemos enorgullecido de emplear a las personas correctas.
+ {{else}} +Estremar is one of the largest fishing companies in Argentina. We are leading providers of Patagonian Toothfish and our seafood products are served on the plates of the world's most important markets.
+We continuously improve our operations and invest in innovative production processes. We have operated in the southernmost port, Ushuaia, since 1992, and have always taken pride in employing the right people.
+ {{/if}} +
+
+ 1992
+
+
+
+
+
+
+ {{#if lang === 'es'}} FORMATO {{else}} FORMAT {{/if}}
+ {{#if lang === 'es'}} Filetes y porciones {{else}} Fillets and portions {{/if}}
+ {{#if lang === 'es'}} Procesado a bordo y en planta, congelado a –40°C para máxima frescura. {{else}} Processed onboard and at the plant, frozen at -40°C for maximum freshness. {{/if}}
+
+
+ {{#if lang === 'es'}} DESTINOS {{else}} DESTINATIONS {{/if}}
+ {{#if lang === 'es'}} Mercados globales {{else}} Global markets {{/if}}
+ {{#if lang === 'es'}} Japón, Estados Unidos, Europa, China y los principales mercados gastronómicos del mundo. {{else}} Japan, United States, Europe, China, and the world's major gastronomic markets. {{/if}}
+
+
+
+
+
+ {{#if lang === 'es'}} SUSTENTABILIDAD {{else}} SUSTAINABILITY {{/if}}
+
+
+ + {{#if lang === 'es'}} Comprometidos con el futuro del mar {{else}} Committed to the future of the sea {{/if}} +
++ {{#if lang === 'es'}} La sustentabilidad es la base de nuestras operaciones. La existencia de productos de mar silvestres constituye la base de nuestra compañía y la forma de vida de muchas personas. {{else}} Sustainability is the foundation of our operations. The existence of wild seafood products forms the base of our company and the way of life for many people. {{/if}} +
+
+
+
+
+
+
+
+ Marine Stewardship Council
+ {{#if lang === 'es'}} Merluza de Cola certificada desde 2012. Primera en Sudamérica. {{else}} Grenadier certified since 2012. First in South America. {{/if}}
+
+
+
+
+
+ COLTO Member
+ {{#if lang === 'es'}} Coalición de Operadores Legales de Merluza Negra {{else}} Coalition of Legal Toothfish Operators {{/if}}
+
+
+
+
+
+ INIDEP
+ {{#if lang === 'es'}} Apoyo al Instituto Nacional de Investigación y Desarrollo Pesquero {{else}} Supporting the National Institute of Fishery Research and Development {{/if}}
+
+
+
+ 01
+
+
+
+ {{#if lang === 'es'}} Certificación MSC {{else}} MSC Certification {{/if}}
+ {{#if lang === 'es'}} Estremar ha promovido activamente la certificación de las pesquerías argentinas bajo los principios del Consejo de Administración Marina, el estándar de oro mundial para la pesca sustentable. {{else}} Estremar has actively promoted the certification of Argentine fisheries under the Marine Stewardship Council principles, the global gold standard for sustainable fishing. {{/if}}
+
+ 02
+
+
+
+ {{#if lang === 'es'}} Lucha contra la pesca ilegal {{else}} Fighting illegal fishing {{/if}}
+ {{#if lang === 'es'}} Como miembro de COLTO, trabajamos activamente para eliminar la pesca ilegal, no declarada y no reglamentada de Merluza Negra, protegiendo el recurso para las generaciones futuras. {{else}} As a member of COLTO, we work actively to eliminate illegal, unreported, and unregulated fishing of Patagonian Toothfish, protecting the resource for future generations. {{/if}}
+
+ 03
+
+
+
+ {{#if lang === 'es'}} Protección de la fauna marina {{else}} Marine wildlife protection {{/if}}
+ {{#if lang === 'es'}} Colaboramos con Aves Argentinas para reducir la interacción de aves con la pesca. Instructores del grupo Albatros se embarcan en nuestros viajes para reunir datos y minimizar el impacto. {{else}} We collaborate with Aves Argentinas to reduce the interaction of birds with fishing. Albatross group instructors embark on our trips to gather data and minimize impact. {{/if}}
+
+ 04
+
+
+
+ {{#if lang === 'es'}} Investigación científica {{else}} Scientific research {{/if}}
+ {{#if lang === 'es'}} Apoyamos el trabajo del INIDEP, que trabaja bajo rigurosos procedimientos científicos para lograr un manejo sustentable del stock comercial de peces en Argentina. {{else}} We support the work of INIDEP, which operates under rigorous scientific procedures to achieve sustainable management of the commercial fish stock in Argentina. {{/if}}
+
+
+
+
+
+ {{#if lang === 'es'}} CONTACTO {{else}} CONTACT {{/if}}
+
+
+ {{#if lang === 'es'}} Hablemos sobre nuestros productos {{else}} Let's talk about our products {{/if}}
+{{#if lang === 'es'}} Estamos siempre disponibles para responder sus consultas sobre nuestros productos, certificaciones y condiciones de venta. {{else}} We are always available to answer your inquiries about our products, certifications, and terms of sale. {{/if}}
+ +
+
+
+
+
+ EMAIL
infoc@estremar.com
{{#if lang === 'es'}} TELÉFONO {{else}} PHONE {{/if}}
+54 11 5032-4971
{{#if lang === 'es'}} DIRECCIÓN {{else}} ADDRESS {{/if}}
Ushuaia, Tierra del Fuego, Argentina
+
+
+
- 🛡️ Login Required
- Redirected from {{redirectFrom}}. Please login.
-
- {{/if}}
-
- - 🔐 - Login -
- -- Enter your credentials or use quick login to access protected areas -
- -
-
-
-
-
-
-
-
-
-
-
-
-
- {{#if hasErrors}}
-
- {{#each errorMessages}}
-
- {{/if}}
-
-
-
- {{#if attempts}}
- {{this}}
- {{/each}}
-
- Attempts: {{attempts}}
-
- {{/if}}
- - This is a demo - any credentials will work! -
-404
-Oops! The page you're looking for could not be found.
- Go back to Home -
+
+
+
+
+
+
++ {{#if lang === 'es'}} + Nuestros Productos + {{else}} + Our Products + {{/if}} +
+
+
+
+
+
+
+ {{lang === 'es' ? 'Merluza Negra' : 'Patagonian Toothfish'}}
+ {{#if lang === 'es'}}
+ Uno de los pescados más preciados del mundo.
+ {{else}} +One of the most prized fish in the world.
+ {{/if}} +
+
+ {{lang === 'es' ? 'Merluza de Cola' : 'Grenadier'}}
+ {{#if lang === 'es'}}
+ Primera pesquería en Sudamérica en obtener la certificación MSC.
+ {{else}} +First fishery in South America to obtain MSC certification.
+ {{/if}} +
+
+ {{lang === 'es' ? 'Calamar' : 'Squid'}}
+ {{#if lang === 'es'}}
+ Capturado en las ricas aguas de la Patagonia.
+ {{else}} +Caught in the rich Patagonian waters.
+ {{/if}} +
+
+
+
+
+
+
++ {{#if lang === 'es'}} + Nuestro Compromiso + {{else}} + Our Commitment + {{/if}} +
+
+
+
+
+
+ 01
+
+
+
+ {{lang === 'es' ? 'Certificación MSC' : 'MSC Certification'}}
+ {{#if lang === 'es'}} +Promovemos activamente la certificación de las pesquerías argentinas.
+ {{else}} +We actively promote the certification of Argentine fisheries.
+ {{/if}} +
+ 02
+
+
+
+ {{lang === 'es' ? 'Lucha contra la pesca ilegal' : 'Fighting illegal fishing'}}
+ {{#if lang === 'es'}} +Como miembro de COLTO, trabajamos para eliminar la pesca ilegal.
+ {{else}} +As a COLTO member, we work to eliminate illegal fishing.
+ {{/if}} +User Profile
- -This is a dynamic route example, where the ID is extracted from the URL.
-- Go back to Home -
-
-
-
-
+
+
diff --git a/components/Fleet/Fleet.js b/components/Fleet/Fleet.js
new file mode 100644
index 0000000..757960b
--- /dev/null
+++ b/components/Fleet/Fleet.js
@@ -0,0 +1,17 @@
+import { Component, define } from '../../core/component.js';
+
+export default class Fleet extends Component {
+ static templateUrl = '../../components/Fleet/Fleet.html';
+ static store = ['lang']; // Subscribe to lang for dynamic text
+
+ mount() {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) entry.target.classList.add('visible');
+ });
+ }, { threshold: 0.12 });
+ this.$$('.fade-up').forEach(el => observer.observe(el));
+ }
+}
+
+define('fleet-page', Fleet);
diff --git a/components/Footer/Footer.html b/components/Footer/Footer.html
new file mode 100644
index 0000000..08b155b
--- /dev/null
+++ b/components/Footer/Footer.html
@@ -0,0 +1,144 @@
+
+
+
diff --git a/components/Footer/Footer.js b/components/Footer/Footer.js
new file mode 100644
index 0000000..d34fd20
--- /dev/null
+++ b/components/Footer/Footer.js
@@ -0,0 +1,8 @@
+import { Component, define } from '../../core/component.js';
+
+export default class Footer extends Component {
+ static templateUrl = '/components/Footer/Footer.html';
+ static store = ['lang'];
+}
+
+define('app-footer', Footer);
diff --git a/components/Hero/Hero.html b/components/Hero/Hero.html
new file mode 100644
index 0000000..d4a926e
--- /dev/null
+++ b/components/Hero/Hero.html
@@ -0,0 +1,143 @@
+
+
+
+
-
-
+
diff --git a/app/_Layout/_Layout.js b/app/_Layout/_Layout.js
index 74e51c3..b63a714 100644
--- a/app/_Layout/_Layout.js
+++ b/app/_Layout/_Layout.js
@@ -2,10 +2,6 @@ import { Component, define } from '../../core/component.js';
export default class Layout extends Component {
static templateUrl = '/app/_Layout/_Layout.html';
-
- get props() {
- return { ...super.props, year: new Date().getFullYear() };
- }
}
define('app-layout', Layout);
diff --git a/components/About/About.html b/components/About/About.html
new file mode 100644
index 0000000..acff61d
--- /dev/null
+++ b/components/About/About.html
@@ -0,0 +1,107 @@
+
+
+
+
diff --git a/components/About/About.js b/components/About/About.js
new file mode 100644
index 0000000..5ccc018
--- /dev/null
+++ b/components/About/About.js
@@ -0,0 +1,8 @@
+import { Component, define } from '../../core/component.js';
+
+export default class About extends Component {
+ static templateUrl = '../../components/About/About.html';
+ static store = ['lang']; // Subscribe to lang for dynamic text
+}
+
+define('home-about', About);
diff --git a/components/Counter/Counter.js b/components/Counter/Counter.js
deleted file mode 100644
index 091e88b..0000000
--- a/components/Counter/Counter.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, store, define } from '../../core/component.js';
-
-export default class Counter extends Component {
- static templateUrl = '/components/Counter/Counter.html';
- static store = ['counter'];
-
- bind() {
- this.on('.increment', 'click', () => store.update('counter', c => c + 1));
- this.on('.decrement', 'click', () => store.update('counter', c => Math.max(0, c - 1)));
- }
-}
-
-define('app-counter', Counter);
diff --git a/components/Fleet/Fleet.html b/components/Fleet/Fleet.html
new file mode 100644
index 0000000..2f4bcce
--- /dev/null
+++ b/components/Fleet/Fleet.html
@@ -0,0 +1,119 @@
+
+
+
+
+
+ {{#if lang === 'es'}} QUIÉNES SOMOS {{else}} WHO WE ARE {{/if}}
+
+ + {{#if lang === 'es'}} Una compañía pesquera Argentina líder {{else}} A leading Argentine fishing company {{/if}} +
+
+ {{#if lang === 'es'}}
+
+
+ {{#if lang === 'es'}} Mensaje del Presidente {{else}} President's Message {{/if}}
+
+ Estremar es una de las más grandes compañías pesqueras en Argentina. Somos proveedores líderes de Merluza Negra y nuestros productos de mar se sirven en los platos de los mercados más importantes del mundo.
+Mejoramos continuamente nuestras operaciones e invertimos en procesos de producción innovadores. Hemos operado en el puerto más austral, Ushuaia, desde 1992, y siempre nos hemos enorgullecido de emplear a las personas correctas.
+ {{else}} +Estremar is one of the largest fishing companies in Argentina. We are leading providers of Patagonian Toothfish and our seafood products are served on the plates of the world's most important markets.
+We continuously improve our operations and invest in innovative production processes. We have operated in the southernmost port, Ushuaia, since 1992, and have always taken pride in employing the right people.
+ {{/if}} +
+
+ 1992
+
+
+
+
+
+
+ {{#if lang === 'es'}} NUESTRA FLOTA {{else}} OUR FLEET {{/if}}
+
+ + {{#if lang === 'es'}} Operaciones en aguas del Atlántico Sur {{else}} Operations in South Atlantic waters {{/if}} +
++ {{#if lang === 'es'}} Nuestra flota opera en las aguas de la Plataforma Continental Argentina, con base en Ushuaia, el puerto más austral del mundo. Empleamos las más modernas tecnologías de pesca responsable. {{else}} Our fleet operates in the waters of the Argentine Continental Shelf, based in Ushuaia, the world's southernmost port. We employ the most modern responsible fishing technologies. {{/if}} +
+
+
+
+
+
+ {{#if lang === 'es'}} PESCA DE PALANGRE {{else}} LONGLINE FISHING {{/if}}
+ {{#if lang === 'es'}} Buques Palangreros {{else}} Longline Vessels {{/if}}
+ {{#if lang === 'es'}} Embarcaciones especializadas en la captura de Merluza Negra mediante el sistema de palangre, la técnica más selectiva y sustentable disponible. {{else}} Vessels specialized in Patagonian Toothfish capture using the longline system, the most selective and sustainable technique available. {{/if}}
+
+
+ {{#if lang === 'es'}} ESPECIE OBJETIVO {{else}} TARGET SPECIES {{/if}}{{#if lang === 'es'}} Merluza Negra {{else}} Patagonian Toothfish {{/if}}
+ {{#if lang === 'es'}} PUERTO BASE {{else}} HOME PORT {{/if}}Ushuaia, TDF
+ CERTIF.MSC ✓
+
+
+
+ {{#if lang === 'es'}} PESCA PELÁGICA {{else}} PELAGIC FISHING {{/if}}
+ {{#if lang === 'es'}} Buques Pelágicos {{else}} Pelagic Vessels {{/if}}
+ {{#if lang === 'es'}} Flota dirigida a la captura de especies pelágicas en pesquerías bien gestionadas y sustentables de la Plataforma Continental Argentina. {{else}} Fleet targeting the capture of pelagic species in well-managed and sustainable fisheries of the Argentine Continental Shelf. {{/if}}
+
+
+ {{#if lang === 'es'}} ÁREA DE PESCA {{else}} FISHING AREA {{/if}}{{#if lang === 'es'}} Plataforma Continental {{else}} Continental Shelf {{/if}}
+ ZONAFAO 41
+
+
+ {{#if lang === 'es'}} PROCESAMIENTO A BORDO {{else}} ONBOARD PROCESSING {{/if}}
+ {{#if lang === 'es'}} Planta de Procesado {{else}} Processing Plant {{/if}}
+ {{#if lang === 'es'}} Procesamiento a bordo de los buques y en tierra en Ushuaia, con los más altos estándares de calidad para la cadena de frío. {{else}} Onboard and onshore processing in Ushuaia, with the highest quality standards for the cold chain. {{/if}}
+
+
+ {{#if lang === 'es'}} UBICACIÓN {{else}} LOCATION {{/if}}Ushuaia, Argentina
+ ESTÁNDARHACCP ✓
+
+
+
+
+
+
+
+
+
+
+
+
+ {{#if lang === 'es'}} PESCA ARGENTINA · DESDE 1992 {{else}} ARGENTINE FISHING · SINCE 1992 {{/if}}
+
+ + {{#if lang === 'es'}} Proveedor líder de Merluza Negra del mar austral {{else}} Leading provider of Patagonian Toothfish from the southern sea {{/if}} +
++ {{#if lang === 'es'}} + Operamos desde Ushuaia, el puerto más austral del mundo, pescando con responsabilidad en las aguas de la Plataforma Continental Argentina. + {{else}} + We operate from Ushuaia, the world's southernmost port, fishing responsibly in the waters of the Argentine Continental Shelf. + {{/if}} +
+ +
+
diff --git a/components/Hero/Hero.js b/components/Hero/Hero.js
new file mode 100644
index 0000000..660717f
--- /dev/null
+++ b/components/Hero/Hero.js
@@ -0,0 +1,8 @@
+import { Component, define } from '../../core/component.js';
+
+export default class Hero extends Component {
+ static templateUrl = '../../components/Hero/Hero.html';
+ static store = ['lang']; // Subscribe to lang for dynamic text
+}
+
+define('home-hero', Hero);
diff --git a/components/LocalStateDisplay/LocalStateDisplay.html b/components/LocalStateDisplay/LocalStateDisplay.html
deleted file mode 100644
index 676c15f..0000000
--- a/components/LocalStateDisplay/LocalStateDisplay.html
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
-
+ 30+
+ {{#if lang === 'es'}} AÑOS DE OPERACIÓN {{else}} YEARS OF OPERATION {{/if}}
+
+
+ MSC
+ {{#if lang === 'es'}} CERTIFICADO DESDE 2012 {{else}} CERTIFIED SINCE 2012 {{/if}}
+
+
+ #1
+ {{#if lang === 'es'}} MERLUZA NEGRA ARGENTINA {{else}} ARGENTINE TOOTHFISH #1 {{/if}}
+
+
-
diff --git a/components/LocalStateDisplay/LocalStateDisplay.js b/components/LocalStateDisplay/LocalStateDisplay.js
deleted file mode 100644
index b862f86..0000000
--- a/components/LocalStateDisplay/LocalStateDisplay.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component, define } from '../../core/component.js';
-
-export default class LocalStateDisplay extends Component {
- static templateUrl = '/components/LocalStateDisplay/LocalStateDisplay.html';
- static local = { count: 0, message: '', cardClass: '' };
-
- #pendingProps = {};
-
- // Props can be set before component is connected - store them for later
- set count(val) {
- if (this.shadowRoot) this.local.count = val;
- else this.#pendingProps.count = val;
- }
-
- set message(val) {
- if (this.shadowRoot) this.local.message = val;
- else this.#pendingProps.message = val;
- }
-
- set cardClass(val) {
- if (this.shadowRoot) this.local.cardClass = val;
- else this.#pendingProps.cardClass = val;
- }
-
- mount() {
- // Apply any props that were set before component was connected
- this.batch(() => {
- if (this.#pendingProps.count !== undefined) this.local.count = this.#pendingProps.count;
- if (this.#pendingProps.message !== undefined) this.local.message = this.#pendingProps.message;
- if (this.#pendingProps.cardClass !== undefined) this.local.cardClass = this.#pendingProps.cardClass;
- });
- }
-
- // Emit events to parent to update its state
- increment() {
- this.emit('update-count', { delta: 1 });
- }
-
- decrement() {
- this.emit('update-count', { delta: -1 });
- }
-}
-
-define('local-state-display', LocalStateDisplay);
diff --git a/components/Logo/Logo.js b/components/Logo/Logo.js
new file mode 100644
index 0000000..fdff58b
--- /dev/null
+++ b/components/Logo/Logo.js
@@ -0,0 +1,7 @@
+import { Component, define } from '../../core/component.js';
+
+export default class Logo extends Component {
+ static templateUrl = '/components/Logo/Logo.html';
+}
+
+define('app-logo', Logo);
diff --git a/components/Navigation/Navigation.html b/components/Navigation/Navigation.html
index ba435fa..6aeb4a4 100644
--- a/components/Navigation/Navigation.html
+++ b/components/Navigation/Navigation.html
@@ -1,82 +1,86 @@
Props received from parent:
- Count: {{count}}
-
-
-
-
- {{#if message}}
-
- {{/if}}
-
+
diff --git a/components/Values/Values.js b/components/Values/Values.js
new file mode 100644
index 0000000..d0ca238
--- /dev/null
+++ b/components/Values/Values.js
@@ -0,0 +1,8 @@
+import { Component, define } from '../../core/component.js';
+
+export default class Values extends Component {
+ static templateUrl = '../../components/Values/Values.html';
+ static store = ['lang']; // Subscribe to lang for dynamic text
+}
+
+define('home-values', Values);
diff --git a/globals.css b/globals.css
index dcea4f0..b21434a 100644
--- a/globals.css
+++ b/globals.css
@@ -1,75 +1,130 @@
-/* Global CSS Custom Properties for Theme Switching */
-
:root {
- /* Light theme (default) */
- --bg-color: #ffffff;
- --bg-secondary: #f8f9fa;
- --text-color: #212529;
- --text-secondary: #6c757d;
- --border-color: #dee2e6;
- --hover-bg: #e9ecef;
- --primary-color: #0d6efd;
- --primary-hover: #0b5ed7;
- --success-color: #198754;
- --danger-color: #dc3545;
- --warning-color: #ffc107;
- --info-color: #0dcaf0;
-
- /* Shadows */
- --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
- --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
- --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
-
- /* Transitions */
- --transition: all 0.2s ease;
+ --blue: #2B789D;
+ --blue-dark: #1d5a7a;
+ --blue-deep: #0d2233;
+ --teal: #9CC0CC;
+ --teal-light: #c8dde4;
+ --navy: #0a1825;
+ --navy-mid: #112233;
+ --white: #f7f8f9;
+ --off-white: #eef2f5;
+ --text-dark: #111820;
+ --text-mid: #3d5162;
+ --text-light: #7a95a8;
+ --font-serif: 'EB Garamond', Georgia, serif;
+ --font-sans: 'DM Sans', Helvetica, Arial, sans-serif;
}
-[data-theme="dark"] {
- /* Dark theme */
- --bg-color: #121212;
- --bg-secondary: #1e1e1e;
- --text-color: #ffffff;
- --text-secondary: #b3b3b3;
- --border-color: #404040;
- --hover-bg: #2a2a2a;
- --primary-color: #4dabf7;
- --primary-hover: #339af0;
- --success-color: #51cf66;
- --danger-color: #ff6b6b;
- --warning-color: #ffd43b;
- --info-color: #74c0fc;
-
- /* Dark shadows */
- --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
- --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
- --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
-}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-/* Prevent layout shift from scrollbar */
html {
- scrollbar-gutter: stable;
+ scroll-behavior: smooth;
}
-/* Global body styles */
body {
- background-color: var(--bg-color);
- color: var(--text-color);
- transition: var(--transition);
+ font-family: var(--font-sans);
+ background: var(--white);
+ color: var(--text-dark);
+ overflow-x: hidden;
+ line-height: 1.5;
+}
+
+/* Framework specific base styles */
+[hidden] { display: none; }
+
+/* Global animations */
+.fade-up {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.fade-up.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .fade-up {
+ transition: none;
+ }
+}
+
+/* ── SHARED HERO/HEADER STYLES ── */
+
+.hero-visuals {
+ position: absolute;
+ inset: 0;
+ overflow: hidden;
+ pointer-events: none;
+ z-index: 0;
}
-/* Ensure custom elements are block-level before JS defines them (for SSR/DSD) */
-app-layout, app-router, app-navigation, app-counter, theme-toggle, local-state-display,
-home-page, about-page, contact-page, dashboard-page, login-page, notfound-page, user-page {
- display: block;
+.hero-bg {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(160deg, #0a1825 0%, #0d2c42 40%, #1a4a6b 70%, #2B789D 100%);
}
-/* Prevent layout shifts during hydration */
-app-layout {
- contain: layout style;
+.hero-grid-lines {
+ position: absolute;
+ inset: -100px;
+ background-image:
+ linear-gradient(rgba(156,192,204,0.04) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(156,192,204,0.04) 1px, transparent 1px);
+ background-size: 80px 80px;
+ animation: gridMove 40s linear infinite;
}
-/* Apply theme to web component host elements */
-:host {
- --host-bg: var(--bg-color);
- --host-text: var(--text-color);
-}
\ No newline at end of file
+@keyframes gridMove {
+ 0% { transform: translate(0, 0); }
+ 100% { transform: translate(80px, 80px); }
+}
+
+.hero-waves {
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 60%;
+ opacity: 0.08;
+ background-image: repeating-linear-gradient(
+ 0deg,
+ transparent,
+ transparent 28px,
+ rgba(156,192,204,0.6) 28px,
+ rgba(156,192,204,0.6) 29px
+ );
+}
+
+.page-header {
+ position: relative;
+ background: var(--navy);
+ padding: 160px 0 100px;
+ min-height: 400px;
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+}
+
+.page-title {
+ position: relative;
+ z-index: 1;
+ font-family: var(--font-serif);
+ font-size: clamp(40px, 5vw, 72px);
+ font-weight: 400;
+ color: #fff;
+ line-height: 1.1;
+}
+
+.page-title em {
+ font-style: italic;
+ color: var(--teal-light);
+}
+
+.section-inner {
+ position: relative;
+ z-index: 1;
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 56px;
+ width: 100%;
+}
diff --git a/index.html b/index.html
index 350bb72..8f10e7a 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,9 @@
-
+
+
+
+
+
+ {{#if lang === 'es'}} Confianza del cliente {{else}} Customer trust {{/if}}
+ {{#if lang === 'es'}} La confianza de nuestros clientes es la base para nuestras operaciones y todos los días nos esforzamos por superar sus expectativas. {{else}} Our customers' trust is the foundation for our operations, and every day we strive to exceed their expectations. {{/if}}
+
+
+
+
+ {{#if lang === 'es'}} Practicidad operativa {{else}} Operational practicality {{/if}}
+ {{#if lang === 'es'}} Nos involucramos y comprometemos, sabemos qué estamos haciendo y hacemos bien nuestro trabajo. {{else}} We get involved and committed; we know what we are doing and we do our job well. {{/if}}
+
+
+
+
+ {{#if lang === 'es'}} Seguridad y medioambiente {{else}} Safety and environment {{/if}}
+ {{#if lang === 'es'}} Nos importa y nos responsabilizamos personalmente por la seguridad de nuestra gente y el medio ambiente. {{else}} We care and take personal responsibility for the safety of our people and the environment. {{/if}}
+
+
+
+
+ {{#if lang === 'es'}} Desarrollo de personas {{else}} People development {{/if}}
+ {{#if lang === 'es'}} Nuestros logros son resultado de los esfuerzos del equipo. Compartimos lo que sabemos y nos ayudamos mutuamente. {{else}} Our achievements are the result of team effort. We share what we know and help each other. {{/if}}
+