Update src/app/portfolio/page.tsx

This commit is contained in:
2026-03-26 12:50:36 +00:00
parent 1c0b8afee1
commit 87421ba2c1

View File

@@ -3,7 +3,6 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import Link from "next/link";
import ProductCardTwo, { ProductCardTwoProps } from '@/components/sections/product/ProductCardTwo'; // For portfolio display
interface FooterProps {
brandName?: string;
@@ -43,21 +42,10 @@ export default function PortfolioPage() {
];
const navbarProps = {
brandName: "Nexsoft Australia", navItems: navItems.map(item => ({ name: item.name, id: item.href })),
brandName: "Nexsoft Australia", navItems: navItems,
button: {text: "Get a Quote", href: "/contact"}
};
const productCardTwoProps: ProductCardTwoProps = {
title: "Our Portfolio", description: "Discover the projects we've brought to life.", gridVariant: "bento-grid", // This is valid for ProductCardTwo
animationType: "slide-up", textboxLayout: "default", useInvertedBackground: false,
products: [
{ id: "1", brand: "Client Project", name: "Project Alpha", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_1.webp", imageAlt: "Project Alpha screenshot" },
{ id: "2", brand: "Client Project", name: "Project Beta", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_2.webp", imageAlt: "Project Beta screenshot" },
{ id: "3", brand: "Client Project", name: "Project Gamma", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_3.webp", imageAlt: "Project Gamma screenshot" },
{ id: "4", brand: "Client Project", name: "Project Delta", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_4.webp", imageAlt: "Project Delta screenshot" }
]
};
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -74,18 +62,38 @@ export default function PortfolioPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay {...navbarProps} />
</div>
<main>
<div id="portfolio-hero" data-section="portfolio-hero" className="py-20 md:py-32 text-center">
<h1 className="text-4xl md:text-6xl font-bold text-foreground">Our Portfolio</h1>
<p className="mt-4 text-xl text-foreground/80 max-w-2xl mx-auto">Explore our diverse range of successful projects and client collaborations.</p>
</div>
<div id="product-card-two" data-section="product-card-two">
<ProductCardTwo {...productCardTwoProps} />
<main className="min-h-[calc(100vh-16rem)] flex flex-col items-center justify-center p-8 bg-background">
<h1 className="text-4xl md:text-6xl font-bold text-center mb-8 text-foreground">Our Portfolio</h1>
<p className="text-lg text-center max-w-3xl text-foreground/80">
Explore a selection of our recent projects and client success stories.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12 w-full max-w-6xl">
<div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
<h3 className="text-xl font-semibold mb-2 text-foreground">Project Alpha</h3>
<p className="text-foreground/80">A cutting-edge web application for data visualization.</p>
</div>
<div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
<h3 className="text-xl font-semibold mb-2 text-foreground">Project Beta</h3>
<p className="text-foreground/80">Mobile app development for a leading e-commerce brand.</p>
</div>
<div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
<h3 className="text-xl font-semibold mb-2 text-foreground">Project Gamma</h3>
<p className="text-foreground/80">Enterprise-level CRM system integration and customization.</p>
</div>
<div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
<h3 className="text-xl font-semibold mb-2 text-foreground">Project Delta</h3>
<p className="text-foreground/80">Cloud infrastructure migration and optimization.</p>
</div>
<div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
<h3 className="text-xl font-semibold mb-2 text-foreground">Project Epsilon</h3>
<p className="text-foreground/80">AI-powered analytics platform development.</p>
</div>
<div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
<h3 className="text-xl font-semibold mb-2 text-foreground">Project Zeta</h3>
<p className="text-foreground/80">Custom blockchain solution for secure transactions.</p>
</div>
</div>
</main>
<Footer brandName="Nexsoft Australia" navItems={navItems} />
</ThemeProvider>
);