Skip to content

Commit fd97234

Browse files
rafiqul4rafiqul4
committed
up
1 parent 18df5f6 commit fd97234

2 files changed

Lines changed: 160 additions & 3 deletions

File tree

‎src/app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Grid } from "@/components/ui/grid"
55
import { Stack } from "@/components/ui/stack"
66
import { Logo } from "@/components/ui/logo"
77
import { ArrowRightIcon, GitHubLogoIcon } from "@radix-ui/react-icons"
8-
import ProjectsSection from "@/components/home/projects-section"
8+
import OurProjectsSection from "@/components/home/our-projects-section"
99
import ProductsSection from "@/components/home/products-section"
1010
import TeamMembersSection from "@/components/home/team-members-section"
1111

@@ -92,8 +92,8 @@ export default function Home() {
9292
</Container>
9393
</div>
9494

95-
{/* Projects Section */}
96-
<ProjectsSection className="bg-background" />
95+
{/* Our Projects Section */}
96+
<OurProjectsSection />
9797

9898
{/* Products Section */}
9999
<ProductsSection className="bg-muted/30" />

‎src/components/home/our-projects-section.tsx‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
"use client"
2+
3+
import { Container } from "@/components/ui/container"
4+
import { Typography } from "@/components/ui/typography"
5+
import { Stack } from "@/components/ui/stack"
6+
import Image from "next/image"
7+
8+
interface Project {
9+
id: string
10+
title: string
11+
description: string
12+
image: string
13+
category: string
14+
}
15+
16+
const projects: Project[] = [
17+
{
18+
id: "wanderlust",
19+
title: "Wanderlust Travel",
20+
description: "Explore breathtaking destinations, create unforgettable memories, and experience the world like never before with our curated travel platform.",
21+
image: "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=800&q=80",
22+
category: "Travel & Tourism"
23+
},
24+
{
25+
id: "lens-artistry",
26+
title: "Lens & Light Photography",
27+
description: "Capturing moments, creating memories. Professional photography services with timeless elegance and artistic vision for weddings, portraits, and events.",
28+
image: "https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=800&q=80",
29+
category: "Photography"
30+
},
31+
{
32+
id: "aura-style",
33+
title: "LUXE Fashion Store",
34+
description: "Discover contemporary fashion pieces crafted for the modern wardrobe. Timeless design meets modern craftsmanship with ethically produced elegance.",
35+
image: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&q=80",
36+
category: "Fashion E-commerce"
37+
},
38+
{
39+
id: "luxe-abode",
40+
title: "Luxe Properties",
41+
description: "Your premier destination for luxury real estate. Experience luxury living with our curated collection of premium properties where elegance meets comfort.",
42+
image: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&q=80",
43+
category: "Real Estate"
44+
},
45+
{
46+
id: "bloom-shop",
47+
title: "ShopHub Premium Store",
48+
description: "Elevate your everyday style with premium products curated for the modern lifestyle. Quality, elegance, and innovation in every detail.",
49+
image: "https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=800&q=80",
50+
category: "E-commerce"
51+
},
52+
{
53+
id: "ethereal-store",
54+
title: "ModernShop Storefront",
55+
description: "Shop the latest trends with unbeatable prices. Quality products delivered to your doorstep with free shipping, secure payment, and easy returns.",
56+
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80",
57+
category: "E-commerce"
58+
}
59+
]
60+
61+
interface OurProjectsSectionProps {
62+
className?: string
63+
}
64+
65+
export default function OurProjectsSection({ className }: OurProjectsSectionProps) {
66+
return (
67+
<section
68+
className={`relative bg-gradient-to-br from-[#1a1035] via-[#2d1f5c] to-[#1a1035] py-16 sm:py-24 ${className || ""}`}
69+
aria-labelledby="our-projects-heading"
70+
>
71+
{/* Background Pattern */}
72+
<div className="absolute inset-0 opacity-10">
73+
<div
74+
className="absolute inset-0"
75+
style={{
76+
backgroundImage: `repeating-linear-gradient(
77+
45deg,
78+
transparent,
79+
transparent 10px,
80+
rgba(147, 51, 234, 0.1) 10px,
81+
rgba(147, 51, 234, 0.1) 20px
82+
)`
83+
}}
84+
/>
85+
</div>
86+
87+
<Container className="relative z-10">
88+
<Stack gap={8}>
89+
{/* Section Header */}
90+
<Stack gap={4} align="center" className="text-center mb-4">
91+
<Typography variant="h2" id="our-projects-heading" className="text-white">
92+
Our Projects
93+
</Typography>
94+
<Typography variant="lead" className="max-w-2xl text-gray-300">
95+
Showcasing innovative web solutions that transform ideas into exceptional digital experiences
96+
</Typography>
97+
</Stack>
98+
99+
{/* Projects Grid */}
100+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
101+
{projects.map((project) => (
102+
<ProjectCard key={project.id} project={project} />
103+
))}
104+
</div>
105+
</Stack>
106+
</Container>
107+
</section>
108+
)
109+
}
110+
111+
function ProjectCard({ project }: { project: Project }) {
112+
return (
113+
<div className="group relative overflow-hidden rounded-xl bg-[#1e1245] border border-purple-900/30 shadow-xl transition-all duration-300 hover:shadow-2xl hover:shadow-purple-900/20 hover:-translate-y-1">
114+
{/* Image Container */}
115+
<div className="relative aspect-[16/10] overflow-hidden">
116+
<Image
117+
src={project.image}
118+
alt={project.title}
119+
fill
120+
className="object-cover transition-transform duration-500 group-hover:scale-105"
121+
sizes="(max-width: 768px) 100vw, 50vw"
122+
/>
123+
{/* Gradient Overlay */}
124+
<div className="absolute inset-0 bg-gradient-to-t from-[#1e1245] via-[#1e1245]/40 to-transparent" />
125+
126+
{/* Category Badge */}
127+
<div className="absolute top-4 left-4">
128+
<span className="inline-flex items-center rounded-full bg-purple-600/80 backdrop-blur-sm px-3 py-1 text-xs font-medium text-white">
129+
{project.category}
130+
</span>
131+
</div>
132+
133+
{/* Browser Frame Decoration */}
134+
<div className="absolute top-4 right-4 flex items-center gap-1.5">
135+
<div className="w-3 h-3 rounded-full bg-red-500/80" />
136+
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
137+
<div className="w-3 h-3 rounded-full bg-green-500/80" />
138+
</div>
139+
</div>
140+
141+
{/* Content */}
142+
<div className="p-6">
143+
<h3 className="text-xl font-bold text-white mb-2 group-hover:text-purple-300 transition-colors">
144+
{project.title}
145+
</h3>
146+
<p className="text-gray-400 text-sm leading-relaxed line-clamp-3">
147+
{project.description}
148+
</p>
149+
</div>
150+
151+
{/* Hover Border Effect */}
152+
<div className="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-purple-500/50 transition-colors pointer-events-none" />
153+
</div>
154+
)
155+
}
156+
157+
export type { OurProjectsSectionProps, Project }

0 commit comments

Comments
 (0)