Skip to content

Added Chevron icon instead of text. Some padding changes to Navigationbar component #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sravan9097 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added Chevron icon instead of text. Some padding changes to Navigationbar component #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions public/icons/chevron.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 33 additions & 17 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Link from "next/link";
import Image from "next/image";
import CategoryIcon from "@/components/CategoryIcon";
import Logo from "@/components/Logo";
import Copyright from "@/components/Copyright";
Expand All @@ -25,23 +26,30 @@ export default function Home() {
<div className="mainColumn font-[family-name:var(--font-jetbrains-mono)]">
<div className="max-w-4xl mx-auto">
<h2
className="text-xl sm:text-3xl tracking-wider uppercase mt-6 sm:mt-2 mb-8 text-left px-8"
className="flex items-center gap-1 text-xl sm:text-3xl tracking-wider uppercase mt-6 sm:mt-2 mb-8 text-left px-4"
style={{ color: "var(--color-bc-red)" }}
>
{">"} WHAT WE ARE WIRED FOR
<Image
src="/icons/chevron.svg"
alt=""
width={20}
height={20}
className="w-8 h-8"
/>
<span>WHAT WE ARE WIRED FOR</span>
</h2>

{/* Row 1: Applied AI - Label Left, Items Right */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 sm:gap-8 mb-4 sm:mb-8 px-8">
<div className="flex items-center pl-4">
<h3 className="text-lg sm:text-4xl font-semibold sm:font-bold uppercase text-[var(--color-bc-purple)]">
<h3 className="text-lg sm:text-3xl font-semibold sm:font-bold uppercase text-[var(--color-bc-purple)]">
APPLIED AI
</h3>
</div>
<div className="space-y-2">
{appliedAIAreas.map((area) => (
<Link key={area.slug} href={`/expertise/${area.slug}`}>
<div className="flex items-center space-x-4 cursor-pointer transition-all duration-300 hover:bg-[var(--color-bc-beige)] group py-3 px-4">
<div className="flex items-center space-x-4 cursor-pointer transition-all duration-300 hover:bg-[var(--color-bc-beige)] group py-3 px-4 rounded">
<div className="flex-shrink-0">
<CategoryIcon
slug={area.slug}
Expand Down Expand Up @@ -72,7 +80,7 @@ export default function Home() {
<div className="space-y-2">
{productEngineeringAreas.map((area) => (
<Link key={area.slug} href={`/expertise/${area.slug}`}>
<div className="flex items-center space-x-4 cursor-pointer transition-all duration-300 hover:bg-[var(--color-bc-beige)] group py-3 px-4">
<div className="flex items-center space-x-4 cursor-pointer transition-all duration-300 hover:bg-[var(--color-bc-beige)] group py-3 px-4 rounded">
<div className="flex-shrink-0">
<CategoryIcon
slug={area.slug}
Expand All @@ -91,7 +99,7 @@ export default function Home() {
))}
</div>
<div className="hidden sm:flex items-center justify-start pl-4">
<h3 className="text-lg sm:text-4xl font-bold uppercase text-[var(--color-bc-purple)]">
<h3 className="text-lg sm:text-3xl font-bold uppercase text-[var(--color-bc-purple)]">
PRODUCT ENGINEERING
</h3>
</div>
Expand All @@ -105,12 +113,16 @@ export default function Home() {
className=""
aria-label="Explore our engineering principles"
>
<div className="flex items-center justify-between gap-4 pl-6 pr-2 py-6 hover:bg-[var(--color-bc-beige)] group">
<div>
<h2 className="text-lg sm:text-3xl tracking-wider uppercase text-left flex items-center gap-4">
<span style={{ color: "var(--color-bc-red)" }}>
{">"}
</span>
<div className="flex items-center justify-between gap-4 pl-4 pr-2 py-4 hover:bg-[var(--color-bc-beige)] group mb-2 rounded ">
<div >
<h2 className="text-lg sm:text-3xl tracking-wider uppercase text-left flex items-center gap-1">
<Image
src="/icons/chevron.svg"
alt=""
width={20}
height={20}
className="w-8 h-8"
/>
<span className="font-semibold text-lg sm:text-2xl transition-colors duration-300 text-[var(--color-bc-text-black)] group-hover:text-[var(--color-bc-red)]">
OUR ENGINEERING PRINCIPLES
</span>
Expand All @@ -125,12 +137,16 @@ export default function Home() {
className=""
aria-label="Meet our leadership team"
>
<div className="flex items-center justify-between gap-4 pl-6 pr-2 py-6 hover:bg-[var(--color-bc-beige)] group">
<div className="flex items-center justify-between gap-4 pl-4 pr-2 py-4 hover:bg-[var(--color-bc-beige)] group mb-2 rounded ">
<div>
<h2 className="text-lg sm:text-3xl tracking-wider uppercase text-left flex items-center gap-4">
<span style={{ color: "var(--color-bc-red)" }}>
{">"}
</span>
<h2 className="text-lg sm:text-3xl tracking-wider uppercase text-left flex items-center gap-1">
<Image
src="/icons/chevron.svg"
alt=""
width={20}
height={20}
className="w-8 h-8"
/>
<span className="font-semibold text-lg sm:text-2xl transition-colors duration-300 text-[var(--color-bc-text-black)] group-hover:text-[var(--color-bc-red)]">
LEADERSHIP
</span>
Expand Down
45 changes: 33 additions & 12 deletions src/components/NavigationalSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Link from "next/link";
import Image from "next/image";
import CategoryIcon from "@/components/CategoryIcon";
import { appliedAIAreas, productEngineeringAreas } from "@/lib/expertise";
import { SHOW_PRINCIPLES } from "@/lib/config";
Expand All @@ -13,16 +14,22 @@ export default function NavigationalSidebar({
return (
<div className="mt-6">
<h2
className="text-lg sm:text-xl tracking-wider uppercase mb-6 text-left px-4 sm:px-6 flex items-center gap-2"
className="text-lg sm:text-xl tracking-wider uppercase mb-6 text-left px-2 flex items-center gap-1"
style={{ color: "var(--color-bc-red)" }}
>
<span>{">"}</span>
<Image
src="/icons/chevron.svg"
alt=""
width={20}
height={20}
className="w-6 h-6"
/>
<span>WHAT WE ARE WIRED FOR</span>
</h2>

{/* Applied AI Section */}
<div className="mb-6">
<h3 className="text-lg sm:text-xl font-bold uppercase mb-4 px-4 sm:px-6 text-[var(--color-bc-purple)]">
<div className="mb-8">
<h3 className="text-lg sm:text-xl font-bold uppercase mb-1 pl-8 pr-2 sm:px-8 text-[var(--color-bc-purple)]">
APPLIED AI
</h3>
<div className="space-y-2">
Expand All @@ -31,7 +38,7 @@ export default function NavigationalSidebar({
return (
<Link key={area.slug} href={`/expertise/${area.slug}`}>
<div
className={`flex items-center space-x-4 cursor-pointer transition-all duration-300 py-3 px-4 sm:px-6 group ${
className={`flex items-center space-x-4 cursor-pointer transition-all duration-300 py-2.5 pl-8 pr-2 sm:pl-8 sm:pr-4 group ${
isActive
? "bg-white text-[var(--color-bc-red)]"
: "hover:bg-white/50 text-[var(--color-bc-text-black)] hover:text-[var(--color-bc-red)]"
Expand All @@ -57,8 +64,8 @@ export default function NavigationalSidebar({
</div>

{/* Product Engineering Section */}
<div className="mb-6">
<h3 className="text-lg sm:text-xl font-bold uppercase mb-4 px-4 sm:px-6 text-[var(--color-bc-purple)]">
<div className="mb-8">
<h3 className="text-lg sm:text-xl font-bold uppercase mb-1 pl-8 pr-2 sm:px-8 text-[var(--color-bc-purple)]">
PRODUCT ENGINEERING
</h3>
<div className="space-y-2">
Expand All @@ -67,7 +74,7 @@ export default function NavigationalSidebar({
return (
<Link key={area.slug} href={`/expertise/${area.slug}`}>
<div
className={`flex items-center space-x-4 cursor-pointer transition-all duration-300 py-3 px-4 sm:px-6 group ${
className={`flex items-center space-x-4 cursor-pointer transition-all duration-300 py-2.5 pl-8 pr-2 sm:pl-8 sm:pr-4 group ${
isActive
? "bg-white text-[var(--color-bc-red)]"
: "hover:bg-white/50 text-[var(--color-bc-text-black)] hover:text-[var(--color-bc-red)]"
Expand Down Expand Up @@ -97,26 +104,40 @@ export default function NavigationalSidebar({
{SHOW_PRINCIPLES && (
<Link href="/principles">
<div
className={`px-4 sm:px-6 py-2 cursor-pointer uppercase tracking-wider text-sm sm:text-lg transition-colors duration-300 ${
className={`flex items-center gap-1 px-4 sm:pl-2 sm:pr-4 py-3 cursor-pointer uppercase tracking-wider text-sm sm:text-lg transition-colors duration-300 ${
activeSlug === "principles"
? "text-[var(--color-bc-red)]"
: "text-[var(--color-bc-text-black)] hover:text-[var(--color-bc-red)]"
}`}
>
OUR ENGINEERING PRINCIPLES
<Image
src="/icons/chevron.svg"
alt=""
width={20}
height={20}
className="w-6 h-6"
/>
<span>OUR ENGINEERING PRINCIPLES</span>
</div>
</Link>
)}

<Link href="/leadership">
<div
className={`px-4 sm:px-6 py-2 cursor-pointer uppercase tracking-wider text-sm sm:text-lg transition-colors duration-300 ${
className={`flex items-center gap-1 px-4 sm:pl-2 sm:pr-4 py-3 cursor-pointer uppercase tracking-wider text-sm sm:text-lg transition-colors duration-300 ${
activeSlug === "leadership"
? "text-[var(--color-bc-red)]"
: "text-[var(--color-bc-text-black)] hover:text-[var(--color-bc-red)]"
}`}
>
LEADERSHIP
<Image
src="/icons/chevron.svg"
alt=""
width={20}
height={20}
className="w-6 h-6"
/>
<span>LEADERSHIP</span>
</div>
</Link>
</div>
Expand Down