Switch to version 5: modified src/app/page.tsx

Merge version_6 into main

src/app/page.tsx

@@ -11,6 +11,9 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import TextAbout from '@/components/sections/about/TextAbout';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import LegalSection from '@/components/legal/LegalSection';
 
 export default function LandingPage() {
   return (
@@ -30,14 +33,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "About", id: "about" },
-        {
+        { name: "Projects", id: "projects" },
-          name: "About",          id: "about"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "Projects",          id: "projects"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="Obodov Shixnazar"
       button={{ text: "Get Started", href: "#contact" }}
@@ -49,48 +48,16 @@ export default function LandingPage() {
       title="Obodov Shixnazar"
       description="Professional Portfolio showcasing innovative solutions, technical expertise, and a commitment to excellence."
       testimonials={[
-        {
+        { name: "Alex Rivier", handle: "@alexriv", testimonial: "Exceptional professional approach and quality of work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-color-shirt-looking-something-laughing-out-pointing-with-index-finger-something-someone-standing-brown-background_141793-133931.jpg" },
-          name: "Alex Rivier",          handle: "@alexriv",          testimonial: "Exceptional professional approach and quality of work.",          rating: 5,
+        { name: "Sarah Chen", handle: "@schen", testimonial: "Transformed our digital presence with brilliance.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-happily-with-hand-hip-confident-positive-proud-friendly-attitude_1194-633391.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-color-shirt-looking-something-laughing-out-pointing-with-index-finger-something-someone-standing-brown-background_141793-133931.jpg"},
+        { name: "Mark Vane", handle: "@mvane", testimonial: "Highly technical and exceptionally easy to work with.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/funny-smiling-woman-with-ringlets-wears-glasses-blue-jacket-poses-pink_291650-1102.jpg" },
-        {
-          name: "Sarah Chen",          handle: "@schen",          testimonial: "Transformed our digital presence with brilliance.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-happily-with-hand-hip-confident-positive-proud-friendly-attitude_1194-633391.jpg"},
-        {
-          name: "Mark Vane",          handle: "@mvane",          testimonial: "Highly technical and exceptionally easy to work with.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/funny-smiling-woman-with-ringlets-wears-glasses-blue-jacket-poses-pink_291650-1102.jpg"},
-        {
-          name: "Elena Ross",          handle: "@eross",          testimonial: "Creative, punctual, and very professional results.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-red-tie-shirt-wearing-glasses-looking-camera-smiling-presenting-copy-space-with-arm-his-handstanding-orange-background_141793-110723.jpg"},
-        {
-          name: "David Kim",          handle: "@dkim",          testimonial: "Delivered beyond all initial expectations.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg"},
-      ]}
-      buttons={[
-        {
-          text: "View Projects",          href: "#projects"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/stylish-black-american-male-dressed-suit-grey-background_613910-9520.jpg"
-      imageAlt="Obodov Shixnazar professional portrait"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-male-dressed-stylish-blue-suit-grey-background_613910-3785.jpg",          alt: "Client One"},
-        {
-          src: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-with-crossed-arms-dressed-blue-jacket-grey-vignette-background_613910-20111.jpg",          alt: "Client Two"},
-        {
-          src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",          alt: "Client Three"},
-        {
-          src: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-4689.jpg",          alt: "Client Four"},
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-handsome-man-with-beard-looking-thoughtful-upper-left-corner-imaging-smiling_1258-26774.jpg",          alt: "Client Five"},
-      ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextAbout
+      <TextAbout title="Dedicated Professional delivering high-impact solutions." useInvertedBackground={false} />
-      useInvertedBackground={false}
-      title="Dedicated Professional delivering high-impact solutions."
-    />
   </div>
 
   <div id="skills" data-section="skills">
@@ -98,12 +65,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Software Engineering", description: "High-quality, scalable code solutions.", imageSrc: "http://img.b2bpic.net/free-photo/debugging-software-programming-language-displayed-computer-display_482257-123007.jpg" },
-          title: "Software Engineering",          description: "High-quality, scalable code solutions.",          imageSrc: "http://img.b2bpic.net/free-photo/debugging-software-programming-language-displayed-computer-display_482257-123007.jpg"},
+        { title: "Product Design", description: "User-centric interface development.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-admin-office-sing-tablet-design-machine-learning-algorithms_482257-124791.jpg" },
-        {
-          title: "Product Design",          description: "User-centric interface development.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-admin-office-sing-tablet-design-machine-learning-algorithms_482257-124791.jpg"},
-        {
-          title: "Technical Strategy",          description: "Aligning technology with business goals.",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-computer-screen-software-developer-typing-programming-language-it-startup-agency-display-concept-system-engineer-writing-source-code-scrolling-text-database-functions-script_482257-33355.jpg"},
       ]}
       title="Core Competencies"
       description="Technical skills driven by modern practices and strategic thinking."
@@ -117,18 +80,8 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Modern App UI", price: "View Project", imageSrc: "http://img.b2bpic.net/free-photo/man-safeguarding-servers-against-viruses-using-mockup-computer_482257-123482.jpg" },
-          id: "p1",          name: "Modern App UI",          price: "View Project",          imageSrc: "http://img.b2bpic.net/free-photo/man-safeguarding-servers-against-viruses-using-mockup-computer_482257-123482.jpg"},
+        { id: "p2", name: "Corporate Platform", price: "View Project", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-day_52683-160828.jpg" },
-        {
-          id: "p2",          name: "Corporate Platform",          price: "View Project",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-day_52683-160828.jpg"},
-        {
-          id: "p3",          name: "Tech Integration",          price: "View Project",          imageSrc: "http://img.b2bpic.net/free-photo/teamworking-ai-technicians-using-green-screen-laptop-business-data-analysis_482257-91014.jpg"},
-        {
-          id: "p4",          name: "Digital System",          price: "View Project",          imageSrc: "http://img.b2bpic.net/free-vector/task-management-application_23-2148628459.jpg"},
-        {
-          id: "p5",          name: "Web Infrastructure",          price: "View Project",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-working-digital-monitors_23-2148910247.jpg"},
-        {
-          id: "p6",          name: "UX Audit Report",          price: "View Project",          imageSrc: "http://img.b2bpic.net/free-photo/printer-icon-computer-page-digital-paper-concept_53876-124304.jpg"},
       ]}
       title="Selected Projects"
       description="A collection of recent work and professional engagements."
@@ -142,74 +95,78 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", value: "100+", description: "Projects Completed" },
-          id: "m1",          value: "100+",          description: "Projects Completed"},
+        { id: "m2", value: "5+", description: "Years Experience" },
-        {
-          id: "m2",          value: "5+",          description: "Years Experience"},
-        {
-          id: "m3",          value: "25+",          description: "Happy Clients"},
       ]}
       title="Proven Performance"
       description="Key achievements throughout my career."
     />
   </div>
 
+  <div id="social-proof" data-section="social-proof">
+      <SocialProofOne
+      title="Trusted Partners"
+      names={["Google", "Microsoft", "Amazon", "Netflix"]}
+      description="Companies we have collaborated with."
+      textboxLayout="default"
+      useInvertedBackground={false}
+    />
+  </div>
+
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardFifteen
-      useInvertedBackground={false}
       testimonial="Obodov's work is meticulous and truly professional."
       rating={5}
       author="Client Review"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg",          alt: "Client A"},
-        {
-          src: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285285.jpg",          alt: "Client B"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-caucasian-man_641386-12.jpg",          alt: "Client C"},
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-smiling-black-man-wool-suit_613910-15883.jpg",          alt: "Client D"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg",          alt: "Client E"},
-      ]}
       ratingAnimation="slide-up"
       avatarsAnimation="slide-up"
+      useInvertedBackground={false}
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg", alt: "Client" }]}
+    />
+  </div>
+
+  <div id="faq" data-section="faq">
+      <FaqBase
+      title="Frequently Asked Questions"
+      description="Answers to common questions."
+      faqs={[
+        { id: "f1", title: "What services do you offer?", content: "I specialize in full-stack software development and intuitive product design. My stack includes modern frameworks like React and Next.js, combined with robust backend architectures for scalable, high-performance applications." },
+        { id: "f2", title: "How do we collaborate?", content: "We start with a thorough discovery phase to align on goals. I follow an agile, iterative workflow with regular milestones, ensuring constant communication and complete transparency throughout the development lifecycle." }
+      ]}
+      faqsAnimation="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
       tag="Contact"
       title="Let's work together"
       description="Reach out to discuss potential projects or opportunities."
-      buttons={[
+      buttons={[{ text: "Contact Me", href: "mailto:email@example.com" }]}
-        {
+      background={{ variant: "plain" }}
-          text: "Contact Me",          href: "mailto:email@example.com"},
+      useInvertedBackground={false}
+    />
+  </div>
+
+  <div id="legal" data-section="legal">
+      <LegalSection
+      layout="section"
+      title="Legal Notice"
+      sections={[
+        { heading: "Privacy Policy", content: { type: "paragraph", text: "We prioritize your data privacy and security." } }
       ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
-      columns={[
+      columns={[{ title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }] }]}
-        {
-          title: "Navigation",          items: [
-            {
-              label: "Home",              href: "#hero"},
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "Projects",              href: "#projects"},
-          ],
-        },
-      ]}
       logoText="Obodov Shixnazar"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #f5faff;
-  --card: #f9f9f9;
+  --card: #f1f8ff;
-  --foreground: #000612e6;
+  --foreground: #001122;
-  --primary-cta: #106EFB;
+  --primary-cta: #15479c;
-  --primary-cta-text: #ffffff;
+  --primary-cta-text: #f5faff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
-  --secondary-cta-text: #000612e6;
+  --secondary-cta-text: #001122;
-  --accent: #e2e2e2;
+  --accent: #a8cce8;
-  --background-accent: #106EFB;
+  --background-accent: #7ba3cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);