We design and build websites, apps & dashboards that drive growth

1export const Dashboard: React.FC<Props> = () => {
2  return (
3    <div>
4      <Sidebar />
5      <Main>
6        <AnalyticsChart data={metrics} />
7        <StatCard title="Revenue" value="$45,231" />
8        <StatCard title="Users" value="2,350" />
9        <RecentOrders data={orders} />
10      </Main>
11    </div>
12  );
13};

1export const PropertyListing: React.FC<Props> = () => {
2  const property = {
3    images: ['/hero.jpg'],
4    photos: ['/img1.jpg', '/img2.jpg']
5  };
6
7  return (
8    <div>
9      <PropertyHero images={property.images} />
10      <PropertyDetails
11        price="$2,500,000"
12        beds={4}
13        baths={3}
14        sqft={2800}
15      />
16      <PropertyGallery photos={property.photos} />
17      <ContactAgentForm />
18    </div>
19  );
20};

1export const ProductPage: React.FC<Props> = () => {
2  const product = {
3    name: "Wireless Headphones",
4    price: "299",
5    images: ['/product.jpg']
6  };
7
8  return (
9    <div>
10      <ProductGallery images={product.images} />
11      <ProductInfo>
12        <ProductTitle>{product.name}</ProductTitle>
13        <ProductPrice>${product.price}</ProductPrice>
14        <AddToCartButton />
15        <ProductReviews rating={4.5} count={128} />
16      </ProductInfo>
17    </div>
18  );
19};

1export const RestaurantMenu: React.FC<Props> = () => {
2  return (
3    <div>
4      <MenuHero />
5      <MenuSection title="Appetizers">
6        <MenuItem name="Truffle Arancini" price="$16" />
7        <MenuItem name="Octopus Carpaccio" price="$22" />
8      </MenuSection>
9      <MenuSection title="Main Courses">
10        <MenuItem name="Wagyu Ribeye" price="$85" />
11        <MenuItem name="Pan-Seared Salmon" price="$32" />
12      </MenuSection>
13    </div>
14  );
15};

1export const PortfolioShowcase: React.FC<Props> = () => {
2  const projects = [
3    { title: "Brand Identity", image: "/project1.jpg" },
4    { title: "Mobile App", image: "/project2.jpg" },
5    { title: "Website Design", image: "/project3.jpg" }
6  ];
7
8  return (
9    <div>
10      <HeroSection>
11        <PortfolioTitle>Creative Works</PortfolioTitle>
12        <PortfolioDescription />
13      </HeroSection>
14      <ProjectGrid>
15        {projects.map((project, index) => (
16          <ProjectCard key={index} title={project.title} image={project.image} />
17        ))}
18      </ProjectGrid>
19    </div>
20  );
21};

1export const BlogArticle: React.FC<Props> = () => {
2  const article = {
3    title: "The Future of Web Development",
4    date: "2024-01-15",
5    author: "Jane Smith",
6    featuredImage: "/article-hero.jpg",
7    content: "Full article content here..."
8  };
9
10  return (
11    <div>
12      <ArticleHeader>
13        <ArticleTitle>{article.title}</ArticleTitle>
14        <ArticleMeta date={article.date} author={article.author} />
15      </ArticleHeader>
16      <ArticleContent>
17        <ArticleImage src={article.featuredImage} />
18        <ArticleText content={article.content} />
19      </ArticleContent>
20      <RelatedArticles articles={[]} />
21    </div>
22  );
23};