Merge version_2_1781384654253 into main #2
@@ -1,177 +1,27 @@
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import LegacySection from './HomePage/sections/Legacy';
|
||||
import OperationsSection from './HomePage/sections/Operations';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboard
|
||||
title="The Bedrock of Egyptian Energy. The Standard of Global Engineering."
|
||||
description="Since 1965, GUPCO has stood as a monumental force in oil and gas production—combining heritage, precision, and an unyielding commitment to operational excellence."
|
||||
primaryButton={{
|
||||
text: "Explore Ventures",
|
||||
href: "#operations",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Our Legacy",
|
||||
href: "#legacy",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/lifeguard-tower-beach-sunset-corrubedo-natural-park-spain_181624-24879.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Institutional Impact"
|
||||
title="A Monumental Scale"
|
||||
description="Decades of engineering excellence that define the industry standard."
|
||||
metrics={[
|
||||
{
|
||||
value: "1965",
|
||||
title: "The Pioneers of Energy",
|
||||
features: [
|
||||
"Historical legacy",
|
||||
"Industry leader",
|
||||
"Founded in Egypt",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "62,000+",
|
||||
title: "Daily Crude Output",
|
||||
features: [
|
||||
"High production",
|
||||
"Market influence",
|
||||
"Global supply",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "Academy",
|
||||
title: "School of Management",
|
||||
features: [
|
||||
"Elite training",
|
||||
"Operational focus",
|
||||
"Middle East standard",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "100/100",
|
||||
title: "Safety Discipline",
|
||||
features: [
|
||||
"Uncompromising rigor",
|
||||
"Strict protocols",
|
||||
"Elite performance",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="legacy" data-section="legacy">
|
||||
<SectionErrorBoundary name="legacy">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Institutional Pillars"
|
||||
title="Defining the Standard"
|
||||
description="What makes GUPCO the elite institution for energy exploration."
|
||||
items={[
|
||||
{
|
||||
title: "Monumental Legacy",
|
||||
description: "Known as the bedrock and history of Egypt's petroleum sector, delivering decades of impact.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/environmental-pollution-factory-exterior-night_23-2149057719.jpg",
|
||||
},
|
||||
{
|
||||
title: "School of Petroleum",
|
||||
description: "Revered as an elite institution of leadership, rigorous organization, and strict operational discipline.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sunset-coastal-city_181624-286.jpg",
|
||||
},
|
||||
{
|
||||
title: "Elite Engineering",
|
||||
description: "Powered by a highly organized, deeply respectful, and impeccably professional workforce.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sunset-sea-bridge_1150-12671.jpg",
|
||||
},
|
||||
{
|
||||
title: "Iconic Presence",
|
||||
description: "Headquartered in a retro-style architectural landmark in New Maadi, Cairo, anchoring our presence.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/refinery-illuminates-dusk-with-fuel-storage-tanks-generated-by-ai_188544-40141.jpg",
|
||||
},
|
||||
{
|
||||
title: "Strategic Alliances",
|
||||
description: "Partnering with global energy giants to push the boundaries of exploration and production.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/breathtaking-scenery-sun-setting-ocean-bonaire-caribbean_181624-17162.jpg",
|
||||
},
|
||||
{
|
||||
title: "Safety Stewardship",
|
||||
description: "An unwavering commitment to occupational health and safety across all operations.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-tank-container-water-storage_23-2151748357.jpg",
|
||||
},
|
||||
{
|
||||
title: "Elite Diplomacy",
|
||||
description: "Renowned for providing an elite, welcoming, and highly organized reception for dignitaries.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-landscape-photo_23-2149728860.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<LegacySection />
|
||||
|
||||
<div id="operations" data-section="operations">
|
||||
<SectionErrorBoundary name="operations">
|
||||
<FaqTwoColumn
|
||||
tag="Operations"
|
||||
title="Powering the Future with Precision"
|
||||
description="GUPCO operational focus centers on safety, production, and collaboration."
|
||||
items={[
|
||||
{
|
||||
question: "Exploration & Production",
|
||||
answer: "Focusing on the Gulf of Suez and Red Sea regions in joint venture with global giants like Dragon Oil.",
|
||||
},
|
||||
{
|
||||
question: "Occupational Health & Safety",
|
||||
answer: "We maintain a strict, uncompromising focus on safety, organization, and environmental stewardship.",
|
||||
},
|
||||
{
|
||||
question: "Corporate PR",
|
||||
answer: "We are renowned for providing an elite, welcoming, and highly organized reception for international partners.",
|
||||
},
|
||||
{
|
||||
question: "Institutional Discipline",
|
||||
answer: "Every aspect of our operations is grounded in the tradition of strict management and process execution.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<OperationsSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Initiate"
|
||||
text="Partner with a Titan. Connect with the most organized energy institution in the region."
|
||||
primaryButton={{
|
||||
text: "Initiate Strategic Partnership",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
58
src/pages/HomePage/sections/Contact.tsx
Normal file
58
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
const primaryButton = {
|
||||
text: "Initiate Strategic Partnership",
|
||||
href: "#"
|
||||
};
|
||||
const secondaryButton = {
|
||||
text: "Contact Us",
|
||||
href: "#"
|
||||
};
|
||||
|
||||
const ContactInline = () => {
|
||||
return (
|
||||
<section aria-label="Contact section" className="py-20">
|
||||
<div className="w-content-width mx-auto">
|
||||
<ScrollReveal variant="fade">
|
||||
<div className="flex flex-col items-center gap-8 md:gap-10 py-20 px-8 rounded card">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Initiate"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Partner with a Titan. Connect with the most organized energy institution in the region."}
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-col items-center gap-2 text-muted-foreground text-lg">
|
||||
<p>Call us directly at <a href="tel:0227061999" className="text-primary-cta hover:underline font-semibold">0227061999</a></p>
|
||||
<p>or via email at <a href="mailto:inquiries@gupco.net" className="text-primary-cta hover:underline font-semibold">inquiries@gupco.net</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ContactSection() {
|
||||
return (
|
||||
<div data-webild-section="contact" id="contact">
|
||||
<ContactInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
src/pages/HomePage/sections/Hero.tsx
Normal file
28
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboard
|
||||
title="The Bedrock of Egyptian Energy. The Standard of Global Engineering."
|
||||
description="Since 1965, GUPCO has stood as a monumental force in oil and gas production—combining heritage, precision, and an unyielding commitment to operational excellence."
|
||||
primaryButton={{
|
||||
text: "Explore Ventures",
|
||||
href: "#operations",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Our Legacy",
|
||||
href: "#legacy",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/lifeguard-tower-beach-sunset-corrubedo-natural-park-spain_181624-24879.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
64
src/pages/HomePage/sections/Legacy.tsx
Normal file
64
src/pages/HomePage/sections/Legacy.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "legacy" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function LegacySection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="legacy" data-section="legacy">
|
||||
<SectionErrorBoundary name="legacy">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Institutional Pillars"
|
||||
title="Defining the Standard"
|
||||
description="What makes GUPCO the elite institution for energy exploration."
|
||||
items={[
|
||||
{
|
||||
title: "Monumental Legacy",
|
||||
description: "Known as the bedrock and history of Egypt's petroleum sector, delivering decades of impact.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/environmental-pollution-factory-exterior-night_23-2149057719.jpg",
|
||||
},
|
||||
{
|
||||
title: "School of Petroleum",
|
||||
description: "Revered as an elite institution of leadership, rigorous organization, and strict operational discipline.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sunset-coastal-city_181624-286.jpg",
|
||||
},
|
||||
{
|
||||
title: "Elite Engineering",
|
||||
description: "Powered by a highly organized, deeply respectful, and impeccably professional workforce.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sunset-sea-bridge_1150-12671.jpg",
|
||||
},
|
||||
{
|
||||
title: "Iconic Presence",
|
||||
description: "Headquartered in a retro-style architectural landmark in New Maadi, Cairo, anchoring our presence.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/refinery-illuminates-dusk-with-fuel-storage-tanks-generated-by-ai_188544-40141.jpg",
|
||||
},
|
||||
{
|
||||
title: "Strategic Alliances",
|
||||
description: "Partnering with global energy giants to push the boundaries of exploration and production.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/breathtaking-scenery-sun-setting-ocean-bonaire-caribbean_181624-17162.jpg",
|
||||
},
|
||||
{
|
||||
title: "Safety Stewardship",
|
||||
description: "An unwavering commitment to occupational health and safety across all operations.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-tank-container-water-storage_23-2151748357.jpg",
|
||||
},
|
||||
{
|
||||
title: "Elite Diplomacy",
|
||||
description: "Renowned for providing an elite, welcoming, and highly organized reception for dignitaries.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-landscape-photo_23-2149728860.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
src/pages/HomePage/sections/Metrics.tsx
Normal file
58
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Institutional Impact"
|
||||
title="A Monumental Scale"
|
||||
description="Decades of engineering excellence that define the industry standard."
|
||||
metrics={[
|
||||
{
|
||||
value: "1965",
|
||||
title: "The Pioneers of Energy",
|
||||
features: [
|
||||
"Historical legacy",
|
||||
"Industry leader",
|
||||
"Founded in Egypt",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "62,000+",
|
||||
title: "Daily Crude Output",
|
||||
features: [
|
||||
"High production",
|
||||
"Market influence",
|
||||
"Global supply",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "Academy",
|
||||
title: "School of Management",
|
||||
features: [
|
||||
"Elite training",
|
||||
"Operational focus",
|
||||
"Middle East standard",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "100/100",
|
||||
title: "Safety Discipline",
|
||||
features: [
|
||||
"Uncompromising rigor",
|
||||
"Strict protocols",
|
||||
"Elite performance",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/Operations.tsx
Normal file
38
src/pages/HomePage/sections/Operations.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "operations" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function OperationsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="operations" data-section="operations">
|
||||
<SectionErrorBoundary name="operations">
|
||||
<FaqTwoColumn
|
||||
tag="Operations"
|
||||
title="Powering the Future with Precision"
|
||||
description="GUPCO operational focus centers on safety, production, and collaboration."
|
||||
items={[
|
||||
{
|
||||
question: "Exploration & Production",
|
||||
answer: "Focusing on the Gulf of Suez and Red Sea regions in joint venture with global giants like Dragon Oil.",
|
||||
},
|
||||
{
|
||||
question: "Occupational Health & Safety",
|
||||
answer: "We maintain a strict, uncompromising focus on safety, organization, and environmental stewardship.",
|
||||
},
|
||||
{
|
||||
question: "Corporate PR",
|
||||
answer: "We are renowned for providing an elite, welcoming, and highly organized reception for international partners.",
|
||||
},
|
||||
{
|
||||
question: "Institutional Discipline",
|
||||
answer: "Every aspect of our operations is grounded in the tradition of strict management and process execution.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user