GNXSOFT.COM
This commit is contained in:
Iliyan Angelov
110
gnx-react/components/pages/career/CareerBanner.tsx
Normal file
110
gnx-react/components/pages/career/CareerBanner.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
||||
import Image from "next/legacy/image";
|
||||
import Link from "next/link";
|
||||
import thumb from "@/public/images/banner/cp-thumb.png";
|
||||
|
||||
const CareerBanner = () => {
|
||||
useEffect(() => {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
if (document.querySelector(".career-banner")) {
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: ".career-banner",
|
||||
start: "center center",
|
||||
end: "+=100%",
|
||||
scrub: true,
|
||||
pin: false,
|
||||
},
|
||||
});
|
||||
|
||||
tl.to(".cp-banner-thumb", {
|
||||
opacity: 0.1,
|
||||
y: "40%",
|
||||
duration: 2,
|
||||
});
|
||||
|
||||
tl.to(
|
||||
".career-banner",
|
||||
{
|
||||
"--scale": 3,
|
||||
duration: 2,
|
||||
},
|
||||
0
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="career-banner fix-top bg-black position-relative overflow-hidden">
|
||||
<div className="container">
|
||||
<div className="row justify-content-end">
|
||||
<div className="col-12 col-lg-11">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-12 col-sm-11 col-md-10 col-xl-8 col-xxl-9">
|
||||
<div className="cp-banner__content">
|
||||
<h2 className="mt-8 fw-7 text-xxl title-anim text-white">
|
||||
Grow your career the way you feel
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-1 col-md-2 col-xl-4 col-xxl-3">
|
||||
<div className="cp-banner-thumb dir-rtl">
|
||||
<Image src={thumb} className="mh-300 unset" alt="Image" width={400} height={300} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="social">
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.facebook.com/"
|
||||
target="_blank"
|
||||
aria-label="share us on facebook"
|
||||
>
|
||||
<i className="fa-brands fa-facebook-f"></i>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.twitter.com/"
|
||||
target="_blank"
|
||||
aria-label="share us on twitter"
|
||||
>
|
||||
<i className="fa-brands fa-twitter"></i>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.pinterest.com/"
|
||||
target="_blank"
|
||||
aria-label="share us on pinterest"
|
||||
>
|
||||
<i className="fa-brands fa-linkedin-in"></i>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.instagram.com/"
|
||||
target="_blank"
|
||||
aria-label="share us on instagram"
|
||||
>
|
||||
<i className="fa-brands fa-instagram"></i>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="#scroll-to" className="scroll-to">
|
||||
Scroll
|
||||
<span className="arrow"></span>
|
||||
</Link>
|
||||
<span className="sm-c"></span>
|
||||
<span className="sm-c sm-cl"></span>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CareerBanner;
|
||||
65
gnx-react/components/pages/career/CareerInitAnimations.tsx
Normal file
65
gnx-react/components/pages/career/CareerInitAnimations.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const SmoothScroll = dynamic(() => import("../../shared/layout/animations/SmoothScroll"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const ParallaxImage = dynamic(() => import("../../shared/layout/animations/ParallaxImage"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const FadeImageBottom = dynamic(() => import("../../shared/layout/animations/FadeImageBottom"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const ButtonHoverAnimation = dynamic(
|
||||
() => import("../../shared/layout/animations/ButtonHoverAnimation"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const VanillaTiltHover = dynamic(
|
||||
() => import("../../shared/layout/animations/VanillaTiltHover"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const SplitTextAnimations = dynamic(
|
||||
() => import("../../shared/layout/animations/SplitTextAnimations"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const ScrollToElement = dynamic(() => import("../../shared/layout/animations/ScrollToElement"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const AppearDown = dynamic(() => import("../../shared/layout/animations/AppearDown"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const FadeAnimations = dynamic(() => import("../../shared/layout/animations/FadeAnimations"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const CareerInitAnimations = () => {
|
||||
return (
|
||||
<>
|
||||
<SmoothScroll />
|
||||
<ParallaxImage />
|
||||
<FadeImageBottom />
|
||||
<ButtonHoverAnimation />
|
||||
<VanillaTiltHover />
|
||||
<SplitTextAnimations />
|
||||
<ScrollToElement />
|
||||
<AppearDown />
|
||||
<FadeAnimations />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CareerInitAnimations;
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
const CareerScrollProgressButton = () => {
|
||||
useEffect(() => {
|
||||
window.scroll(0, 0);
|
||||
}, []);
|
||||
|
||||
const [scrollProgress, setScrollProgress] = useState(0);
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const scrollRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const handleScroll = () => {
|
||||
const totalHeight = document.body.scrollHeight - window.innerHeight;
|
||||
const progress = (window.scrollY / totalHeight) * 100;
|
||||
setScrollProgress(progress);
|
||||
setIsActive(window.scrollY > 50);
|
||||
};
|
||||
|
||||
const handleProgressClick = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
handleScroll();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={scrollRef}
|
||||
className={`progress-wrap ${isActive ? " active-progress" : " "}`}
|
||||
onClick={handleProgressClick}
|
||||
title="Go To Top"
|
||||
>
|
||||
<span></span>
|
||||
<svg
|
||||
className="progress-circle svg-content"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="-1 -1 102 102"
|
||||
>
|
||||
<path
|
||||
d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
|
||||
stroke="#3887FE"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
style={{
|
||||
strokeDasharray: "308.66px",
|
||||
strokeDashoffset: `${308.66 - scrollProgress * 3.0866}px`,
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default CareerScrollProgressButton;
|
||||
153
gnx-react/components/pages/career/JobSingle.tsx
Normal file
153
gnx-react/components/pages/career/JobSingle.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const JobSingle = () => {
|
||||
return (
|
||||
<section className="job-single fix-top pb-120 sticky-wrapper">
|
||||
<div className="container">
|
||||
<div className="row vertical-column-gap">
|
||||
<div className="col-12 col-lg-7">
|
||||
<div className="j-d-content sticky-item">
|
||||
<div className="intro">
|
||||
<h2 className="mt-8 text-secondary fw-7 title-anim mb-24">
|
||||
UI/UX Design
|
||||
</h2>
|
||||
<p>
|
||||
Position: <span className="position mb-12">(02)</span>
|
||||
</p>
|
||||
<p>
|
||||
Location: <span className="location">(Remote)</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="group pt-120">
|
||||
<h4 className="mt-8 text-secondary title-anim fw-6 mb-24">
|
||||
Who we are
|
||||
</h4>
|
||||
<p className="cur-lg">
|
||||
Lorem ipsum dolor sit amet consectetur. Augue morbi sapien
|
||||
malesuada augue massa vivamus pharetra. Pellentesque velit
|
||||
lectus dui convallis posuere viverra enim mauris. Pulvinar
|
||||
quam vitae ut viverra. Vitae quis cursus magna sit amet neque
|
||||
ultricies lectus massa. Sem mauris tincidunt risus enim
|
||||
adipiscing viverra. Interdum lectus interdum diam ultricies
|
||||
molestie. In et ullamcorper semper odio enim.
|
||||
</p>
|
||||
</div>
|
||||
<div className="group mt-60">
|
||||
<h4 className="mt-8 text-secondary title-anim fw-6 mb-24">
|
||||
What you want
|
||||
</h4>
|
||||
<ul>
|
||||
<li>
|
||||
you have at least three years of commercial experience
|
||||
</li>
|
||||
<li>
|
||||
you have a strong web/UI portfolio including published
|
||||
projects
|
||||
</li>
|
||||
<li>fluent English in verbal and written communication</li>
|
||||
<li>
|
||||
you are passionate about user interface and web design
|
||||
</li>
|
||||
<li>issues are challenges not show-stoppers for you</li>
|
||||
<li>you are a trend seeker</li>
|
||||
<li>you bring a lot of attention to details</li>
|
||||
<li>
|
||||
you plan upfront, think ahead, and are ready to be surprised
|
||||
</li>
|
||||
<li>you think about the full picture</li>
|
||||
<li>
|
||||
you are familiar with any UI design tool, i.e., Sketch,
|
||||
Figma or Adobe XD
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="group mt-60">
|
||||
<h4 className="mt-8 text-secondary title-anim fw-6 mb-24">
|
||||
Who we are
|
||||
</h4>
|
||||
<p className="cur-lg">
|
||||
Lorem ipsum dolor sit amet consectetur. Augue morbi sapien
|
||||
malesuada augue massa vivamus pharetra. Pellentesque velit
|
||||
lectus dui convallis posuere viverra enim mauris. Pulvinar
|
||||
quam vitae ut viverra. Vitae quis cursus magna sit amet neque
|
||||
ultricies lectus massa. Sem mauris tincidunt risus enim
|
||||
adipiscing viverra. Interdum lectus interdum diam ultricies
|
||||
molestie. In et ullamcorper semper odio enim.
|
||||
</p>
|
||||
</div>
|
||||
<div className="group mt-60">
|
||||
<h4 className="mt-8 text-secondary title-anim fw-6 mb-24">
|
||||
Bonus points
|
||||
</h4>
|
||||
<ul>
|
||||
<li>you have at least three years</li>
|
||||
<li>you have a strong web/UI portfolio including</li>
|
||||
<li>fluent English in verbal</li>
|
||||
<li>you are passionate about user interface</li>
|
||||
<li>issues are challenges</li>
|
||||
<li>you are a seeker</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="group mt-60">
|
||||
<h4 className="mt-8 text-secondary title-anim fw-6 mb-24">
|
||||
What you get is what you see
|
||||
</h4>
|
||||
<ul>
|
||||
<li>you have at least three years</li>
|
||||
<li>you have a strong web/UI portfolio including</li>
|
||||
<li>fluent English in verbal</li>
|
||||
<li>you are passionate about user interface</li>
|
||||
<li>issues are challenges</li>
|
||||
<li>you are a seeker</li>
|
||||
<li>fluent English in verbal and written communication</li>
|
||||
<li>
|
||||
you are passionate about user interface and web design
|
||||
</li>
|
||||
<li>issues are challenges not show-stoppers for you</li>
|
||||
<li>you are a trend seeker</li>
|
||||
<li>you bring a lot of attention to details</li>
|
||||
<li>
|
||||
you plan upfront, think ahead, and are ready to be surprised
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-5 col-xxl-4 offset-xxl-1">
|
||||
<div className="j-d-sidebar sticky-item">
|
||||
<div className="intro">
|
||||
<span className="text-uppercase mt-8 text-tertiary mb-16">
|
||||
JOIN US
|
||||
</span>
|
||||
<h4 className="mt-8 fw-5 title-anim text-secondary mb-16">
|
||||
UI/UX Design
|
||||
</h4>
|
||||
<p>Full-time (40hr per week)</p>
|
||||
</div>
|
||||
<div className="content mt-40">
|
||||
<p className="mt-8 fw-5 text-xl text-secondary mb-16">
|
||||
Salary-
|
||||
</p>
|
||||
<p className="mt-8 fw-5 text-xl text-secondary mb-16">
|
||||
$1500-$2000 per month
|
||||
</p>
|
||||
<p className="mt-8 fw-4 text-tertiary mb-30">
|
||||
+ VAT (B2B) + bonuses
|
||||
</p>
|
||||
<p className="mt-8 fw-4 text-tertiary mb-16">Remote / Poznań</p>
|
||||
<p className="mt-8 fw-4 text-tertiary">Start: ASAP</p>
|
||||
</div>
|
||||
<div className="cta mt-60">
|
||||
<Link href="/" className="btn">
|
||||
Apply Now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default JobSingle;
|
||||
56
gnx-react/components/pages/career/MasonryGallery.tsx
Normal file
56
gnx-react/components/pages/career/MasonryGallery.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import Image from "next/legacy/image";
|
||||
import one from "@/public/images/masonry/one.png";
|
||||
import two from "@/public/images/masonry/two.png";
|
||||
import three from "@/public/images/masonry/three.png";
|
||||
import four from "@/public/images/masonry/four.png";
|
||||
import five from "@/public/images/masonry/five.png";
|
||||
import six from "@/public/images/masonry/six.png";
|
||||
import seven from "@/public/images/masonry/seven.png";
|
||||
|
||||
const MasonryGallery = () => {
|
||||
return (
|
||||
<div className="mason pt-120 pb-120 fade-wrapper">
|
||||
<div className="container">
|
||||
<div className="row vertical-column-gap">
|
||||
<div className="col-12 col-md-3">
|
||||
<div className="mason-single fade-top">
|
||||
<Image src={one} className="mh-260" alt="Image" width={300} height={260} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-4">
|
||||
<div className="mason-single fade-bottom">
|
||||
<Image src={two} className="mh-260" alt="Image" width={300} height={260} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-3">
|
||||
<div className="mason-single fade-left">
|
||||
<Image src={three} className="mh-260 botter" alt="Image" width={300} height={260} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-2">
|
||||
<div className="mason-single fade-right">
|
||||
<Image src={seven} className="mh-260 botter" alt="Image" width={300} height={260} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-5">
|
||||
<div className="mason-single fade-top">
|
||||
<Image src={five} className="mh-260" alt="Image" width={300} height={260} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-2">
|
||||
<div className="mason-single fade-bottom">
|
||||
<Image src={six} className="mh-260" alt="Image" width={300} height={260} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-5">
|
||||
<div className="mason-single toper fade-right">
|
||||
<Image src={four} className="mh-260" alt="Image" width={300} height={260} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MasonryGallery;
|
||||
205
gnx-react/components/pages/career/OpenPosition.tsx
Normal file
205
gnx-react/components/pages/career/OpenPosition.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const OpenPosition = () => {
|
||||
return (
|
||||
<section className="op-position pt-120 pb-120" id="scroll-to">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="intro mb-60">
|
||||
<h2 className="mt-8 fw-7 title-anim text-secondary">
|
||||
Open Positions
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mt-60">
|
||||
<div className="op-position-single appear-down">
|
||||
<div className="row vertical-column-gap align-items-center">
|
||||
<div className="col-12 col-sm-2">
|
||||
<span className="fw-7 text-xl text-tertiary">01</span>
|
||||
</div>
|
||||
<div className="col-12 col-sm-5">
|
||||
<h4 className="fw-7">
|
||||
<Link href="job-single">UI/UX Design</Link>
|
||||
</h4>
|
||||
</div>
|
||||
<div className="col-12 col-sm-3">
|
||||
<div className="roles">
|
||||
<span className="text-tertiary fw-5 text-xl">
|
||||
(04 Open Roles)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-2">
|
||||
<div className="cta text-start text-sm-end">
|
||||
<Link href="job-single">
|
||||
<span className="material-symbols-outlined">east</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="op-position-single appear-down">
|
||||
<div className="row vertical-column-gap align-items-center">
|
||||
<div className="col-12 col-sm-2">
|
||||
<span className="fw-7 text-xl text-tertiary">02</span>
|
||||
</div>
|
||||
<div className="col-12 col-sm-5">
|
||||
<h4 className="fw-7">
|
||||
<Link href="job-single">Administrative Assistant</Link>
|
||||
</h4>
|
||||
</div>
|
||||
<div className="col-12 col-sm-3">
|
||||
<div className="roles">
|
||||
<span className="text-tertiary fw-5 text-xl">
|
||||
(03 Open Roles)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-2">
|
||||
<div className="cta text-start text-sm-end">
|
||||
<Link href="job-single">
|
||||
<span className="material-symbols-outlined">east</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="op-position-single appear-down">
|
||||
<div className="row vertical-column-gap align-items-center">
|
||||
<div className="col-12 col-sm-2">
|
||||
<span className="fw-7 text-xl text-tertiary">03</span>
|
||||
</div>
|
||||
<div className="col-12 col-sm-5">
|
||||
<h4 className="fw-7">
|
||||
<Link href="job-single">Software Engineer</Link>
|
||||
</h4>
|
||||
</div>
|
||||
<div className="col-12 col-sm-3">
|
||||
<div className="roles">
|
||||
<span className="text-tertiary fw-5 text-xl">
|
||||
(12 Open Roles)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-2">
|
||||
<div className="cta text-start text-sm-end">
|
||||
<Link href="job-single">
|
||||
<span className="material-symbols-outlined">east</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="op-position-single appear-down">
|
||||
<div className="row vertical-column-gap align-items-center">
|
||||
<div className="col-12 col-sm-2">
|
||||
<span className="fw-7 text-xl text-tertiary">04</span>
|
||||
</div>
|
||||
<div className="col-12 col-sm-5">
|
||||
<h4 className="fw-7">
|
||||
<Link href="job-single">Data Entry Clerk</Link>
|
||||
</h4>
|
||||
</div>
|
||||
<div className="col-12 col-sm-3">
|
||||
<div className="roles">
|
||||
<span className="text-tertiary fw-5 text-xl">
|
||||
(01 Open Roles)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-2">
|
||||
<div className="cta text-start text-sm-end">
|
||||
<Link href="job-single">
|
||||
<span className="material-symbols-outlined">east</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="op-position-single appear-down">
|
||||
<div className="row vertical-column-gap align-items-center">
|
||||
<div className="col-12 col-sm-2">
|
||||
<span className="fw-7 text-xl text-tertiary">05</span>
|
||||
</div>
|
||||
<div className="col-12 col-sm-5">
|
||||
<h4 className="fw-7">
|
||||
<Link href="job-single">Marketing Manager</Link>
|
||||
</h4>
|
||||
</div>
|
||||
<div className="col-12 col-sm-3">
|
||||
<div className="roles">
|
||||
<span className="text-tertiary fw-5 text-xl">
|
||||
(09 Open Roles)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-2">
|
||||
<div className="cta text-start text-sm-end">
|
||||
<Link href="job-single">
|
||||
<span className="material-symbols-outlined">east</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="op-position-single appear-down">
|
||||
<div className="row vertical-column-gap align-items-center">
|
||||
<div className="col-12 col-sm-2">
|
||||
<span className="fw-7 text-xl text-tertiary">06</span>
|
||||
</div>
|
||||
<div className="col-12 col-sm-5">
|
||||
<h4 className="fw-7">
|
||||
<Link href="job-single">Executive Assistant</Link>
|
||||
</h4>
|
||||
</div>
|
||||
<div className="col-12 col-sm-3">
|
||||
<div className="roles">
|
||||
<span className="text-tertiary fw-5 text-xl">
|
||||
(07 Open Roles)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-2">
|
||||
<div className="cta text-start text-sm-end">
|
||||
<Link href="job-single">
|
||||
<span className="material-symbols-outlined">east</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="op-position-single appear-down">
|
||||
<div className="row vertical-column-gap align-items-center">
|
||||
<div className="col-12 col-sm-2">
|
||||
<span className="fw-7 text-xl text-tertiary">07</span>
|
||||
</div>
|
||||
<div className="col-12 col-sm-5">
|
||||
<h4 className="fw-7">
|
||||
<Link href="job-single">Lead Product Designer</Link>
|
||||
</h4>
|
||||
</div>
|
||||
<div className="col-12 col-sm-3">
|
||||
<div className="roles">
|
||||
<span className="text-tertiary fw-5 text-xl">
|
||||
(03 Open Roles)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-2">
|
||||
<div className="cta text-start text-sm-end">
|
||||
<Link href="job-single">
|
||||
<span className="material-symbols-outlined">east</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default OpenPosition;
|
||||
85
gnx-react/components/pages/career/Thrive.tsx
Normal file
85
gnx-react/components/pages/career/Thrive.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import Image from "next/legacy/image";
|
||||
import time from "@/public/images/time.png";
|
||||
import trans from "@/public/images/trans.png";
|
||||
import support from "@/public/images/support.png";
|
||||
import skill from "@/public/images/skill.png";
|
||||
|
||||
const Thrive = () => {
|
||||
return (
|
||||
<section className="thrive pt-120 pb-120 bg-black fade-wrapper">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="intro">
|
||||
<h2 className="mt-8 fw-7 title-anim text-white">
|
||||
What lets us thrive together
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row vertical-column-gap-lg mt-60">
|
||||
<div className="col-12 col-md-6 fade-top">
|
||||
<div className="thumb">
|
||||
<Image src={time} alt="Image" width={80} height={80} />
|
||||
</div>
|
||||
<div className="content mt-40">
|
||||
<h4 className="mt-8 title-anim fw-7 text-white mb-16">
|
||||
Flexible workday
|
||||
</h4>
|
||||
<p className="cur-lg text-quinary">
|
||||
Lorem ipsum dolor sit amet consectetur. Elit sit laoreet aliquam
|
||||
porttitor mattis vel feugiat eget. Nunc nunc nunc urna lorem.
|
||||
mattis vel feugiat eget.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 fade-top">
|
||||
<div className="thumb">
|
||||
<Image src={trans} alt="Image" width={80} height={80} />
|
||||
</div>
|
||||
<div className="content mt-40">
|
||||
<h4 className="mt-8 title-anim fw-7 text-white mb-16">
|
||||
Transparency
|
||||
</h4>
|
||||
<p className="cur-lg text-quinary">
|
||||
Lorem ipsum dolor sit amet consectetur. Elit sit laoreet aliquam
|
||||
porttitor mattis vel feugiat eget. Nunc nunc nunc urna lorem.
|
||||
mattis vel feugiat eget.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 fade-top">
|
||||
<div className="thumb">
|
||||
<Image src={support} alt="Image" width={80} height={80} />
|
||||
</div>
|
||||
<div className="content mt-40">
|
||||
<h4 className="mt-8 title-anim fw-7 text-white mb-16">Support</h4>
|
||||
<p className="cur-lg text-quinary">
|
||||
Lorem ipsum dolor sit amet consectetur. Elit sit laoreet aliquam
|
||||
porttitor mattis vel feugiat eget. Nunc nunc nunc urna lorem.
|
||||
mattis vel feugiat eget.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 fade-top">
|
||||
<div className="thumb">
|
||||
<Image src={skill} alt="Image" width={80} height={80} />
|
||||
</div>
|
||||
<div className="content mt-40">
|
||||
<h4 className="mt-8 title-anim fw-7 text-white mb-16">
|
||||
Growth Skill
|
||||
</h4>
|
||||
<p className="cur-lg text-quinary">
|
||||
Lorem ipsum dolor sit amet consectetur. Elit sit laoreet aliquam
|
||||
porttitor mattis vel feugiat eget. Nunc nunc nunc urna lorem.
|
||||
mattis vel feugiat eget.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Thrive;
|
||||
Reference in New Issue
Block a user