234 lines
11 KiB
TypeScript
234 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Award, Heart, Sparkles, Zap } from 'lucide-react';
|
|
|
|
// Memoized section components for performance optimization
|
|
const MemoHero = React.memo(HeroSplitTestimonial);
|
|
const MemoAbout = React.memo(AboutMetric);
|
|
const MemoFeatureWork = React.memo(FeatureCardThree);
|
|
const MemoFeatureSkills = React.memo(FeatureCardThree);
|
|
const MemoProducts = React.memo(ProductCardOne);
|
|
const MemoContact = React.memo(ContactCenter);
|
|
const MemoFooter = React.memo(FooterBaseReveal);
|
|
const MemoNavbar = React.memo(NavbarStyleCentered);
|
|
|
|
// Performance monitoring utility
|
|
const reportWebVitals = (metric) => {
|
|
if (typeof window !== 'undefined' && (window as any).gtag) {
|
|
(window as any).gtag('event', metric.name, {
|
|
event_category: 'web_vitals',
|
|
value: Math.round(metric.value),
|
|
event_label: metric.id,
|
|
});
|
|
}
|
|
};
|
|
|
|
export default function LandingPage() {
|
|
// Pre-memoized static data to prevent unnecessary re-renders
|
|
const navItems = React.useMemo(() => [
|
|
{ name: "About", id: "about" },
|
|
{ name: "Work", id: "work" },
|
|
{ name: "Skills", id: "skills" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Resume", id: "resume" }
|
|
], []);
|
|
|
|
const heroButtons = React.useMemo(() => [
|
|
{ text: "View My Work", href: "work" },
|
|
{ text: "Get In Touch", href: "contact" }
|
|
], []);
|
|
|
|
const heroTestimonials = React.useMemo(() => [{
|
|
name: "Design Excellence", handle: "Creative Direction", testimonial: "Creating compelling visual narratives through thoughtful design", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-african-american-man-dressed-classic-brown-jacket-standing-studio-dark-background_613910-17787.jpg"
|
|
}], []);
|
|
|
|
const metrics = React.useMemo(() => [
|
|
{ icon: Sparkles, label: "Projects Completed", value: "2+" },
|
|
{ icon: Zap, label: "Years of Experience", value: "3+" },
|
|
{ icon: Award, label: "Design Disciplines", value: "8+" },
|
|
{ icon: Heart, label: "Client Satisfaction", value: "100%" }
|
|
], []);
|
|
|
|
const workFeatures = React.useMemo(() => [
|
|
{
|
|
id: "01", title: "Basic Website", description: "A clean, responsive website built with HTML, CSS, and JavaScript. Demonstrates foundational web design principles and user-centered layout approach.", imageSrc: "http://img.b2bpic.net/free-vector/hotel-landing-page-template-with-photo_23-2148893460.jpg", imageAlt: "responsive website design desktop mobile"
|
|
},
|
|
{
|
|
id: "02", title: "Mobile App Prototype", description: "A comprehensive mobile interface prototype designed in Figma. Showcases UI/UX research, wireframing, and interactive prototyping skills.", imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-template_52683-44294.jpg", imageAlt: "mobile app ui prototype design"
|
|
}
|
|
], []);
|
|
|
|
const skillsFeatures = React.useMemo(() => [
|
|
{
|
|
id: "01", title: "UI Design", description: "Crafting intuitive interfaces with attention to visual hierarchy, accessibility, and user experience principles.", imageSrc: "http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-connections_23-2149174342.jpg", imageAlt: "ui design interface dashboard application"
|
|
},
|
|
{
|
|
id: "02", title: "UX Research", description: "Conducting user research, creating personas, and developing evidence-based design strategies.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1670.jpg", imageAlt: "ux research user testing workshop"
|
|
},
|
|
{
|
|
id: "03", title: "Brand Identity", description: "Developing comprehensive brand systems including logos, typography, and visual guidelines.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853441.jpg", imageAlt: "brand identity logo design guideline"
|
|
},
|
|
{
|
|
id: "04", title: "Motion Design", description: "Creating smooth animations and interactions that enhance user engagement and product delight.", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-infographic-template_23-2149195721.jpg", imageAlt: "motion graphics animation design studio"
|
|
}
|
|
], []);
|
|
|
|
const products = React.useMemo(() => [
|
|
{ id: "1", name: "Figma", price: "Design & Prototype", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-people-discussing-work_52683-101630.jpg", imageAlt: "figma design tool interface screenshot" },
|
|
{ id: "2", name: "Adobe XD", price: "UI Mockups", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg", imageAlt: "adobe xd ui design application" },
|
|
{ id: "3", name: "Photoshop", price: "Image Editing", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440903.jpg", imageAlt: "adobe photoshop image editing interface" },
|
|
{ id: "4", name: "Illustrator", price: "Vector Design", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-web-designer-vertical-business-card_23-2150395752.jpg", imageAlt: "adobe illustrator vector design tool" },
|
|
{ id: "5", name: "After Effects", price: "Motion Graphics", imageSrc: "http://img.b2bpic.net/free-photo/young-programmer-engineer-writing-binary-code-data-terminal-window_482257-126472.jpg", imageAlt: "adobe after effects motion graphics" },
|
|
{ id: "6", name: "GitHub", price: "Version Control", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040426.jpg", imageAlt: "github version control interface" }
|
|
], []);
|
|
|
|
const footerColumns = React.useMemo(() => [
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Work", href: "#work" },
|
|
{ label: "Skills", href: "#skills" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "LinkedIn", href: "https://www.linkedin.com/in/sharanya-sasmal/" },
|
|
{ label: "GitHub", href: "https://github.com/Soulful-Sharanya116" },
|
|
{ label: "Email", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
], []);
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<MemoNavbar
|
|
brandName="Sharanya Sasmal"
|
|
navItems={navItems}
|
|
button={{ text: "Let's Talk", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<MemoHero
|
|
tag="UI/UX & Graphic Designer"
|
|
title="Sharanya Sasmal"
|
|
description="Visual storyteller crafting digital experiences that captivate, inspire, and convert. Specializing in UI design, UX research, and brand identity that elevates digital presence."
|
|
background={{ variant: "glowing-orb" }}
|
|
testimonials={heroTestimonials}
|
|
buttons={heroButtons}
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MemoAbout
|
|
title="Designing Experiences That Matter"
|
|
metrics={metrics}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<MemoFeatureWork
|
|
title="Featured Projects"
|
|
description="A curated selection of design work showcasing my approach to creating impactful digital experiences."
|
|
features={workFeatures}
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<MemoFeatureSkills
|
|
title="Design Skills & Tools"
|
|
description="A comprehensive toolkit of design software and methodologies used to create compelling visual experiences."
|
|
features={skillsFeatures}
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="tools" data-section="tools">
|
|
<MemoProducts
|
|
title="Tools & Software"
|
|
description="The software suite I use to design, prototype, and deliver exceptional digital experiences."
|
|
products={products}
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="resume" data-section="resume">
|
|
<MemoContact
|
|
tag="Professional Profile"
|
|
title="Download My Resume"
|
|
description="Get a comprehensive overview of my design experience, skills, and accomplishments. Available as PDF for your records."
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground={false}
|
|
buttonText="Download PDF"
|
|
inputPlaceholder="your@email.com"
|
|
termsText="Your information is secure and will not be shared. You'll receive a confirmation email with the download link."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<MemoContact
|
|
tag="Let's Collaborate"
|
|
title="Have a Project in Mind?"
|
|
description="I'm always interested in hearing about new design challenges and opportunities to create exceptional digital experiences. Reach out to discuss your project."
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
buttonText="Send Message"
|
|
inputPlaceholder="your@email.com"
|
|
termsText="I'll get back to you within 24 hours. Looking forward to collaborating!"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<MemoFooter
|
|
columns={footerColumns}
|
|
copyrightText="© 2025 Sharanya Sasmal. All rights reserved. Designed with obsession. ✦"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |