Merge version_2 into main #2
@@ -1,57 +1,24 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Gilda_Display } from "next/font/google";
|
||||
import { Montserrat } from "next/font/google";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
import "./styles/variables.css";
|
||||
import "./styles/base.css";
|
||||
|
||||
const gildaDisplay = Gilda_Display({
|
||||
variable: "--font-gilda-display", subsets: ["latin"],
|
||||
weight: ["400"],
|
||||
});
|
||||
|
||||
const montserrat = Montserrat({
|
||||
variable: "--font-montserrat", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Michael Carpino | Real Estate Content Creator", description: "Professional real estate photography, videography, and content creation to elevate your property listings and attract qualified buyers.", keywords: "real estate photography, property video tours, real estate content creation, drone photography, real estate marketing", metadataBase: new URL("https://michaelcarpino.com"),
|
||||
openGraph: {
|
||||
title: "Michael Carpino | Real Estate Content Creator", description: "Professional photography and videography for real estate professionals", type: "website", siteName: "Michael Carpino", url: "https://michaelcarpino.com", images: [
|
||||
{
|
||||
url: "http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821288.jpg", alt: "Real estate photography showcase"},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Michael Carpino | Real Estate Content Creator", description: "Transform your property listings with professional content creation", images: ["http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821288.jpg"],
|
||||
},
|
||||
};
|
||||
title: "Michael Carpino - Real Estate Content Creator", description: "Professional real estate photography, videography, and content creation"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${gildaDisplay.variable} ${montserrat.variable} ${halant.variable} ${inter.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
{children}
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1419,7 +1386,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
172
src/app/my-work/page.tsx
Normal file
172
src/app/my-work/page.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Sparkles, Camera, Upload } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function MyWorkPage() {
|
||||
const [uploadedImages, setUploadedImages] = useState<string[]>([]);
|
||||
|
||||
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (files) {
|
||||
Array.from(files).forEach((file) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
if (event.target?.result) {
|
||||
setUploadedImages((prev) => [...prev, event.target?.result as string]);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Convert uploaded images to product format
|
||||
const uploadedProducts = uploadedImages.map((src, index) => ({
|
||||
id: `uploaded-${index}`,
|
||||
brand: "Your Upload", name: `Uploaded Image ${index + 1}`,
|
||||
price: "Your Work", rating: 5,
|
||||
reviewCount: "New", imageSrc: src,
|
||||
imageAlt: `Uploaded image ${index + 1}`,
|
||||
}));
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "1", brand: "Luxury Residential", name: "Downtown Penthouse", price: "Featured Project", rating: 5,
|
||||
reviewCount: "Sold", imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-reading-magazine-near-panoramic-window_7502-9287.jpg", imageAlt: "Downtown penthouse photography"},
|
||||
{
|
||||
id: "2", brand: "Commercial Real Estate", name: "Modern Office Space", price: "Featured Project", rating: 5,
|
||||
reviewCount: "Sold", imageSrc: "http://img.b2bpic.net/free-photo/lobby-condominium-building_1262-3037.jpg", imageAlt: "Modern office space photography"},
|
||||
{
|
||||
id: "3", brand: "Family Homes", name: "Suburban Estate", price: "Featured Project", rating: 5,
|
||||
reviewCount: "Sold", imageSrc: "http://img.b2bpic.net/free-photo/modern-suburban-family-home-with-manicured-lawn_84443-74083.jpg", imageAlt: "Suburban estate photography"},
|
||||
...uploadedProducts,
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Michael Carpino"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "My Work", id: "/my-work" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="My Portfolio"
|
||||
description="Explore my collection of professional real estate photography and videography projects. Upload your own pictures to see how they fit into the collection."
|
||||
tag="Gallery"
|
||||
tagIcon={Sparkles}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Back to Home", href: "/" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/camera-on-table_1232-1341.jpg"
|
||||
imageAlt="My work portfolio"
|
||||
imagePosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="upload" data-section="upload" className="py-20 px-4 sm:px-6 lg:px-8 bg-background">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-card rounded-lg p-8 border border-accent/20">
|
||||
<h2 className="text-3xl font-bold mb-4 flex items-center gap-2">
|
||||
<Upload className="w-8 h-8" />
|
||||
Upload Your Pictures
|
||||
</h2>
|
||||
<p className="text-foreground/70 mb-6">
|
||||
Add your own real estate photos to the gallery. Simply select images from your computer.
|
||||
</p>
|
||||
<div className="border-2 border-dashed border-primary-cta rounded-lg p-8 text-center cursor-pointer hover:bg-card/50 transition-colors">
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*"
|
||||
onChange={handleImageUpload}
|
||||
className="hidden"
|
||||
id="image-upload"
|
||||
/>
|
||||
<label htmlFor="image-upload" className="cursor-pointer">
|
||||
<Camera className="w-12 h-12 mx-auto mb-4 text-primary-cta" />
|
||||
<p className="text-lg font-semibold mb-2">Click to upload images</p>
|
||||
<p className="text-sm text-foreground/60">or drag and drop your files here</p>
|
||||
<p className="text-xs text-foreground/50 mt-2">PNG, JPG, GIF up to 10MB</p>
|
||||
</label>
|
||||
</div>
|
||||
{uploadedImages.length > 0 && (
|
||||
<p className="mt-4 text-sm text-primary-cta">
|
||||
{uploadedImages.length} image{uploadedImages.length !== 1 ? "s" : ""} uploaded
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardTwo
|
||||
title="Featured Projects & Your Uploads"
|
||||
description="Professional work alongside your uploaded images"
|
||||
tag="Portfolio"
|
||||
tagIcon={Camera}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
products={allProducts}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Michael Carpino"
|
||||
copyrightText="© 2025 Michael Carpino. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Real Estate Photography", href: "#services" },
|
||||
{ label: "Video Tours", href: "#services" },
|
||||
{ label: "Content Creation", href: "#services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "About", items: [
|
||||
{ label: "My Story", href: "#about" },
|
||||
{ label: "Portfolio", href: "/my-work" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Contact Me", href: "#contact" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -29,10 +29,8 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
brandName="Michael Carpino"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "My Work", id: "/my-work" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
@@ -46,7 +44,7 @@ export default function LandingPage() {
|
||||
tagIcon={Sparkles}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "portfolio" },
|
||||
{ text: "View My Work", href: "/my-work" },
|
||||
{ text: "Get Started", href: "contact" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821288.jpg"
|
||||
|
||||
Reference in New Issue
Block a user