Skip to content

Commit a5de877

Browse files
rafiqul4rafiqul4
committed
up
1 parent 02dfbc6 commit a5de877

4 files changed

Lines changed: 375 additions & 0 deletions

File tree

‎public/products/stormcom-dashboard.png‎

219 KB
Loading

‎src/app/page.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Stack } from "@/components/ui/stack"
66
import { Logo } from "@/components/ui/logo"
77
import { ArrowRightIcon, GitHubLogoIcon } from "@radix-ui/react-icons"
88
import ProjectsSection from "@/components/home/projects-section"
9+
import ProductsSection from "@/components/home/products-section"
910
import TeamMembersSection from "@/components/home/team-members-section"
1011

1112
export default function Home() {
@@ -94,6 +95,9 @@ export default function Home() {
9495
{/* Projects Section */}
9596
<ProjectsSection className="bg-background" />
9697

98+
{/* Products Section */}
99+
<ProductsSection className="bg-muted/30" />
100+
97101
{/* Team Members Section */}
98102
<TeamMembersSection className="bg-muted/20" />
99103
</>

‎src/components/home/products-section.tsx‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
"use client"
2+
3+
import { useState } from "react"
4+
import Image from "next/image"
5+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
6+
import { Container } from "@/components/ui/container"
7+
import { Typography } from "@/components/ui/typography"
8+
import { Grid } from "@/components/ui/grid"
9+
import { Stack } from "@/components/ui/stack"
10+
import { Button } from "@/components/ui/button"
11+
import {
12+
Dialog,
13+
DialogContent,
14+
DialogDescription,
15+
DialogHeader,
16+
DialogTitle,
17+
DialogTrigger,
18+
} from "@/components/ui/dialog"
19+
import { ExternalLinkIcon, RocketIcon } from "@radix-ui/react-icons"
20+
21+
// Product data interface - easily extensible for more products
22+
interface Product {
23+
id: string
24+
name: string
25+
tagline: string
26+
shortDescription: string
27+
fullDescription: string
28+
features: string[]
29+
productUrl: string
30+
dashboardImage: string
31+
status: "active" | "coming-soon" | "beta"
32+
category: string
33+
}
34+
35+
// Products data - add more products here as they are developed
36+
const products: Product[] = [
37+
{
38+
id: "stormcom",
39+
name: "StormCom",
40+
tagline: "AI-Powered E-commerce Platform",
41+
shortDescription: "A comprehensive AI-based SaaS solution designed to empower e-commerce vendors of all sizes with intelligent analytics, automated operations, and data-driven insights.",
42+
fullDescription: `StormCom is a next-generation AI-powered e-commerce management platform built for modern online businesses. Whether you're a small boutique store or a large-scale enterprise, StormCom provides the tools you need to streamline operations, boost sales, and make smarter business decisions.
43+
44+
Our platform leverages cutting-edge artificial intelligence to analyze your store's performance, predict trends, and automate repetitive tasks—giving you more time to focus on what matters most: growing your business.
45+
46+
With real-time dashboards, intelligent reporting, and seamless integrations, StormCom transforms the way you manage your online store.`,
47+
features: [
48+
"Real-time Revenue & Order Analytics",
49+
"AI-Powered Sales Predictions",
50+
"Smart Inventory Management",
51+
"Customer Behavior Insights",
52+
"Multi-Store Management",
53+
"Automated Marketing Campaigns",
54+
"Advanced Reporting & Data Export",
55+
"Team Collaboration Tools",
56+
"Secure Document Management",
57+
"24/7 Performance Monitoring"
58+
],
59+
productUrl: "https://codestormhub.live",
60+
dashboardImage: "/products/stormcom-dashboard.png",
61+
status: "active",
62+
category: "E-commerce"
63+
},
64+
// Add more products here as they are developed
65+
// {
66+
// id: "another-product",
67+
// name: "Product Name",
68+
// ...
69+
// }
70+
]
71+
72+
interface ProductsSectionProps {
73+
className?: string
74+
}
75+
76+
export default function ProductsSection({ className }: ProductsSectionProps) {
77+
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null)
78+
79+
return (
80+
<section className={className} aria-labelledby="products-heading">
81+
<Container className="py-16 sm:py-24">
82+
<Stack gap={8}>
83+
{/* Section Header */}
84+
<Stack gap={4} align="center" className="text-center">
85+
<div className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
86+
<RocketIcon className="h-4 w-4" />
87+
Our Products
88+
</div>
89+
<Typography variant="h2" id="products-heading">
90+
Products We&apos;ve Built
91+
</Typography>
92+
<Typography variant="lead" className="max-w-2xl">
93+
Discover our suite of AI-powered products designed to solve real-world business challenges and drive growth
94+
</Typography>
95+
</Stack>
96+
97+
{/* Products Grid */}
98+
<Grid cols={2} gap={8} className="w-full">
99+
{products.map((product) => (
100+
<Dialog key={product.id}>
101+
<Card className="h-full overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer border-2 hover:border-primary/50">
102+
{/* Product Preview Image */}
103+
<div className="relative h-48 overflow-hidden bg-gradient-to-br from-primary/20 via-primary/10 to-background">
104+
<div className="absolute inset-0 bg-[url('/grid-pattern.svg')] opacity-10" />
105+
<div className="absolute inset-0 flex items-center justify-center">
106+
<div className="text-center p-6">
107+
<div className="w-16 h-16 mx-auto mb-3 rounded-xl bg-primary/20 flex items-center justify-center group-hover:scale-110 transition-transform">
108+
<RocketIcon className="h-8 w-8 text-primary" />
109+
</div>
110+
<span className="text-xl font-bold text-foreground">{product.name}</span>
111+
</div>
112+
</div>
113+
{/* Status Badge */}
114+
<div className="absolute top-4 right-4">
115+
<span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${
116+
product.status === "active"
117+
? "bg-green-500/20 text-green-400 border border-green-500/30"
118+
: product.status === "beta"
119+
? "bg-yellow-500/20 text-yellow-400 border border-yellow-500/30"
120+
: "bg-muted text-muted-foreground"
121+
}`}>
122+
{product.status === "active" ? "● Live" : product.status === "beta" ? "● Beta" : "Coming Soon"}
123+
</span>
124+
</div>
125+
</div>
126+
127+
<CardHeader className="pb-2">
128+
<Stack gap={2}>
129+
<div className="flex items-center justify-between">
130+
<CardTitle className="text-xl">{product.name}</CardTitle>
131+
<span className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
132+
{product.category}
133+
</span>
134+
</div>
135+
<span className="text-sm font-medium text-primary">{product.tagline}</span>
136+
</Stack>
137+
</CardHeader>
138+
139+
<CardContent>
140+
<Stack gap={4}>
141+
<CardDescription className="line-clamp-2">
142+
{product.shortDescription}
143+
</CardDescription>
144+
145+
{/* Action Buttons */}
146+
<div className="flex gap-2 pt-2">
147+
<DialogTrigger asChild>
148+
<Button
149+
variant="outline"
150+
size="sm"
151+
className="flex-1"
152+
onClick={() => setSelectedProduct(product)}
153+
>
154+
View Details
155+
</Button>
156+
</DialogTrigger>
157+
<Button size="sm" className="flex-1" asChild>
158+
<a
159+
href={product.productUrl}
160+
target="_blank"
161+
rel="noopener noreferrer"
162+
>
163+
<ExternalLinkIcon className="mr-2 h-4 w-4" aria-hidden="true" />
164+
Visit
165+
</a>
166+
</Button>
167+
</div>
168+
</Stack>
169+
</CardContent>
170+
</Card>
171+
172+
{/* Product Detail Modal */}
173+
<DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
174+
<DialogHeader>
175+
<div className="flex items-center gap-3">
176+
<div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
177+
<RocketIcon className="h-6 w-6 text-primary" />
178+
</div>
179+
<div>
180+
<DialogTitle className="text-2xl">{product.name}</DialogTitle>
181+
<DialogDescription className="text-primary font-medium">
182+
{product.tagline}
183+
</DialogDescription>
184+
</div>
185+
</div>
186+
</DialogHeader>
187+
188+
<div className="space-y-6 py-4">
189+
{/* Dashboard Screenshot */}
190+
<div className="relative rounded-lg overflow-hidden border bg-muted">
191+
<Image
192+
src={product.dashboardImage}
193+
alt={`${product.name} Dashboard`}
194+
width={1200}
195+
height={675}
196+
className="w-full h-auto object-cover"
197+
priority
198+
/>
199+
</div>
200+
201+
{/* Description */}
202+
<div className="space-y-3">
203+
<h4 className="text-lg font-semibold">About {product.name}</h4>
204+
<div className="text-muted-foreground whitespace-pre-line leading-relaxed">
205+
{product.fullDescription}
206+
</div>
207+
</div>
208+
209+
{/* Features Grid */}
210+
<div className="space-y-3">
211+
<h4 className="text-lg font-semibold">Key Features</h4>
212+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
213+
{product.features.map((feature, index) => (
214+
<div
215+
key={index}
216+
className="flex items-center gap-3 p-3 rounded-lg bg-muted/50 border"
217+
>
218+
<div className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
219+
<span className="text-sm">{feature}</span>
220+
</div>
221+
))}
222+
</div>
223+
</div>
224+
225+
{/* CTA */}
226+
<div className="flex justify-center pt-4">
227+
<Button size="lg" asChild>
228+
<a
229+
href={product.productUrl}
230+
target="_blank"
231+
rel="noopener noreferrer"
232+
>
233+
<ExternalLinkIcon className="mr-2 h-5 w-5" aria-hidden="true" />
234+
Explore {product.name}
235+
</a>
236+
</Button>
237+
</div>
238+
</div>
239+
</DialogContent>
240+
</Dialog>
241+
))}
242+
</Grid>
243+
</Stack>
244+
</Container>
245+
</section>
246+
)
247+
}
248+
249+
export type { ProductsSectionProps, Product }

‎src/components/ui/dialog.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as DialogPrimitive from "@radix-ui/react-dialog"
5+
import { Cross2Icon } from "@radix-ui/react-icons"
6+
7+
import { cn } from "@/lib/utils"
8+
9+
const Dialog = DialogPrimitive.Root
10+
11+
const DialogTrigger = DialogPrimitive.Trigger
12+
13+
const DialogPortal = DialogPrimitive.Portal
14+
15+
const DialogClose = DialogPrimitive.Close
16+
17+
const DialogOverlay = React.forwardRef<
18+
React.ElementRef<typeof DialogPrimitive.Overlay>,
19+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
20+
>(({ className, ...props }, ref) => (
21+
<DialogPrimitive.Overlay
22+
ref={ref}
23+
className={cn(
24+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
25+
className
26+
)}
27+
{...props}
28+
/>
29+
))
30+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
31+
32+
const DialogContent = React.forwardRef<
33+
React.ElementRef<typeof DialogPrimitive.Content>,
34+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
35+
>(({ className, children, ...props }, ref) => (
36+
<DialogPortal>
37+
<DialogOverlay />
38+
<DialogPrimitive.Content
39+
ref={ref}
40+
className={cn(
41+
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-4xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
42+
className
43+
)}
44+
{...props}
45+
>
46+
{children}
47+
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
48+
<Cross2Icon className="h-4 w-4" />
49+
<span className="sr-only">Close</span>
50+
</DialogPrimitive.Close>
51+
</DialogPrimitive.Content>
52+
</DialogPortal>
53+
))
54+
DialogContent.displayName = DialogPrimitive.Content.displayName
55+
56+
const DialogHeader = ({
57+
className,
58+
...props
59+
}: React.HTMLAttributes<HTMLDivElement>) => (
60+
<div
61+
className={cn(
62+
"flex flex-col space-y-1.5 text-center sm:text-left",
63+
className
64+
)}
65+
{...props}
66+
/>
67+
)
68+
DialogHeader.displayName = "DialogHeader"
69+
70+
const DialogFooter = ({
71+
className,
72+
...props
73+
}: React.HTMLAttributes<HTMLDivElement>) => (
74+
<div
75+
className={cn(
76+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
77+
className
78+
)}
79+
{...props}
80+
/>
81+
)
82+
DialogFooter.displayName = "DialogFooter"
83+
84+
const DialogTitle = React.forwardRef<
85+
React.ElementRef<typeof DialogPrimitive.Title>,
86+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
87+
>(({ className, ...props }, ref) => (
88+
<DialogPrimitive.Title
89+
ref={ref}
90+
className={cn(
91+
"text-lg font-semibold leading-none tracking-tight",
92+
className
93+
)}
94+
{...props}
95+
/>
96+
))
97+
DialogTitle.displayName = DialogPrimitive.Title.displayName
98+
99+
const DialogDescription = React.forwardRef<
100+
React.ElementRef<typeof DialogPrimitive.Description>,
101+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102+
>(({ className, ...props }, ref) => (
103+
<DialogPrimitive.Description
104+
ref={ref}
105+
className={cn("text-sm text-muted-foreground", className)}
106+
{...props}
107+
/>
108+
))
109+
DialogDescription.displayName = DialogPrimitive.Description.displayName
110+
111+
export {
112+
Dialog,
113+
DialogPortal,
114+
DialogOverlay,
115+
DialogClose,
116+
DialogTrigger,
117+
DialogContent,
118+
DialogHeader,
119+
DialogFooter,
120+
DialogTitle,
121+
DialogDescription,
122+
}

0 commit comments

Comments
 (0)