Merge version_1 into main #2
@@ -7,196 +7,84 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function BlogPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "/portfolio",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "/services",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{
|
||||
name: "Blog",
|
||||
id: "/blog",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
button={{
|
||||
text: "Work with me",
|
||||
href: "/contact",
|
||||
}}
|
||||
brandName="Designer Portfolio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
brandName="Designer Portfolio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="latest-posts" data-section="latest-posts">
|
||||
<BlogCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Design Insights"
|
||||
description="Articles on design trends, tools, and visual storytelling."
|
||||
blogs={[
|
||||
{
|
||||
id: "b1",
|
||||
title: "The Future of UI",
|
||||
excerpt: "Exploring emerging interface patterns.",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/healthy-food-landing-page-template_23-2149019900.jpg?_wi=6",
|
||||
authorName: "Me",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-glad-businesslady-with-elegant-short-haircut-looking-away-refined-caucasian-girl-with-pink-makeup-posing-gray-jacket-claret-wall_197531-8079.jpg",
|
||||
date: "Jan 12, 2025",
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
title: "Typography Rules",
|
||||
excerpt: "How to select fonts for your brand.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-smartphone-device-with-map-gps-technology_23-2150458980.jpg?_wi=6",
|
||||
authorName: "Me",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-glad-businesslady-with-elegant-short-haircut-looking-away-refined-caucasian-girl-with-pink-makeup-posing-gray-jacket-claret-wall_197531-8079.jpg",
|
||||
date: "Jan 05, 2025",
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
title: "Minimalism in UI",
|
||||
excerpt: "Designing for clarity and impact.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038908.jpg?_wi=5",
|
||||
authorName: "Me",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-glad-businesslady-with-elegant-short-haircut-looking-away-refined-caucasian-girl-with-pink-makeup-posing-gray-jacket-claret-wall_197531-8079.jpg",
|
||||
date: "Dec 20, 2024",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="latest-posts" data-section="latest-posts">
|
||||
<BlogCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Design Insights"
|
||||
description="Articles on design trends, tools, and visual storytelling."
|
||||
blogs={[
|
||||
{ id: "b1", category: "Design", title: "The Future of UI", excerpt: "Exploring emerging interface patterns.", imageSrc: "http://img.b2bpic.net/free-psd/healthy-food-landing-page-template_23-2149019900.jpg", authorName: "Me", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-glad-businesslady-with-elegant-short-haircut-looking-away-refined-caucasian-girl-with-pink-makeup-posing-gray-jacket-claret-wall_197531-8079.jpg", date: "Jan 12, 2025" },
|
||||
{ id: "b2", category: "Typography", title: "Typography Rules", excerpt: "How to select fonts for your brand.", imageSrc: "http://img.b2bpic.net/free-photo/3d-smartphone-device-with-map-gps-technology_23-2150458980.jpg", authorName: "Me", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-glad-businesslady-with-elegant-short-haircut-looking-away-refined-caucasian-girl-with-pink-makeup-posing-gray-jacket-claret-wall_197531-8079.jpg", date: "Jan 05, 2025" },
|
||||
{ id: "b3", category: "UI", title: "Minimalism in UI", excerpt: "Designing for clarity and impact.", imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038908.jpg", authorName: "Me", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-glad-businesslady-with-elegant-short-haircut-looking-away-refined-caucasian-girl-with-pink-makeup-posing-gray-jacket-claret-wall_197531-8079.jpg", date: "Dec 20, 2024" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Guides & How-To's"
|
||||
description="Practical tips for your own design work."
|
||||
blogs={[
|
||||
{
|
||||
id: "b4",
|
||||
title: "Prototyping Tips",
|
||||
excerpt: "Speed up your workflow.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345425.jpg?_wi=5",
|
||||
authorName: "Me",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-businesswoman_329181-13396.jpg",
|
||||
date: "Jan 15, 2025",
|
||||
},
|
||||
{
|
||||
id: "b5",
|
||||
title: "Grid Systems",
|
||||
excerpt: "Organize your layout.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-elements-arrangement-with-empty-screen-tablet_23-2148708013.jpg?_wi=6",
|
||||
authorName: "Me",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-businesswoman_329181-13396.jpg",
|
||||
date: "Jan 18, 2025",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Guides & How-To's"
|
||||
description="Practical tips for your own design work."
|
||||
blogs={[
|
||||
{ id: "b4", category: "Prototyping", title: "Prototyping Tips", excerpt: "Speed up your workflow.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345425.jpg", authorName: "Me", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-businesswoman_329181-13396.jpg", date: "Jan 15, 2025" },
|
||||
{ id: "b5", category: "Grids", title: "Grid Systems", excerpt: "Organize your layout.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-elements-arrangement-with-empty-screen-tablet_23-2148708013.jpg", authorName: "Me", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-businesswoman_329181-13396.jpg", date: "Jan 18, 2025" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Newsletter"
|
||||
title="Subscribe for updates"
|
||||
description="Get design tips in your inbox."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Newsletter"
|
||||
title="Subscribe for updates"
|
||||
description="Get design tips in your inbox."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Designer Portfolio"
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "/portfolio",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "/services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Dribbble",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Behance",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Designer Portfolio"
|
||||
columns={[
|
||||
{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Portfolio", href: "/portfolio" }, { label: "Services", href: "/services" }] },
|
||||
{ title: "Social", items: [{ label: "Dribbble", href: "#" }, { label: "Behance", href: "#" }, { label: "LinkedIn", href: "#" }, { label: "Instagram", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -7,9 +7,9 @@ import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwen
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { PenTool, Search } from "lucide-react";
|
||||
import { PenTool, Search, Check, Layers, Type, Zap, Layout } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
@@ -27,35 +27,13 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "/portfolio",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "/services",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{
|
||||
name: "Blog",
|
||||
id: "/blog",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Work with me",
|
||||
href: "/contact",
|
||||
}}
|
||||
brandName="Designer Portfolio"
|
||||
/>
|
||||
</div>
|
||||
@@ -67,70 +45,31 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "UI/UX Design",
|
||||
description: "Designing intuitive user experiences and interfaces.",
|
||||
items: [
|
||||
{
|
||||
text: "App Design",
|
||||
},
|
||||
{
|
||||
text: "Web Platforms",
|
||||
},
|
||||
{
|
||||
text: "Prototyping",
|
||||
},
|
||||
title: "UI/UX Design", description: "Designing intuitive user experiences and interfaces.", items: [
|
||||
{ icon: Layout, text: "App Design" },
|
||||
{ icon: Layers, text: "Web Platforms" },
|
||||
{ icon: Zap, text: "Prototyping" },
|
||||
],
|
||||
reverse: false,
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/healthy-food-landing-page-template_23-2149019900.jpg?_wi=5",
|
||||
imageAlt: "UI/UX Services",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038908.jpg?_wi=3",
|
||||
imageAlt: "modern interface design project concept",
|
||||
media: { imageSrc: "http://img.b2bpic.net/free-psd/healthy-food-landing-page-template_23-2149019900.jpg", imageAlt: "UI/UX Services" },
|
||||
},
|
||||
{
|
||||
title: "Brand Strategy",
|
||||
description: "Developing cohesive brand identities that resonate.",
|
||||
items: [
|
||||
{
|
||||
text: "Logo Design",
|
||||
},
|
||||
{
|
||||
text: "Typography",
|
||||
},
|
||||
{
|
||||
text: "Brand Systems",
|
||||
},
|
||||
title: "Brand Strategy", description: "Developing cohesive brand identities that resonate.", items: [
|
||||
{ icon: Check, text: "Logo Design" },
|
||||
{ icon: Type, text: "Typography" },
|
||||
{ icon: Layers, text: "Brand Systems" },
|
||||
],
|
||||
reverse: true,
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-smartphone-device-with-map-gps-technology_23-2150458980.jpg?_wi=4",
|
||||
imageAlt: "Branding Services",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-elements-arrangement-with-empty-screen-tablet_23-2148708013.jpg?_wi=3",
|
||||
imageAlt: "corporate branding identity layout design",
|
||||
media: { imageSrc: "http://img.b2bpic.net/free-photo/3d-smartphone-device-with-map-gps-technology_23-2150458980.jpg", imageAlt: "Branding Services" },
|
||||
},
|
||||
{
|
||||
title: "Visual Design",
|
||||
description: "High-quality visual content for all mediums.",
|
||||
items: [
|
||||
{
|
||||
text: "Social Media",
|
||||
},
|
||||
{
|
||||
text: "Poster Design",
|
||||
},
|
||||
{
|
||||
text: "Marketing Assets",
|
||||
},
|
||||
title: "Visual Design", description: "High-quality visual content for all mediums.", items: [
|
||||
{ icon: Zap, text: "Social Media" },
|
||||
{ icon: Layout, text: "Poster Design" },
|
||||
{ icon: Layers, text: "Marketing Assets" },
|
||||
],
|
||||
reverse: false,
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-elements-arrangement-with-empty-screen-tablet_23-2148708013.jpg?_wi=4",
|
||||
imageAlt: "Graphic Services",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-glad-businesslady-with-elegant-short-haircut-looking-away-refined-caucasian-girl-with-pink-makeup-posing-gray-jacket-claret-wall_197531-8079.jpg",
|
||||
imageAlt: "portrait professional woman graphic designer",
|
||||
media: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-elements-arrangement-with-empty-screen-tablet_23-2148708013.jpg", imageAlt: "Graphic Services" },
|
||||
},
|
||||
]}
|
||||
title="How I can help"
|
||||
@@ -147,34 +86,18 @@ export default function LandingPage() {
|
||||
description="How we collaborate to build success."
|
||||
features={[
|
||||
{
|
||||
title: "Discovery",
|
||||
description: "Understanding your business goals.",
|
||||
icon: Search,
|
||||
title: "Discovery", description: "Understanding your business goals.", icon: Search,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-smartphone-device-with-map-gps-technology_23-2150458980.jpg?_wi=5",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345425.jpg?_wi=4",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-smartphone-device-with-map-gps-technology_23-2150458980.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345425.jpg" },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-businesswoman_329181-13396.jpg",
|
||||
imageAlt: "man professional headshot profile",
|
||||
},
|
||||
{
|
||||
title: "Execution",
|
||||
description: "Turning ideas into pixel-perfect reality.",
|
||||
icon: PenTool,
|
||||
title: "Execution", description: "Turning ideas into pixel-perfect reality.", icon: PenTool,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038908.jpg?_wi=4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-elements-arrangement-with-empty-screen-tablet_23-2148708013.jpg?_wi=5",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038908.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-elements-arrangement-with-empty-screen-tablet_23-2148708013.jpg" },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/redhead-female-supervisor-dressed-elegant-suit-grey-background_613910-10390.jpg",
|
||||
imageAlt: "professional portrait female creative director",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -185,9 +108,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Pricing & Timeline"
|
||||
description={[
|
||||
"Projects are quoted based on specific deliverables.",
|
||||
"Average turnaround time is 4-8 weeks per project.",
|
||||
]}
|
||||
"Projects are quoted based on specific deliverables.", "Average turnaround time is 4-8 weeks per project."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -196,54 +117,24 @@ export default function LandingPage() {
|
||||
logoText="Designer Portfolio"
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "/portfolio",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "/services",
|
||||
},
|
||||
title: "Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Portfolio", href: "/portfolio" },
|
||||
{ label: "Services", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Dribbble",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Behance",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
title: "Social", items: [
|
||||
{ label: "Dribbble", href: "#" },
|
||||
{ label: "Behance", href: "#" },
|
||||
{ label: "LinkedIn", href: "#" },
|
||||
{ label: "Instagram", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user