Skip to content

Commit

Permalink
fdas
Browse files Browse the repository at this point in the history
  • Loading branch information
@neerajrekwar
neerajrekwar committed Sep 6, 2024
1 parent c856d30 commit 061f0f9
Show file tree
Hide file tree
Showing 7 changed files with 120 additions and 81 deletions.
14 changes: 5 additions & 9 deletions app/components/AnimatedToolstips.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,21 @@ const people = [
{
id: 1,
name: "Neeraj Rekwar",
designation: "Passionate programmer",
image:
"/me.webp",
designation: "Front-end Developer",
image: "/me.webp",
},
{
id: 2,
name: "",
designation: "Product Manager",
image:
"",
image: "",
},
{
id: 3,
name: "",
designation: "Data Scientist",
image:
"",
}

image: "",
},
];

export function AnimatedTooltipPreview() {
Expand Down
30 changes: 14 additions & 16 deletions app/components/ui/animated-tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,31 +71,29 @@ export const AnimatedTooltip = ({
<div className="absolute inset-x-10 z-30 w-[20%] -bottom-px bg-gradient-to-r from-transparent via-emerald-500 to-transparent h-px " />
<div className="absolute left-10 w-[40%] z-30 -bottom-px bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px " />
<div className="font-bold text-white relative z-30 text-base">
{item.name ? (
<span>{item.name}</span>
):(
<span>unknown</span>
)}
{item.name ? <span>{item.name}</span> : <span>unknown</span>}
</div>
<div className="text-white text-xs">
{item.designation ? (
{item.designation ? (
<span>{item.designation}</span>
):(
) : (
<span>worker</span>
)}
</div>
</motion.div>
)}
</AnimatePresence>
{item.image ? (<Image
onMouseMove={handleMouseMove}
height={100}
width={100}
src={item.image}
alt={item.name}
className="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white relative transition duration-500"
/>) : (
<div className="object-cover !m-0 !p-0 bg-four object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white relative transition duration-500"></div>
{item.image ? (
<Image
onMouseMove={handleMouseMove}
height={100}
width={100}
src={item.image}
alt={item.name}
className="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white relative transition duration-500"
/>
) : (
<div className="object-cover !m-0 !p-0 bg-five object-top rounded-full h-14 w-14 border-2 border-primary group-hover:scale-105 group-hover:z-30 relative transition duration-500"></div>
)}
</div>
))}
Expand Down
13 changes: 3 additions & 10 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,10 @@ import StickyRelativeDemo from "./components/StickyRelativeDemo";
import { Accordion } from "@/components/ui/accordion";
import { AccordionDemo } from "@/components/Accordion";




export const metadata: Metadata = {
title: "nee. - Anonymous seo find at Delhi ",
description: "Our Delhi-based team specializes in creating custom web development solutions and bespoke web tools. We have expertise in Nexjs and ensure high-quality, reliable code delivered on time and within budget.",


description:
"Our Delhi-based team specializes in creating custom web development solutions and bespoke web tools. We have expertise in Nexjs and ensure high-quality, reliable code delivered on time and within budget.",
};
export default function Home() {
return (
Expand All @@ -40,11 +36,8 @@ export default function Home() {
<VisionSection />
</section>
<section className="text-five">

<AccordionDemo/>

<AccordionDemo />
</section>
</main>

);
}
105 changes: 80 additions & 25 deletions components/Accordion.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AnimatedTooltipPreview } from "@/app/components/AnimatedToolstips";
import { AnimatedTooltip, } from "@/app/components/ui/animated-tooltip";
import { AnimatedTooltip } from "@/app/components/ui/animated-tooltip";
import {
Accordion,
AccordionContent,
Expand All @@ -10,52 +10,107 @@ import {
export function AccordionDemo() {
return (
<>
<div className="text-four min-h-screen flex flex-col justify-start items-start pt-20 bg-custom-radial-lg ">
<div className="max-w-6xl text-center md:text-xl p-2 m-auto">

<div className="text-center text-2xl font-semibold">Frequently Asked Questions</div>
<p className="text-center text-base py-2 mb-8">Feel free to ask me anything. I'm here to help!</p>
<Accordion type="single" collapsible className="w-full text-left">
<div className="text-four min-h-screen flex flex-col justify-start items-start pt-20 ">
<div className="w-full text-center md:text-xl p-2 m-auto">
<div className="py-3 text-2xl text-five md:text-4xl text-center">
Frequently Asked Questions
</div>
<p className="text-center text-base py-2 mb-8">
Feel free to ask me anything. I&apos;m here to help!
</p>
<Accordion
type="single"
collapsible
className="max-w-5xl m-auto text-left"
>
<AccordionItem value="item-1">
<AccordionTrigger>What web solutions do you offer?</AccordionTrigger>
<AccordionTrigger>
What web solutions do you offer?
</AccordionTrigger>
<AccordionContent>
We offer responsive web design services to improve user experience across different devices. Our solutions include successful implementation examples and can help boost user engagement and conversion rates for businesses. Let&apos;s discuss how we can tailor our web solutions to meet your needs.
We offer responsive web design services to improve user
experience across different devices. Our solutions include
successful implementation examples and can help boost user
engagement and conversion rates for businesses. Let&apos;s
discuss how we can tailor our web solutions to meet your needs.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>How scalable are your web solutions?</AccordionTrigger>
<AccordionTrigger>
How scalable are your web solutions?
</AccordionTrigger>
<AccordionContent>
I&apos;ve noted down your request to remember the text How scalable are your web solutions?
I&apos;ve noted down your request to remember the text How
scalable are your web solutions?
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Are your web solutions customizable to fit specific business needs?
</AccordionTrigger>
<AccordionTrigger>
Are your web solutions customizable to fit specific business
needs?
</AccordionTrigger>
<AccordionContent>
Absolutely, our web solutions can be tailored to meet specific business requirements.
Absolutely, our web solutions can be tailored to meet specific
business requirements.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-4">
<AccordionTrigger>What makes your web solutions reliable?</AccordionTrigger>
<AccordionTrigger>
What makes your web solutions reliable?
</AccordionTrigger>
<AccordionContent>
Our web solutions are built on a foundation of robust technology and rigorous testing, ensuring reliability at every step.
Our web solutions are built on a foundation of robust technology
and rigorous testing, ensuring reliability at every step.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-5">
<AccordionTrigger>How can we get in touch to discuss our business needs?</AccordionTrigger>
<AccordionTrigger>
How can we get in touch to discuss our business needs?
</AccordionTrigger>
<AccordionContent>
You can reach out to discuss our business needs via email at [email address] or by phone at [phone number]. Looking forward to connecting with you.
You can reach out to discuss our business needs via email at
[email address] or by phone at [phone number]. Looking forward
to connecting with you.
</AccordionContent>
</AccordionItem>
</Accordion>
<div className="py-12 my-2">
<h6 className="py-3 text-xl md:text-4xl">Didn&apos;t find an answer?</h6>
<p className="py-2 mb-16 text-base">My team is just an email away and ready to answer your questions</p>
</div>
</div>
<div className="py-12 md:min-h-screen m-auto bg-custom-radial-md text-five border-seven flex flex-col justify-center items-center">
<h6 className="py-3 text-2xl md:text-4xl text-center">
Didn&apos;t find an answer?
</h6>
<div className="flex flex-col justify-center items-center">
<p className="py-2 mb-20 text-base text-four md:text-lg px-3 text-center">
My team is just an email away and ready to answer your questions
</p>
<AnimatedTooltipPreview />
<a href="/contact"
className="p-2 mt-12 rounded-lg text-sm px-3 bg-secondary text-primary"
> Contact team </a>
</div>
<a href="/contact">
<button className="bg-slate-800 p-2 ml-4 mt-12 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block">
<span className="absolute inset-0 overflow-hidden rounded-full">
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
</span>
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 ">
<span> Contact team</span>
<svg
fill="none"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.75 8.75L14.25 12L10.75 15.25"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
</svg>
</div>
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
</button>
</a>
</div>
</div>
</>
Expand Down
32 changes: 16 additions & 16 deletions components/ui/accordion.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
"use client"
"use client";

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";

import { cn } from "@/lib/utils"
import { cn } from "@/lib/utils";

const Accordion = AccordionPrimitive.Root
const Accordion = AccordionPrimitive.Root;

const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b", className)}
className={cn("border-b border-seven", className)}
{...props}
/>
))
AccordionItem.displayName = "AccordionItem"
));
AccordionItem.displayName = "AccordionItem";

const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
Expand All @@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 text-left items-start justify-between gap-3 py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180",
"flex flex-1 text-left items-start justify-between gap-3 py-4 text-five font-medium transition-all [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}
Expand All @@ -37,22 +37,22 @@ const AccordionTrigger = React.forwardRef<
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;

const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm md:text-base transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
className="overflow-hidden text-sm md:text-base max-w-5xl m-auto pl-4 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
))
));

AccordionContent.displayName = AccordionPrimitive.Content.displayName
AccordionContent.displayName = AccordionPrimitive.Content.displayName;

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
1 change: 0 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@ module.exports = {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
aurora: 'aurora 60s linear infinite',
scroll: 'scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite',

scroll: 'scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite'
},
keyframes: {
scrollVertical: {
Expand Down Expand Up @@ -96,8 +95,7 @@ module.exports = {
to: {
backgroundPosition: '350% 50%, 350% 50%'
}
},

}
}
}
},
Expand Down

0 comments on commit 061f0f9

Please sign in to comment.